TIL-2024.02.19 - JS - 변수 - 2. 호이스팅 관점에서 본 var, let, const

 

------- var

 

특징: 

• 변수의 중복 선언 허용 : var 키워드로 선언한 변수는 중복선언 가능
• 함수레벨 스코프: var 키워드로 선언한 변수는 함수의 코드 블록만을 지역 스코프로 인정함으로, 함수 외부에서 선언된 var 변수는 코드 블록 내에서 선언해도 모두 전역 변수로 작용

var x = 1;
if(true){
	// x는 전역변수. 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언 됨
    	// 이때, 의도치 않게 전역 변수값이 1 > 10으로 변경되는 side-effect 발생
	var x = 10;
}
console.log(x) // 10

 

• var 변수의 호이스팅: 변수 호이스팅에 의해 var 변수는 선언문 이전에 참조가능하지만, undefined 노출

// 이 시점에 변수 호이스팅에 의해 이미 foo 변수가 이미 선언
// 변수 foo는 undefined 로 초기화 (2단계)
console.log(foo) // undefined

// 할당 (3단계) 
foo = 123

console.log(foo) // 123

// 선언: var 변수 선언은 런타임 이전에 실행 (1단계) 
var foo;

 

 

------- let

특징: 

• 변수 중복 선언 금지: 변수 중복 선언시 Syntax-Error 발생 

let foo = 3; 
let foo = 4; // SyntaxError

 

• 불록 레벨 스코프: let 변수는 모든 코드 블록을 지역 스코프로 인정하는 블록 스코프

let foo = 1 // 전역 변수
{
	let foo = 2
    	let bar = 3
}

console.log(foo) // 1
console.log(bar) // Reference Error

 

> let 키워드로 선언된 변수는 블록 레벨 스코프를 따라서, 전역에서 선언된 foo 변수와 코드 블록 내애서 선언된 foo 변수는 다른 함수

 

 

• TDZ, 일시적 사각지대

> let 키워드로 선언한 변수는 선언과 초기화가 분리되어 진행. 

> 만약, 초기화 단계가 실행되기 이전에 변수에 접근할 시 참조 에러 발생.

> let 변수는 스코프 시작 지점부터 초기화 단계 (변수 선언문)까지 변수를 참조할 수 없다.  > TDZ(Temporary Dead Zone)

> 선언 -> TDZ -> 초기화 -> 할당 단계로 나뉨 (선언과 초기화가 분리)

//런타임 이전에 선언단계 실행. 변수 초기화 X
//초기화 이전의 TDZ에서 변수 참조 불가
console.log(foo); // Reference Error

let foo; // 변수 선언 단계에서 초기화 실행 
console.log(foo) // undefined

foo = 1; // 할당 실행
console.log(foo) // 1

 

 

• let 변수의 호이스팅: 변수 호이스팅이 발생안하는 것처럼 보이지만, 호이스팅 됨.

// 일반 경우
let b = 3;
{
 console.log(b) // 3
}

// 호이스팅 되는지 체크
let foo = 1 // 전역
{
 console.log(foo) // Refernce Error: cannot access..
 let foo = 2; // 지역
}

 

 

> 위의 예제에서, 호이스팅 발생 안될 시, 위 예제는 전역 변수 foo 값을 출력. 

> 호이스팅 되기 떄문에, 참조 에러 발생

 

 

------- const

• 선언 & 초기화 동시 : const 변수는 반드시 선언과 동시에 초기화
• 블록 레벨 스코프 & 호이스팅 가능, 
  > let 과 비슷하지만, 선언 과 초기화가 동시에 발생함으로, 초기화 이전에 접근시 Reference 에러 발생
• 재할당 금지 & 재선언 금지 : 

> const 변수는 원시 값(Primitive Value)로 할당된 경우 immutable value를 유지함 

> 원시 값이 아닌, 객체, 배열등에서 값 변경 가능.

> 재할당/재선언을 금지할 뿐, "불변"은 아님

 

 

 

 

------- 요약