[JavaScript] 함수 레벨 스코프와 블록 레벨 스코프

자바스크립트의 스코프는 변수의 유효한 범위를 의미한다. var로 선언한 변수는 오직 함수의 중괄호 내부만을 유효 범위로 인정하는데, 이를 함수 레벨 스코프$_{function \space level \space scope}$라 한다. 반면 C나 자바 등 대부분의 프로그래밍 언어는 모든 중괄호(함수, if문, for문, while문 등) 내부를 유효 범위로 인정한다. 이러한 특성을 블록 레벨 스코프$_{block \space level \space scope}$라 한다.

 

var x = 1;

if (true) {
  var x = 10;
  console.log("if문 안쪽:", x);
}

console.log("if문 바깥쪽:", x);

위 예제를 보면 if문 내부와 외부에서 선언된 x가 같은 변수를 가리킨다. var는 함수 레벨 스코프만 인정하기 때문에, if문의 중괄호는 새로운 스코프를 생성하지 않는다. 따라서 if문 내부의 var x = 10은 전역 변수 x를 재할당하는 것이다.

 

for (var i = 0; i < 5; i++) {
    console.log("for문 안쪽:", i);
}
console.log("for문 바깥쪽:", i); // 5

대부분의 프로그래밍 언어에서는 for문의 변수 `i`는 루프 내부에서만 사용 가능한 지역 변수다. 반복이 끝나면 `i`는 사라지므로 외부에서 접근할 수 없다. 하지만 var로 선언된 변수는 블록 레벨 스코프를 따르지 않아 for문의 `i`가 전역 변수가 되기 떄문에, 의도치 않게 다른 코드와 충돌할 수 있다.

 

이런 문제를 해결하기 위해 ES6에서는 let과 const가 도입되었다. 이 키워드들은 블록 레벨 스코프를 지원해 변수의 유효 범위를 제한할 수 있다.