스코프(scope - 유효범위)의 이해가 필요한 경우가 실무에서 꽤나 있었다.
자바스크립트에서 스코프는 다른 언어의 스코프랑 구별되는 특징을 가지고 있다.
var 키워드로 선언한 변수와 let 또는 const 키워드로 선언한 변수의 스코프도 다르게 동작하며, 변수 그리고 함수와 깊은 관련이 있다.
함수의 매개변수는 함수 몸체 내부에서만 참조가 되고, 함수 몸체 외부에서는 참조가 되지 않는다. 이것은 매개변수를 참조할 수 있는 유효범위, 즉 매개변수의 스코프가 함수 몸체 내부로 한정된다.
function add(x, y) {
// 매개변수는 함수 몸체 내부에서만 참조할 수 있다.
// 즉, 매개변수의 스코프(유효범위)는 몸체 내부이다.
console.log(x, y); // 2 5
return x + y;
}
add(2, 5);
// 매개변수는 함수 몸체 내부에서만 참조할 수 있다.
console.log(x, y); // x is not defined모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 한다.
즉 스코프는 식별자가 유효한 범위를 말한다.
var var1 = 1; // 1
if (true) {
var var2 = 2; // 2
if (true) {
var var3 = 3 // 3
}
}
function foo() {
var var4 = 4; // var4 is not defined
function bar() {
var var5 = 5; // var5 is not defined
}
}
console.log(var1);
console.log(var2);
console.log(var3);
console.log(var4);
console.log(var5);다음과 같이 전역변수인 var1,var2,var3이 가지는 값에 대해서는 불러올수 있었지만, 지역변수를 가지는 var4와 var5는 함수 바깥에서 찾지 못한다.
var x = 'global';
function foo () {
var x = 'local';
console.log(x); // ?
}
foo ()
console.log(x); // ?다음과 같은 코드는 과연 어떻게 작동할까?
자바스크립트 엔진이 스코프를 통해서 어떤 변수를 참조할 지 결정하는 과정을 가지며, 이를 통해 식별자를 결정(identifier resolution) 한다. 이는 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙을 스코프라는 네임스페이스를 통해 가진다.
그래서 위와 같이 같은 x를 가진 변수에도 다른 결과를 나타낸다.
function foo() 안에있는 변수 x : local
전역변수에 있는 변수 x : global
스코프라는 개념을 가지고 있지 않다면, 프로그램 전체에서 하나밖에 변수를 사용할 수 밖에 없다. 따라서 하나의 값은 유일한 식별자에 연결(name binding)이 되어줘야 한다.
식별자는 마치 우리가 컴퓨터에서 파일이름을 중복해서 사용할 수 있는건 폴더(디렉토리)라는 분간이 되어있기 때문에, 폴더가 없다면 컴퓨터 전체에서 파일 이름자체로 유일해야 한다.
스코프내에서 파일 이름은 유일해야하지만, 다른 스코프에서 같은 이름의 식별자를 사용하는 개념이라 보면 편할거 같다.
