모던 자바스크립트 Deep Dive 15장

qjatjs123123 2025. 2. 21. 22:01

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

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

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

var x = 1;
var x = 100;
console.log(x); // 100

동일한 이름의 변수가 이미 선언되어 있다는 것을 모르고 변수를 중복 선언하면 의도치 않게 먼저 선언된 변수 값이 변경된다.

함수 레벨 스코프

var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다.

따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 블록(if, for ... 등) 내에서 선언해도 모두 전역 변수이다.

var 변수는 변수 호이스팅이 발생하여 변수 선언문이 스코프 선두로 끌어 올려진다. 이 때 할당하기 전 변수를 참조하면 undefined를 반환한다.

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

let 키워드

ES6에서 새로운 변수 선언 키워드인 let, const가 도입되었다.

변수 중복 선언 금지

var 키워드는 이름이 동일한 변수를 중복 선언하면 아무런 에러가 발생하지 않는다.

반면 let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러가 발생한다.

블록 레벨 스코프

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

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

함수 내에서 블록 코드는 함수 레벨 스코프에 중첩된다.

따라서 전역 스코프 - 함수 레벨 스코프 - 블록 레벨 스코프 체인이 생성된다.

변수 호이스팅

var 키워드로 선언한 변수와 달리 let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

var 키워드

var 키워드는 런타임 이전, 선언 단계와 초기화 단계를 한번에 진행한다.
선언 단계는 실행 컨텍스트의 렉시컬 환경에 변수 식별자를 등록하는 것을 의미한다.
초기화 단계는 undefined로 변수를 초기화한다.

let 키워드

선언 단계와 초기화 단계가 분리되어 진행한다.
호이스팅이 발생되어 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 된다.
초기화 이전 접근하면 참조 에러가 발생하는데 이 구간을 일시적 사각지대라 한다.

const 키워드

const 키워드의 특징은 let 키워드와 대부분 동일하다.

하지만 차이점이 존재한다.

const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.
var, let은 재할당이 자유롭지만 const 키워드는 재할당이 금지 된다.
const는 원시값을 할당할 경우 변경할 수 없는 값이 된다.
const는 객체값을 할당할 경우 값을 변경할 수 있다. 하지만 재할당은 안된다.