모던 자바스크립트 딥다이브, 면접과 함께 공부하기 - 15장 let, const 키워드와 블록 레벨 스코프

💡 아래 내용은 모던 자바스크립트 딥다이브를 공부하며 이해했던 내용을 다루고 있습니다. 혹시 틀렸거나 잘못된 정보가 있다면 알려주세요!

📌 15장 let, const 키워드와 블록 레벨 스코프

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

15.1.1 변수 중복 선언 허용

var 키워드를 사용하면, 같은 스코프 내에서 동일한 이름의 변수를 여러 번 선언할 수 있습니다. 이는 예상치 못한 결과를 초래할 수 있습니다.

var x = 10;
var x = 20;
console.log(x); // 20

15.1.2 함수 레벨 스코프

var는 블록 레벨 스코프(Block-level scope)를 가지지 않고, 함수 레벨 스코프(Function-level scope)를 가집니다. 이는 if, for와 같은 블록 내에서 var로 선언된 변수가 블록 바깥에서도 접근 가능하다는 것을 의미합니다. 이는 코드의 가독성을 떨어뜨리며 버그를 일으키기 쉽습니다.

for(var i = 0; i < 10; i++) {
  // do something
}
console.log(i); // 10

15.1.3 변수 호이스팅

var로 선언된 변수는 스코프의 최상단으로 호이스팅되는데, 이는 변수가 선언되기 전에 사용될 수 있게 합니다. 이는 코드의 가독성을 떨어뜨리고 예상치 못한 결과를 초래할 수 있습니다.

console.log(x); // undefined
var x = 5;
console.log(x); // 5

15.2 let 키워드

15.2.1 변수 중복 선언 금지

let x = 2;
let x = 3; // error

15.2.2 블록 레벨 스코프

let은 블록 레벨 스코프를 가지며, 이는 변수가 선언된 블록, 그리고 그 블록의 하위 블록 내에서만 접근 가능하다는 것을 의미합니다. 이는 if, for와 같은 블록 안에서 선언된 변수가 블록 바깥에서 접근 불가능하게 만듭니다.

for(let i = 0; i < 10; i++) {
  // do something
}
console.log(i); // ReferenceError: i is not defined

15.2.3 변수 호이스팅

let으로 선언된 변수는 호이스팅되지만, 초기화 전까지는 접근할 수 없는 영역인 Temporal Dead Zone에 속합니다. 이는 let으로 선언된 변수를 초기화 전에 사용하려고 하면 에러가 발생한다는 것을 의미합니다.

console.log(x); // ReferenceError: x is not defined
let x = 5;
console.log(x); // 5

15.2.4 전역 객체와 let

let으로 선언된 전역 변수는 전역 객체의 속성이 되지 않습니다. 웹 브라우저 환경에서 전역 객체는 window입니다.

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

15.3 const 키워드

15.3.1 선언과 초기화

const를 사용하여 변수를 선언할 때는 반드시 초기화해야 합니다.

const x; // SyntaxError: Missing initializer in const declaration

15.3.2 재할당 금지

const로 선언된 변수는 재할당할 수 없습니다. 즉, 한 번 할당된 값은 변경할 수 없습니다. 이것은 의도치 않은 값 변경을 방지하고, 코드의 안정성을 높입니다.

const x = 10;
x = 20; // TypeError: Assignment to constant variable.

15.3.3 상수

const 키워드는 상수를 선언하는 데 사용됩니다. 상수는 값이 변경되지 않는 변수를 의미하며, 일반적으로 대문자와 언더스코어를 사용하여 이름을 지정합니다.

const PI = 3.14159;

15.3.4 const 키워드와 객체

그러나 const로 선언된 객체 또는 배열의 속성은 변경할 수 있습니다. 이는 const가 변수 자체를 고정시키지만 변수의 내용까지 고정시키지는 않기 때문입니다.

const obj = {name: "John"};
obj.name = "Jane"; // This is fine, object property can be changed
obj = {name: "Jane"}; // TypeError: Assignment to constant variable, the object itself can't be reassigned

15.4 var vs. let vs. const

var, let+const의 가장 큰 차이는 호이스팅 시 TDZ, 스코프이다.