[Javascript] 자바스크립트 유효 범위(Scope)란? 스코프의 개념! - 전역 스코프(Global scope)와 지역 스코프(Local scope)

 

요즘에 기존에 있던 Javascript 라이브러리를 바탕으로 좀 더 편하게 사용할 수 있는 라이브러리를 만들기 위한 작업을 진행 중인데요.

그러면서 기본적인 개념들을 다시 되새겨보고 느끼게 되었습니다.

 

그래서 오늘은 Javascript(자바스크립트)의 Scope(유효범위)에대해 알아볼게요.

---

Scope(유효 범위)

우리 말로는 유효범위라고도 부르지만 실제로 사람들이 스코프(Scope)라고들 많이 부릅니다.

이 스코프(Scope)란 작성한 코드를 둘러싸고 있는 환경으로 생각하면 쉽습니다. 어떠한 범위에 속해있는지를 정의한다고 할 수 있습니다.

 

스코프(Scope)에는 전역(global) 스코프와 지역(local) 스코프가 있습니다.

 

전역 스코프는 함수 밖에서 정의하는 것이고, 지역 스코프는 함수 내에서 정의한 것입니다. 여타 프로그래밍언어에서 전역변수 지역변수랑 비슷한 느낌이라고 생각하실 수 있을 것 같습니다.

근데 여기서 자바스크립트의 특징은 함수 레벨 스코프(Function-leval-scope)라는 것입니다.

 

대부분의 프로그래밍 언어는 블록 레벨 스코프(Block-level-scope)를 사용합니다. 변수를 선언하면 해당 변수를 참조할 수 있는 범위가 블록 단위로 되어있다는 얘깁니다. 하지만 자바스크립트는 함수 레벨 스코프이기 때문에 함수 블록 내에서 선언된 변수는 함수 블록 내에서만 유효하고 함수 외부에서는 참조할 수 없습니다.

 

function scopeChk() {
    if (true) {
        var name = '지토';
        console.log('1: ' + name); // 1: 지토
    }
    console.log('2: ' + name); // 2: 지토
}

scopeChk();

 

위의 함수를 실행하면

라는 결과값이 나오게 됩니다. 자바와 같은 다른 프로그래밍 언어에서 이런 식으로 사용했다면 2번에서 블록 안에 있는 변수를 참조할 수 없었겠죠.

 

단, var 변수를 사용했을 때만 이러한 결과가 나오게 됩니다. 자바스크립트 ES6 이후 const와 let으로 변수를 선언할 수 있게 되었는데요, 이 둘은 블록 레벨 스코프이기 때문에 위의 결과값이 아닌, 아래의 결과값이 나오게 됩니다.

let은 블록 레벨 스코프이기 때문이죠.

결론적으로는 var는 함수 레벨 스코프이고, const와 let은 블록 레벨 스코프입니다.

---

전역 스코프(Global scope)와 지역 스코프(Local scope)

 

일반적으로 변수가 함수 외부나 중괄호{} 외부에서 선언되었다면 전역 스코프에 정의되었다고 할 수 있습니다.

전역 스코프에 변수를 정의했다면 코드 어디에서나 해당 변수를 참조 가능합니다.

 

지역 스코프는 함수 내부에서 선언된 변수들을 지역 스코프에 정의되었다고 할 수 있습니다.

지역 스코프에 변수를 정의했다면 해당 함수 내에서만 참조가 가능하고 해당 함수를 벗어나면 지역 스코프에 정의된 변수를 사용할 수 없습니다.

때문에 함수가 각각 선언되어 있을 시 각각의 지역 스코프에 있는 변수를 다른 함수에서 참조할 수 없습니다.

 

var Global = 'global scope'; // 전역스코프

var function_local = () => {
    var Local = 'local scope'; // 지역 스코프
    console.log(Global); // 전역 스코프 참조 가능
    console.log(Local); // 해당 함수 내의 지역 스코프 참조 가능
};

console.log(Local); // Local은 지역 스코프 이므로 에러 발생

위의 코드 실행 결과

 

 

---

함수 안에서 전역, 지역 스코프 참조 결과

 

 

살펴본 결과 함수를 벗어났을 때 참조가 불가능한 지역 스코프보다 전역 스코프가 편하다고 생각할 수 있습니다. 저도 자바스크립트를 처음 사용할 때는 별생각 없이 사용하곤 했었습니다. 하지만 되도록 지역 스코프에 변수를 정의하는 게 좋다고 생각합니다.

 

왜냐하면 전역 스코프에 변수를 정의했다면 팀원들과 협업을 하거나 정말 긴~ 코드를 작성하다 보면 변수 이름이 겹쳐서 생각과 다른 동작을 할 수도 있을 것입니다. 이전에 있던 변수를 덮어쓰게 돼버릴 수도 있는 것이지요.

 

대표적으로는 이러한 이유 때문에라도전역 스코프에서의 변수 정의는 신중하게하는 것이 좋을 것 같습니다.