TIL 62 (스코프란)

지금까지 학습하면서 스코프에 대해서 알고 있다고 생각을 했으나 누가 물어봤을 때 정확하게 답변을 하지 못하는 제 모습에 정확하게 정리하는 것이 필요하다는 생각이 들었습니다.

 

스코프란, 모든 식별자들은 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위를 의미합니다.

 

이러한 스코프는 전역 스코프와 지역 스코프로 구분할 수 있습니다. 전역 스코프는 말 그래도 코드의 가장 바깥 영역을 의미하는 전역에서 만들어서 지는 스코프이며, 지역 스코프는 함수 몸체 내부를 의미하는 지역에서 만들어지는 스코프입니다. 

 

조금 더 자세하게 알아본다면, 스코프는 모든 식별자가 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위입니다. 이 때 선언된 지역과 하위 지역에서만 유효합니다. 즉, 지역 스코프에서 선언된 지역 변수는 해당 스코프와 하위 지역 스코프에서 유효합니다.

 

쉽게 이해하기 위해 스코프 체인에 대해서도 알아보겠습니다.

스코프 체인이란, 최상위에 전역 스코프를 시작으로 계층적으로 스코프들이 연결된 것을 의미합니다. 변수를 참조할 때 자바스크립트 엔진은 변수를 참조하는 코드의 스코프에서 시작해 상위 스코프 방향으로 이동하며 선언된 변수를 검색합니다. 아까 알아봤던 지역 스코프에서 선언된 지역 변수는 해당 스코프와 하위 지역 스코프에서 유효한 것은 하위 스코프에서 어떠한 변수를 참조할 때, 해당 스코프에서 없다면, 상위 스코프로 이동해서 검색할 수 있기 때문입니다. 그리고 변수의 참조가 해당 스코프의 하위 스코프로 내려가면서 검색하지 않기 때문에 하위 스코프에서 유효한 변수를 상위 스코프에서는 참조할 수 없습니다.

 

ES5까지 변수를 선언하는 방법은 var 키워드뿐이었습니다. var 키워드는 오직 함수 몸체(함수의 코드 블록)만을 지역 스코프로 인정했으며 이를 함수 레벨 스코프라고 합니다. var 키워드는 다른 프로그래밍 언어에서 다른 코드 블록들도 지역 스코프를 형성하는 블록 레벨 스코프를 인정하지 않았습니다.

 

다음의 코드를 통해서 함수 레벨 스코프로 인해 x변수가 변경되지 않는 것을 확인할 수 있습니다. foo 함수는 지역 스코프로 지역 내부에 있는 x 변수를 먼저 찾아서 리턴을 하기 때문에 전역 변수에 재할당되지 않습니다.

var x = 'global';

function foo () {
  var x = 'local';
  console.log(x);
}

console.log(x); //global
foo(); // local
console.log(x); // global

하지만 블록 레벨 스코프는 인정하지 않아 값이 변경됩니다. 블록 레벨 스코프를 인정할 경우에는 for 문에서 선언된 y는 코드 블록 내에서만 유효한 지역 변수이지만, var 키워드는 블록 레벨 스코프를 인정하지 않기 때문에 y는 전역 변수가 되어 중복 선언이 되며 그 결과 전역 변수의 값이 재할당됩니다. var와 let 키워드의 차이를 확인할 수 있습니다.

var y = 10;

for ( var y = 1; y < 5; y++ ) {
  console.log(y) // 1, 2, 3, 4
}

console.log(y); // 5

let y = 10;

for ( let y = 1; y < 5; y++ ) {
  console.log(y) // 1, 2, 3, 4
}

console.log(y); // 10

 

ES6에서는 var 키워드의 단점을 보완하기 위해 let과 const라는 새로운 변수 선언 키워드를 도입했습니다. var 키워드는 함수의 코드 블록만을 지역 스코프로 인정하는 함수 레벨 스코프를 따랐지만, let과 const 키워드로 선언한 변수는 모든 코드 블록(함수, if문, for문, while문, try/catch문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따릅니다.

 

다음에는 var, let, const 키워드의 선언과 초기화 그리고 호이스팅에 대해서 자세하게 알아보겠습니다.

 

참고 문서 : 모던 자바스크립트 Deep Dive