유효 범위 scoping
기본적으로 var 키워드로 선언된 변수는 함수 레벨 스코프이다. 자바스크립트에서는 함수 레벨 스코프 (function scoping)와 블록 레벨 스코프 (block scoping)로 나뉜다.
- 함수 레벨 스코프 : 변수에 접근할 수 있는 범위가 변수가 선언된 함수로 한정된다.
- 블록 레벨 스코프 : 변수에 접근할 수 있는 범위가
{}블록 내부로 한정된다.
1
2
3
4
5
6
7
8
// function scoping
run = function() {
if (true) {
var bar = 'bar'
}
console.log(bar)
}
run() // 'bar'
var은 if 블록이 아닌 함수 내부 전체 에서 접근가능하기 때문에 if 블록이 종료되어도 접근할 수 있다. 따라서 ‘bar’ 출력.
1
2
3
4
5
6
7
8
// block scoping
run = function() {
if (true) {
let bar = 'bar'
}
console.log(bar)
}
run() // ReferenceError: bar is not defined
let은 블록 레벨 스코프이기 때문에 if블록 내에서만 유효하다. 따라서 if문 종료후에는 접근할 수 없으므로 에러가 발생한다.
var는 함수 레벨 스코프이기 때문에 블록 내부의 변수가 블록 외부에까지 영향을 미칠 수 있다는 점을 알아야 한다. 이는 코드의 추적을 방해하고, 예측하지 못한 결과를 만들 수도 있다. 모든 변수이름을 다 머리 속에 저장하고 코드를 작성하지 않으므로 충분히 중복된 변수명을 사용할 수 있다. 또한, var로 선언한 변수는 전역 객체에 등록된다는 점도 같은 맥락에서 이해할 수 있다.
정리하자면,
- 내가 사용한 변수의 유효범위를 정확하게 제한하거나 예측할 수 없다.
- 전역 객체에 등록되어 전역변수로 사용된다.