[모던 자바스크립트 Deep Dive] 15장 let, const 키워드와 블록 레벨 스코프

var 키워드로 선언한 변수의 문제점

ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드였다. var 키워드는 다음과 같은 특징이 있는데, 이는 다른 언어와 차별되는 특징으로 주의를 기울이지 않으면 심각한 문제를 일으킬 수 있다.

 

변수 중복 선언 허용

var x = 1;
var y = 1;
var x = 100;  // 초기화문이 있는 변수 선언문은 var 키워드가 없는 것처럼 동작한다.
var y;        // 초기화문이 없는 변수 선언문은 무시된다.
console.log(x); // 100
console.log(y); // 1

var 키워드로 선언한 변수는 중복 선언이 가능하다.

 

var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작하여 재할당이 이루어진다. 반면 초기화문이 없는 변수 선언문은 무시된다.

 

만약 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 변수를 중복 선언하면서 값까지 할당했다면, 의도치 않게 먼저 선언된 변수의 값이 변경되는 부작용이 발생할 수 있다.

 

함수 레벨 스코프

var x = 1;
if (true) {
	var x = 10;
}
console.log(x); // 10

var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다.

 

var i = 10;
for (var i = 0; i < 5; i++) {
	console.log(i); // 0 1 2 3 4
}
console.log(i); // 5

함수 레벨 스코프는 전역 변수를 남발할 가능성을 높인다. 이로 인해 의도치 않게 전역 변수가 중복 선언되는 경우가 발생할 수 있다.

 

변수 호이스팅

console.log(foo); // undefined
foo = 123;
console.log(foo); // 123
var foo;

var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어올려진 것처럼 동작한다.

 

변수 선언문 이전에 변수를 참조할 수 있다. 변수 호이스팅이 발생하기 때문에 에러는 발생하지 않지만, 변수 선언문 이전에는 변수를 참조해도 undefined를 반환한다.

 

이는 변수 선언문 이전에 변수를 참조하는 것은 바람직하지 않다. 프로그램의 흐름상 맞지 않을 뿐더러 가독성을 떨어뜨리고 오류를 발생시킬 여지를 남긴다.

 

 

let 키워드

var 키워드의 단점을 보완하기 위해 ES6에서는 새로운 변수 선언 키워드인 let과 const를 도입했다. let 키워드의 특징은 다음과 같다.

 

변수 중복 선언 금지

var foo = 123;
var foo = 456; // 중복 선언 허용
let bar = 123;
let bar = 456; // SyntaxError: Identifier 'bar' has already been declared

let 키워드로 이름이 같은 변수를 중복 선언하면 SyntaxError가 발생한다. 반면 var 키워드로 선언된 변수는 중복 선언이 허용된다.

 

이처럼 let 키워드는 동일한 스코프 내에서 중복 선언을 허용하지 않는다. 만약 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 중복 선언하면서 값까지 할당했다면, 의도치 않게 먼저 선언된 변수의 값이 변경되는 부작용이 발생할 수 있다. let 키워드는 이러한 위험성을 제거해준다.

 

블록 레벨 스코프

let foo = 1; // 전역 변수
{
	let foo = 2; // 지역 변수(전역 변수 foo와는 다른 변수)
	let bar = 3; // 지역 변수
}
console.log(foo); // 1
console.log(bar); // ReferenceError: bar is not defined

var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정하는 함수 레벨 스코프를 따른다. 반면 let 키워드로 선언한 변수는 모든 코드 블록(함수, if문, for문, while문, try/catch문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

 

위 예제에서 전역에서 선언된 foo와 코드 블록 내에서 선언된 foo는 다른 별개의 변수다. 또한 코드 블록 내에서 선언된 bar는 블록 레벨 스코프를 갖는 지역 변수이므로 전역에서는 참조할 수 없다.

 

변수 호이스팅

console.log(foo); // ReferenceError: foo is not defined
let foo;

var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어올려진 것처럼 동작한다. 하지만 let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

 

let 키워드로 선언한 변수는 "선언 단계"와 "초기화 단계"가 분리되어 진행된다. 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만, 초기화 단계는 변수 선언문에 도달했을 때 실행된다.

 

// 선언 단계(호이스팅 발생)
// 초기화 단계 실행 전까지는 변수 참조 불가 (TDZ)
console.log(foo); // ReferenceError
let foo; // 초기화 단계
console.log(foo); // undefined
foo = 1; // 할당 단계
console.log(foo); // 1

즉, 초기화 단계가 실행되기 이전에는 변수를 참조할 수 없다. 변수 선언문 이전에 변수를 참조할 수 없는 구간을 일시적 사각지대(Temporal Dead Zone, TDZ)라고 한다.

 

여기서 주의할 점은 let 키워드로 선언한 변수도 여전히 호이스팅이 발생한다는 것이다. 단지 let은 호이스팅이 발생하지 않는 것처럼 동작할 뿐이다.

 

let foo = 1; // 전역 변수
{
	console.log(foo); // ReferenceError
	let foo = 2; // 지역 변수
}

 

만약 위 예제에서 let 키워드로 선언한 변수에 호이스팅이 발생하지 않는다면, 전역 변수 foo의 값 1이 출력되어야 한다. 하지만 let으로 선언한 변수도 호이스팅이 발생하기 때문에, 지역 변수 foo의 선언 단계가 먼저 실행되어 참조 에러를 발생시키는 것이다.

 

이처럼 자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, class 등)을 호이스팅한다.

 

전역 객체와 let

// 전역 변수
var x = 1;
// 암묵적 전역
y = 2;
// 전역 함수
function foo() {}
// var로 선언한 전역 변수는 전역 객체의 프로퍼티
console.log(window.x); // 1
// 암묵적 전역도 전역 객체의 프로퍼티
console.log(window.y); // 2
// 전역 함수도 전역 객체의 프로퍼티
console.log(window.foo); // f foo() {}
// 전역 객체 프로퍼티는 전역 변수처럼 사용 가능
console.log(x); // 1
console.log(y); // 2
console.log(foo); // f foo() {}

var 키워드로 선언한 전역 변수와 전역 함수, 그리고 선언하지 않은 변수에 값을 할당한 암묵적 전역은 전역 객체(browser 환경에서는 window)의 프로퍼티가 된다. 전역 객체의 프로퍼티를 참조할 때는 전역 객체를 생략할 수 있다.

 

하지만 let 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다. 즉, window.foo와 같은 방식으로 접근할 수 없다.

 

let x = 1;
console.log(window.x); // undefined
console.log(x); // 1

let 전역 변수는 보이지 않는 개념적인 블록 내에 존재하게 된다. 이 내용은 23장 "실행 컨텍스트"에서 자세히 설명된다.

 

 

const 키워드

const 키워드는 주로 상수를 선언하기 위해 사용되지만, 반드시 상수에만 사용되는 것은 아니다. const 키워드로 선언한 변수는 let 키워드로 선언한 변수와 대부분 동일한 특징을 가지고 있다.

 

선언과 초기화

const foo = 1;
const bar; // SyntaxError: Missing initializer in const declaration

const 키워드로 변수를 선언할 때는 반드시 선언과 동시에 초기화를 해주어야 한다. 그렇지 않으면 문법 에러(SyntaxError)가 발생한다.

 

const 키워드로 선언한 변수 역시 let과 마찬가지로 블록 레벨 스코프를 가지며, 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

 

{
	console.log(foo); // ReferenceError: Cannot access 'foo' before initialization
	const foo = 1;
	console.log(foo); // 1
}
console.log(foo); // ReferenceError: foo is not defined

 

따라서 const로 선언된 변수도 선언문 이전에는 참조할 수 없으며, 블록 내부에서 선언된 변수는 블록 외부에서 접근이 불가능하다.

 

재할당 금지

const foo = 1;
foo = 2; // TypeError: Assignment to constant variable.

const 키워드로 선언된 변수는 재할당이 금지된다. 이는 var나 let 키워드로 선언한 변수와의 가장 큰 차이점이다. 만약 const로 선언된 변수에 재할당을 시도하면 타입 에러(TypeError)가 발생한다.

 

상수

const TAX_RATE = 0.1;
let preTaxPrice = 100;
let afterTaxPrice = preTaxPrice + (preTaxPrice * TAX_RATE);
console.log(afterTaxPrice); // 110

const 키워드로 선언된 변수에 원시 값을 할당한 경우, 변수의 값은 변경할 수 없다. 원시 값은 불변(immutable)이므로 const 변수의 값을 재할당 없이 변경할 방법이 없기 때문이다. 이러한 특성 때문에 const는 상수(constant)를 표현할 때 사용되기도 한다.

 

위 예제에서 세율을 나타내는 0.1은 프로그램 전체에서 고정된 값으로 사용된다. 이런 경우 const로 TAX_RATE 상수를 선언하면, 변수의 의미를 명확히 할 수 있고 값도 변경되지 않도록 보장할 수 있다.

 

일반적으로 상수의 이름은 대문자로 작성하며, 여러 단어로 이루어진 경우 밑줄(_)로 단어를 연결하는 스네이크 케이스(snake_case)를 사용한다.

 

상수는 프로그램의 가독성과 유지보수성을 높이는 데 도움이 되므로, 적극적으로 활용하는 것이 좋다. 또한 상수를 사용하면 유지보수 시 상수의 값만 변경하면 되므로 편리하다.

 

const 키워드와 객체

const person = {
	name: "Lee",
};
person.name = "Kim";
console.log(person); // {name: "Kim"}

하지만 주의할 점이 있다. const 키워드는 재할당은 금지하지만, 불변을 의미하지는 않는다. const로 선언된 변수에 객체를 할당한 경우, 객체의 프로퍼티는 수정이 가능하다.

객체가 변경되어도 변수에 할당된 참조 값은 변경되지 않는다. 결국 재할당이 금지될 뿐, 객체의 내용을 변경하는 것은 가능하다.

 

이처럼 const 키워드는 선언과 초기화가 반드시 같이 이루어져야 하고, 재할당은 금지되지만 할당된 객체 자체의 변경은 허용된다. 또한 블록 레벨 스코프를 가지며, 호이스팅은 발생하지만 var와는 달리 에러가 발생하는 것처럼 동작한다.

 

const는 기본적으로 선언된 변수의 재할당을 방지함으로써 의도하지 않은 변경을 예방하고 코드의 안정성을 높이는 데 도움이 된다. 따라서 재할당이 필요한 경우에 한해 let을 사용하고, 변경이 발생하지 않는 값은 const를 사용하는 것이 좋다.

 

var vs. let vs. const

ES6에서는 var 키워드의 단점을 보완하기 위해 let과 const 키워드를 도입했다. 변수 선언 시에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let을 사용하는 것이 좋다.

 

var, let, const 키워드는 다음과 같은 특징을 고려하여 사용하는 것이 좋다.

1. ES6 사용 시 var 키워드 사용 지양
   1. ES6에서는 var 키워드의 사용은 피하는 것이 좋다.
   2. var는 함수 레벨 스코프, 변수 호이스팅, 중복 선언 허용 등 여러 문제점이 있기 때문이다.
   3. 대신 let과 const를 사용하자.
2. 재할당이 필요한 경우에 한정해 let 사용
   1. 재할당이 필요한 경우에만 let 키워드를 사용하고, 이때는 변수의 스코프를 최대한 좁게 만드는 것이 좋다.
   2. 변수의 스코프가 넓으면 변수에 접근할 수 있는 범위가 넓어지므로, 의도하지 않은 변수 값의 변경이 발생할 가능성이 높아진다. 또한, 변수의 스코프가 넓으면 같은 이름의 변수를 여러 곳에서 사용할 가능성이 높아지므로, 변수 이름이 중복되어 코드의 가독성과 유지보수성이 떨어질 수 있다.
3. 재할당이 필요 없는 경우 const 사용
   1. 변경이 발생하지 않고 읽기 전용으로 사용하는(재할당이 필요 없는 상수) 원시 값과 객체에는 const 키워드를 사용하는 것이 좋다.
   2. const는 재할당을 금지하기 때문에 var나 let보다 안전하다.
4. 변수 선언 시 일단 const 사용 후 필요 시 let으로 변경
   1. 변수를 선언하는 시점에는 재할당이 필요할 지 모르는 경우가 많고, 객체는 의외로 재할당을 하는 경우가 드물다.
   2. 따라서 변수 선언 시에는 일단 const를 사용하고, 필요한 경우에 한해 let으로 변경하는 게 좋다.

코드를 작성하다 보면 재할당이 필요한 경우가 생기기도 하는데, 이때는 const 키워드를 let 키워드로 변경하면 된다. 하지만 무분별한 재할당은 버그의 원인이 될 수 있으므로 정말 재할당이 필요한지 신중하게 고려해야 한다.

 

정리하자면, const를 기본으로 사용하고, 정말 재할당이 필요한 경우에 한해 let을 사용하는 것이 안전하고 깔끔한 코드를 작성하는 지름길이다. 이를 통해 의도하지 않은 변수 값의 변경을 방지할 수 있고, 코드의 가독성과 유지 보수성도 높일 수 있다.

 

let과 const는 블록 레벨 스코프를 지원하고, 변수 호이스팅이 발생하지 않는 등 var보다 직관적이고 예측 가능한 동작을 보장한다. 따라서 ES6 환경이라면 var 키워드의 사용은 지양하는 것이 바람직하다.

 

 

요약

var 키워드의 문제점

• 중복 선언 허용: 의도치 않은 변수 값 변경의 위험성 존재
• 함수 레벨 스코프: 함수 외부에서 선언해도 전역 변수가 됨
• 변수 호이스팅: 선언문 이전에 참조 가능, 코드의 가독성과 유지보수성 저하

 

let 키워드의 특징

• 중복 선언 금지: 같은 스코프 내에서 중복 선언 시 에러 발생
• 블록 레벨 스코프: 모든 코드 블록을 지역 스코프로 인정
• 변수 호이스팅: 호이스팅은 발생하지만, TDZ(Temporal Dead Zone)이 존재

 

const 키워드의 특징

• 선언과 초기화: 반드시 선언과 동시에 초기화 필요
• 재할당 금지: 한 번 할당한 값은 변경 불가능
• 상수 선언에 사용: 변경되지 않는 값을 상수로 선언하여 코드의 가독성과 유지보수성 향상
• 객체 할당 시: 프로퍼티 변경은 가능하지만, 재할당은 불가능

 

var, let, const의 사용 가이드라인

• ES6에서는 var 키워드 사용을 지양하고, let과 const를 사용
• 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let을 사용
• 변수의 스코프는 최대한 좁게 만들어 의도하지 않은 변수 값 변경 방지
• 선언 시에는 일단 const를 사용하고, 재할당이 필요한 경우 let으로 변경

 

 

예상 문제

var, let, const의 차이점에 대해 설명해주세요.

var는 함수 레벨 스코프를 가지며, 변수 호이스팅이 발생하고 중복 선언이 허용됩니다. let과 const는 블록 레벨 스코프를 가지며, 변수 호이스팅이 발생하지 않습니다. let은 재할당이 가능하지만, const는 재할당이 불가능합니다. 또한 const는 선언과 동시에 초기화해야 합니다.

 

호이스팅이란 무엇인가요?

호이스팅은 변수와 함수의 선언문이 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 자바스크립트의 특징입니다. var로 선언된 변수는 호이스팅 시 undefined로 초기화되지만, let과 const로 선언된 변수는 호이스팅 시 초기화되지 않습니다. 함수 선언문도 호이스팅되어 스코프의 최상단으로 끌어올려집니다.

 

일시적 사각지대(TDZ)란 무엇인가요?

일시적 사각지대는 let이나 const로 선언된 변수가 호이스팅되었지만 아직 초기화되지 않은 상태, 즉 변수 선언문 이전의 구간을 말합니다. 이 구간에서는 변수에 접근할 수 없으며, 접근 시 ReferenceError가 발생합니다. 이는 예기치 않은 동작을 방지하고 코드의 예측 가능성을 높이기 위한 자바스크립트의 설계 의도입니다.

 

전역 객체와 let으로 선언된 전역 변수의 차이점은 무엇인가요?

var로 선언된 전역 변수와 함수, 그리고 선언 없이 할당된 변수는 모두 전역 객체(브라우저 환경에서는 window)의 프로퍼티가 됩니다. 하지만 let으로 선언된 전역 변수는 전역 객체의 프로퍼티가 되지 않습니다. 대신 보이지 않는 개념적인 블록에 존재하게 됩니다.

 

const로 선언된 객체의 프로퍼티 변경이 가능한 이유는 무엇인가요?

const는 재할당을 금지할 뿐, '불변'을 의미하지는 않습니다. const로 선언된 변수에 객체를 할당한 경우, 객체에 대한 참조는 변경될 수 없지만 객체의 내부 프로퍼티는 수정이 가능합니다. 이는 객체가 기본적으로 mutable한 데이터 타입이기 때문입니다. 객체의 불변성을 확보하려면 불변 객체를 만드는 방법을 사용해야 합니다.