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

07 Aug 2024 in Frontend / Js / Javascript

let, const keyword and block level scope

ES6 이전에는 var 키워드로만 변수 선언
문제 많았음
1. 변수 중복 선언 허용, var y; 하면 없는 것 처럼 인식
2. 함수 레벨 스코프임 (if, for문 내에 선언해도 함수 전체에서 접근 가능!!)
3. 호이스팅으로 인한 문제 (선언부만 끌어올려짐)

📌 호이스팅이 발생하지 않는 것처럼 동작함!
var let
선언 시 JS Engine에 존재알림 선언 시 초기화 X
선언 시 undefined로 초기화 할당 선언, 초기화 단계 분리

var	let
선언 시 JS Engine에 존재알림	선언 시 초기화 X
선언 시 `undefined`로 초기화 할당	선언, 초기화 단계 분리

TDZ (Temporal Dead Zone): 일시적 사각지대 발생

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

⚠️ 발생하지 않는 ‘것’ 같아 보이지만, 실제로는 발생하는 것이므로 주의!

let x = 1; // 전역 변수

{
  // x hoisted here;
  console.log(x); // ReferenceError (그래서 1이 아님)
  let x = 2; // 블록 레벨 스코프
}

선언과 동시에 할당 필수
- 마찬가지로 블록 레벨 스코프, 변수 호이스팅 발생 안 하는 것처럼 동작
- 미할당 시 SyntaxError
재할당 금지 (TypeError)
- but not ‘불변’
- -> 프로퍼티 동적 생성 가능 (객체, 배열 등)
- 단, const 의 객체 prop은 재할당 가능 (객체 자체는 변경 불가능)
상수

변수 type	var	let	const
중복선언	O	X (Syntax Error)	X (Syntax Error)
스코프	function-level	block-level	block-level
호이스팅	O ( 선언 전 접근 가능 -> undefined )	▲ ( 선언 전 접근 시 TDZ, reference error )	▲ ( let과 마찬가지 )
선언 시	선언 + 초기화 동일 (undefined) / 할당	선언 (hoisted) / 초기화 (initialized)/ 할당	선언 / 초기화 + 할당
재할당 허용	O	O	X
선언 생명주기

let, const 키워드는 호이스팅이 발생하지 않는 것처럼 동작하지만, 실제로는 발생하는 것이므로 주의!
```
let foo = 1;
{
  console.log(foo); // ReferenceError
  let foo = 2;
}
```
- hoisting이 발생하지 않을 시: ReferenceError대신 1을 출력해야 한다
- var 처럼 hositing 동작 : undefined를 출력해야 한다
const는 재할당 금지 BUT NOT 불변
- 재할당 금지 뜻: const 자체에 새로운 객체 할당은 안됨 (같은 reference 를 참조해야함)
- 불변은 아니라는 뜻: object props는 변경 가능 (동적 생성, 삭제, 수정 등)

Templates (for web app):