[모던자바스크립트] 15. let, const 키워드와 블록 레벨 스코프

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

1. 중복 선언이 가능함
2. 함수 레벨 스코프
3. 변수 호이스팅

✅ 2. let 키워드

1. 변수 중복 선언 금지

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

     let foo = 123; // 123
     let foo = 456; // Syntax error

2. 블록 레벨 스코프

   • 모든 코드 블록 (if문, for문, while문, try/catch문 등)을 지역 스코프로 인정

     let foo = 1; // 전역 변수
     
     {
     	let foo = 2; // 지역 변수
       let bar = 3; // 지역 변수
     }
     
     console.log(foo); // 1
     console.log(bar); // Reference error

3. 변수 호이스팅

   • let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작
   • let 키워드로 선언한 변수는 '선언 단계'와 '초기화 단계'가 분리되어 진행
     • 초기화 단계는 변수 선언문에 도달했을 때 실행

   console.log(foo); // Reference error
   
   let foo; // 초기화 단계
   console.log(foo); // undefined
   
   foo = 1; // 할당 단계
   console.log(foo); // 1

   • 자바스크립트에서는 ES6에서 도입된 let, const를 포함해서 모든 선언(var, let, const, function 등)을 호이스팅하지만, ES6에서 도입된 let, const, class를 사용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작

4. 전역 객체와 let

   • let 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아님
   • window.foo와 같이 접근할 수 없음

✅ 3. const 키워드

• 상수를 선언하기 위해 사용

✔️ 선언과 초기화

• const키워드로 선언한 변수는 반드시 선언과 동시에 초기화
• 블록 레벨 스코프를 가지며, 변수 호이스팅이 발생하지 않는 것처럼 동작

  const foo; // Syntax error

✔️ 재할당 금지

• const키워드로 선언한 변수는 재할당이 금지됨 (TypeError 발생)

✔️ 상수

• 상수는 재할당이 금지된 변수
• const 키워드로 선언한 변수에 원시 값을 할당한 경우 변수 값을 변경할 수 없음

✔️ const 키워드와 객체

• const키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있음
• 새로운 값을 할당하는 것은 불가능하지만 프로퍼티의 동적 생성, 삭제, 프로퍼티의 값 변경을 통해 객체 변경은 가능!

const person = {
	name : 'Lee';
};

person.name = 'Kim';

console.log(person); // {name: 'Kim'}