javascript 변수 var, let, const의 작동 원리

https://jangjiyu.tistory.com/24

[javascript | JS] var, let, const 변수의 생성과정, 호이스팅, TDZ, 스코프, 클로저와 은닉화(캡슐화)

 

부트캠프 시절 구글링하며 짜집기하며 변수와 스코프, 호이스팅 등의 개념을 익히긴 했지만 각각의 개념들이 머릿속에 흩어져 있어서 

claude와 대화를 하며 다시 한번 정리해 보았다

 

 

 

1. var, let, const의 변수 선언 과정과 호이스팅과 TDZ의 영향

 

var

 

• 선언 과정

1. 생성 단계: 변수 객체(VO)에 변수 등록
2. 초기화 단계: undefined로 초기화
3. 할당 단계: 실제 값 할당

• 호이스팅: 선언과 초기화가 코드 실행 전에 이루어져 스코프 최상단으로 끌어올려짐
• TDZ 영향: 없음
• 예시

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

 

 

let과 const

 

• 선언 과정

1. 생성 단계: 렉시컬 환경에 변수 등록
2. 초기화 단계: TDZ 시작, 초기화되지 않은 상태
3. 할당 단계: 실제 값 할당 (const는 생성, 초기화, 할당이 함께 이루어짐)

• 호이스팅: 선언만 호이스팅되고 초기화는 원래 위치에서 이루어짐
• TDZ 영향: 선언부터 초기화까지 TDZ에 존재. 이 구간에서 접근 시 ReferenceError 발생
• 예시

console.log(y); // ReferenceError
let y = 10;

const z = 15;
z = 20; // TypeError (const는 재할당 불가)

 

 

 

 

 

 

2. 블록 스코프의 엄격한 스코프 규칙 및 중복된 변수명 선언 불가능하게 하는 원리

 

블록 스코프 규칙

 

• 각 블록({})은 고유한 렉시컬 환경을 생성
• 변수의 생명주기가 해당 블록으로 제한됨
• 상위 스코프의 변수를 가리는(shadowing) 것은 가능하지만, 같은 스코프 내 중복 선언은 불가

 

중복 선언 방지 원리

• 변수 선언 시 현재 블록의 렉시컬 환경을 확인
• 이미 존재하는 변수명이면 SyntaxError 발생
• 환경 레코드가 각 변수의 바인딩 정보를 관리
• 이는 JavaScript 엔진의 내부 동작 메커니즘에 의해 작동됨

 

예시

let a = 1;
{
  let a = 2; // 가능 (다른 스코프)
  let b = 3;
  let b = 4; // SyntaxError (같은 스코프에서 중복 선언)
}
console.log(a); // 1
console.log(b); // ReferenceError (b는 블록 밖에서 접근 불가)​

 

 

 

 

 

 

2. var와 let, const의 렉시컬 환경, 환경 레코드, 바인딩 생성 차이 및 각 변수를 처리하는 방식

 

var

 

• 렉시컬 환경: 함수 스코프 또는 전역 스코프의 렉시컬 환경에 기록
• 환경 레코드: 변수 객체(VO) 또는 전역 객체에 등록
• 바인딩 생성

1. 선언 시 바인딩 생성 및 Undefined로 초기화
2. 중복 선언 시 기존 바인딩 재사용 (에러 발생 안 함)

• 처리 방식

• 호이스팅으로 인해 선언 전 접근 가능 (undefined 반환)
• 함수 내부 선언 시 함수 스코프, 그 외에는 전역 스코프
• 전역에서 선언 시 전역 객체의 프로퍼티가 됨

 

let과 const

 

• 렉시컬 환경: 블록 스코프의 렉시컬 환경에 기록
• 환경 레코드: 선언적 환경 레코드(Declarative Environment Record)에 등록
• 바인딩 생성

1. 선언 시 바인딩 생성 (초기화는 되지 않음)
2. 초기화 전인 TDZ 상태 동안 접근 불가
3. let은 할당 시, const는 선언과 동시에 초기화
4. 중복 선언 시 SyntaxError 발생

• 처리 방식 

• 호이스팅되지만 TDZ로 인해 선언 전 접근 불가
• 블록 스코프 내에서만 유효
• 전역에서 선언해도 전역 객체의 프로퍼티가 되지 않음

 

예시

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

console.log(y); // ReferenceError
let y = 2;

const z = 3;
z = 4; // TypeError

{
  let x = 5; // 새로운 바인딩 생성 (블록 스코프)
  var y = 6; // 전역 y와 동일한 바인딩 (함수 스코프)
}