자바스크립트의 변수 선언 키워드 var, let, const에 관한 내용 총정리. 이제 다시는 찾아보지 말자.
스코프
var와 let, const를 구분하는 차이를 이해하기 위해서는 먼저 스코프scope 개념에 대한 이해가 필요하다.
스코프는 “유효 범위”다. 스코프가 변수를 참조할 수 있는 범위를 결정하는 것이다. 함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있다. 즉, 함수 매개변수의 스코프는 ‘함수 몸체 내부’인 것이다.
그렇다면 변수의 스코프는 어떻게 정해지는 것일까?
모든 식별자는 “자신이 선언된 위치”에 의해 유효 범위가 결정된다.
즉, 스코프는 변수가 어디에서 선언되느냐에 의해 결정되는 것이다. 함수에서 선언된 매개변수의 스코프가 함수 내부에서만 참조 가능한 것처럼.
변수뿐만이 아니라 함수 이름, 클래스 이름 등 모든 식별자가 마찬가지 규칙을 따른다.
그렇다면 궁금해지는 것이 하나 있다. 만약 동일한 이름을 가진 변수의 스코프가 겹치는 경우는 어떻게 되는 걸까?
var x = "global";
function foo() {
var x = "local";
console.log(x);
}
foo(); // ???위 코드에서 첫 번째 변수 x는 전역에서 선언되었다. 그러나 foo 함수 내부에서 또 다른 변수 x가 선언되었다. 전역 변수 x는 어디에서나 참조할 수 있을 것이다. 반면 함수 내부의 x는 함수 내부에서만 참조할 수 있다. 그런데 함수 내부에서 x를 호출하면 ‘어디에서나 참조 가능한 x’와 ‘함수 내부에서 참조 가능한 x’ 이 두 경우 모두에 해당이 된다.
함수 foo의 스코프가 전역 스코프에 포함이 되기 때문에 문제가 발생했다. 함수 내부에서 또 다른 함수가 선언되고 그 안에서 변수가 선언되면 새로운 스코프가 생성된다. 그 스코프는 foo 함수 스코프 한 단계 아래의 스코프를 갖는다. 이렇게 스코프가 계층적으로 연결된 것을 스코프 체인이라고 부른다. (스코프 체인의 실체와 관련해서는 렉시컬 환경을 찾아보자)
위 질문에 대한 해답을 스코프 체인에서 찾을 수 있다.
변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여
상위 스코프 방향으로 이동하며 선언된 변수를 검색한다.
변수가 존재하면, 해당 변수를 참조하고 검색을 종료한다.
이 설명을 통해 위 질문에 대한 답을 유추해볼 수 있다.
foo 함수 내부에서 참조된 x는 가장 가까운 스코프에서 선언된 변수 x가 있는지 탐색한다. 있다. var x = "local"이다. 그리고 검색이 끝난다. 따라서 위 코드는 “local”을 출력한다.
만약 함수 내부에 x 변수 선언이 없었다면, 점점 상위 스코프로 탐색 범위를 이동하며 결국 마지막으로 전역에서 선언된 var x = "global"을 만나게 될 것이다. 이제 전역 변수가 왜 전역에서 참조 가능한지도 알 게 된 것이다.
var, 그리고 함수 레벨 스코프
이제 본격적으로 변수 선언 키워드에 대해서 알아보고자 한다.
먼저 var 키워드는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 이를 함수 레벨 스코프라고 한다.
코드의 블록은 다양하게 구분된다. if문이나 for문 내부의 블록, try/catch문 내부의 블록 등등. 이처럼 다양한 코드 블록이 존재하지만, var를 사용하여 함수 내부가 아닌 다른 블록에서 변수를 선언한다면 모두 전역 변수가 된다.
var x = 1;
if(true) {
var x = 2;
}
for(var x = 2; x < 3; x++) {
console.log('foo');
}
function foo() {
var x = 4;
console.log(x);
}
console.log(x); // 3
foo(); // 4위 예시에서 함수 foo 내부에서 선언된 x를 제외하면, 나머지 x는 모두 전역 변수이다. 함수가 아닌 블록에서 var를 사용해 선언되었기 때문이다. 따라서 x는 전역 변수 중에서 가장 마지막에 선언된 for문 내부의 x를 참조하는 것이다.
동적 스코프와 정적 스코프(렉시컬 스코프)
위에서 살펴본 것처럼 var로 선언한 변수는 함수 레벨 스코프를 따른다. 그러나 다른 키워드로 변수를 선언하거나, 혹은 자바스크립트가 아닌 다른 언어의 경우 함수 레벨 스코프가 아닌 블록 레벨 스코프를 따르기도 한다.
그렇지 않은 경우가 존재한다는 사실을 알고 있는 것은 중요하다.
그래서 동적 스코프와 정적 스코프에 대해서도 짧게 알고 넘어가보자.
var x = 1;
function foo() {
var x = 2;
bar();
}
function bar() {
console.log(x);
}
foo(); // ?
bar(); // ?위에서 알아본 바에 의하면 자바스크립트의 모든 식별자는 ‘자신이 선언된 위치’에 의해 스코프가 결정된다고 했다.
따라서 전역에서 정의된 함수 bar는 전역 스코프를 갖는다. 비록 함수 foo 내부에서 호출되었지만 말이다. 이 규칙에 따르면 위 코드는 두 번 모두 전역 변수 x를 참조하여 1을 호출한다.
맞다. 자바스크립트는 “어디서 정의했는지에 따라 함수의 스코프를 결정”하기 때문이다. 이를 정적 스코프 혹은 렉시컬 스코프를 따른다고 말한다.
대부분의 언어는 렉시컬 스코프를 따르지만, Perl 같은 언어에는 동적 스코프가 존재한다고 한다.
동적 스코프는 정의되는 위치가 아니라 “호출되는 위치”에 따라 스코프가 결정된다. 함수를 정의하는 시점에는 스코프를 알 수 없고, 호출되는 시점에 동적으로 상위 스코프가 정해지는 것이다.
(렉시컬 스코프를 이해했다면 클로져closure에 대해서 공부해보자)
이처럼 var는 렉시컬 스코프를 따르는 변수 선언 키워드이다. 그런데 var를 놔두고 왜 let이나 const 같은 키워드가 새롭게 등장한 것일까? var가 완벽했다면 다른 것들은 필요 없었을 텐데.
var의 문제점
1. 중복 선언
위에서 그냥 지나친 사실이 하나 있다. x라는 동일한 이름을 가진 변수를 전역에서 여러 번 선언하면 변수 x는 마지막 값으로 계속 덮어씌워졌다. 즉, var는 전역이라는 동일한 스코프 내에서 동일한 변수 이름을 사용하여 변수를 주중복 선언할 수 있다는 의미다.
// 단, 초기화문이 없으면 무시된다!
var x = 1;
var y = 1;
var x = 2;
var y;
console.log(x); // 2
console.log(y); // 1중복 선언은 오류를 발생시킬 가능성을 높인다.
만약 몇 만 줄이나 되는 코드를 작성한다고 가정해보자. 내가 해당 변수 이름을 사용했는지 안 했는지 정확하게 체크하지 못하고 의도치 않게 다른 값으로 중복 선언할 가능성이 다분하다.
2. 함수 레벨 스코프
함수 레벨 스코프 역시 var의 문제점 중 하나다. 함수의 코드 블록을 제외한 곳에서 선언되는 모든 변수가 전역 변수가 되기 때문에, 전역 변수를 남발하게 되고 이로 인해 의도치 않게 전역 변수를 중복 선언되는 경우가 발생한다.
자주 사용하는 for문 등에서 선언하는 변수도 불필요하게 전역 변수가 된다. 이는 의도치 않게 값을 변경시킬 가능성을 내포한다.
3. 변수 호이스팅
var 키워드로 변수를 선언하면 변수 호이스팅이 발생한다. 호이스팅은 가독성을 떨어뜨리고 오류를 발생시킬 여지를 남긴다. (여기서 호이스팅에 대해 설명하지는 않겠다)
let과 const의 등장
이러한 var 키워드의 문제점을 보완하기 위해 ES6에서 새로운 변수 선언 키워드인 let과 const가 등장했다.
let의 특징
1. 중복 선언 금지
var x = 1;
let y = 1;
var x = 2;
let y = 2; // SyntaxError: Indentifier 'y' has already been declaredvar를 사용하여 동일 이름을 가진 변수를 선언하면 아무 오류도 발생하지 않는다. 그저 나중에 선언된 값으로 덮어씌워질 뿐이다.
그러나 let을 사용하여 동일 이름을 가진 변수를 선언하면 SyntaxError가 발생한다. 같은 스코프 내에서의 중복 선언이 금지되어 있기 때문이다.
2. 블록 레벨 스코프
함수 레벨 스코프를 따르는 var와는 달리 let은 블록 레벨 스코프를 따른다.
let x = 1;
for(let x = 100; x < 101; x++) {
let y = 1;
}
console.log(x); // 1
console.log(y); // ReferenceError: y is not defined즉, ‘블록’ 내부에서 let 키워드로 선언된 변수의 스코프는 해당 블록 스코프를 갖는다.
위의 x는 서로 다른 스코프에 존재하는 별개의 변수다. 또한 전역에서 블록 스코프 내의 변수를 참조하는 경우 참조 에러가 발생한다.
3. 변수 호이스팅
let 키워드로 선언한 변수를 변수 선언문 이전에 참조하면 참조 에러가 발생한다. var 키워드로 선언한 변수가 초기화된 값 undefined를 반환하는 것과 다른 점이다. 즉, “변수 호이스팅이 발생하지 않는 것처럼” 동작한다.
짧게 설명하고 넘어가자면,
var로 변수 선언을 하면 ‘선언 단계’와 ‘초기화 단계’가 런타임 이전에 실행되기 때문에 호이스팅이 발생하지만,
let 선언은 ‘선언 단계’와 ‘초기화 단계’가 분리되어 진행된다. 런타임 이전에는 선언 단계만 실행되고, 변수 선언문에 이르러서야 초기화 단계가 실행된다.
따라서 초기화 되지 않은 변수에 접근할 때 발생하는 참조 에러가 나타나는 것이다.
“호이스팅이 발생하지 않는 것처럼”이라고 말한 이유는 사실 호이스팅이 발생하기 때문이다.
let x = 1;
{
console.log(x); // ReferenceError: Cannot access 'x' before initialization
let x = 2;
}만약 호이스팅이 발생하지 않는다면, console.log(x)는 상위 스코프를 탐색하여 1 이라는 값을 반환해야 한다.
그러나 참조 에러가 발생한다. 바로 아래에 따라오는 let x = 2에서 변수 선언은 실행되었지만, 초기화가 실행되지 않은 상태에서 호이스팅이 발생했기 때문이다. 이처럼 스코프의 시작 지점부터 변수 초기화 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대 Temporal Dead Zone, TDZ라고 부른다.
4. 전역 객체
var 키워드로 선언한 전역 변수와 전역 함수는 전역 객체 window의 프로퍼티가 된다. 따라서 전역 객체의 프로퍼티로써 참조할 수 있다.
var x = 1;
console.log(x); // 1, 전역 객체 window를 생략한 일반적인 사용 방식
console.log(window.x); // 1, 전역 객체 window의 프로퍼티 x 참조그러나 let 키워드로 선언한 전역 변수는 전역 객체 window의 프로퍼티가 아니다. 따라서 window.x의 방식으로 접근할 수 없다.
(자세한 내용은 실행 컨텍스트를 살펴보자)
const 특징
상수를 선언하기 위해 사용하는 const 키워드는 위에서 알아본 let 키워드와 대부분 비슷한 특징을 공유한다.
- 블록 레벨 스코프
- 변수 호이스팅이 발생하지 않는 것처럼 동작
- 전역 객체 window의 프로퍼티가 아니다.
하지만 다른 점도 있다.
1. 재할당 금지
var는 동일 스코프에서 중복 선언도 가능하고, 재할당도 가능하다.
let은 동일 스코프에서 중복 선언은 불가능하지만, 재할당은 가능하다.
그러나 const 키워드로 선언한 변수는 선언도, 재할당도 불가능하다.
var x = 1;
var x = 2;
x = 3;
let y = 1;
let y = 2; // SyntaxError: Identifier 'y' has already been declared
y = 3;
const z = 1;
const z = 2; // SyntaxError: Identifier 'z' has already been declared
z = 3; // TypeError: Assignment to constant variable
console.log(x); // 3
console.log(y); // 3
console.log(z); // 1const는 상수를 선언하기 위해 사용한다고 했다. 상수는 말 그대로 변하지 않는 수이다. 따라서 재할당이 금지된다.
2. 선언과 초기화
var, let이 갖지 않는 const만의 특징이다.
const 키워드를 사용한 변수 선언은 선언과 동시에 초기화가 이뤄지지 않으면 에러가 발생한다.
var x;
x = 1;
let y;
y = 1;
const z; // SyntaxError: Missing initializer in const declaration3. 원시 값과 객체
const 키워드로 선언한 변수에 원시 값을 할당하면 변수 값을 변경할 수 있는 방법이 없다. 원시 값은 ‘변경 불가능한 값’이고, const는 재할당이 불가능하기 때문이다.
따라서 바뀌지 않는 고정된 값을 표현할 때는 const를 적극적으로 사용하는 것이 좋다. 이는 상태 유지, 가독성 향상, 유지보수 편의를 돕는다. 상수 이름은 주로 대문자로 선언한다.
한편, const 키워드로 선언된 변수에 원시 값이 아닌 객체를 할당한다면 값을 변경할 수 있다. ‘변경 가능한 값’인 객체는 재할당 없이도 변경할 수 있는 방법이 존재하기 대문이다.
const obj = {
name: 'Lee'
};
obj.name = 'Kim';
console.log(obj); // {name: 'Kim'}const는 “재할당”이 불가능한 것이지, “불변”을 뜻하는 것이 아니라는 점을 잘 기억해두자.
결론
오류 방지의 측면에서 볼 때, 필요한 경우가 아니라면 변수는 const 키워드를 사용해 선언하는 것이 안전할 것이다.
의도치 않은 재할당을 방지하며, 블록 레벨 스코프를 따르고, 함수 호이스팅이 발생하지 않는 것처럼 동작하기 때문이다.
재할당이 필요하여 let 키워드를 사용해야 하는 경우에는 스코프를 최대한 좁게 만드는 것이 오류 발생을 낮출 수 있는 안전한 방법이다.
var는 이제 그만 놓아주자.
참고
모던 자바스크립트 Deep Dive | 위키북스 | 이웅모