모던 자바스크립트 Deep Dive 15. var, let, const

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

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

※ 변수 중복 선언 허용

var x = 1;
var x = 10;	// 가능

 

※ 함수 레벨 스코프 -> 전역 변수를 남발할 가능성을 높여 의도치 않게 전역 변수가 증복 선언될 가능성 있음

var i = 100;

for (var i = 0; i < 10; ++i) {
	console.log(i);
}

console.log(i);	// 10

 

※ 변수 호이스팅 -> 변수 선언문 이전에도 참조할 수 있기 때문에 가독성을 떨어뜨리고 오류를 발생시킬 여지를 남김.

console.log(x);	// undefined

x = 100;

console.log(x);	// 100

var x;

---

15.2 let 키워드

var의 단점을 보완하기 위해, ES6에서 let, const가 도입됨.

 

※ 변수 중복 선언 금지

let x = 10;
let x = 987654321;	// Error!

 

※ 블록 레벨 스코프

var x = 100;

{
	var x = 555;
    var y = 333;
}

console.log(x);	// 100
console.log(y);	// ReferenceError

 

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

console.log(x);	// ReferenceError

let x;
console.log(x);	// undefined

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

 

※ let 키워드로 선언한 변수는 전역 객체의 프로퍼티가 아니기에 window.~ 와 같이 접근할 수 없음.

---

15.3 const 키워드

주로 상수(constant)를 선언하기 위해 사용

 

※ const 키워드로 선언한 변수는 꼭 선언과 초기화를 동시에 해야 함. 왜냐하면 문법 에러도 발생하고, const로 선언한 변수는 재할당이 불가능하기 때문.

const x;	// SyntaxError

 

※ 객체를 할당할 경우 값을 변경할 수 있음. 객체의 경우, 주소값을 저장하기에 그 주소에 있는 값들은 변경할 수 있기 때문.

const x = 100;
x = 200;	// TypeError

---

15.4 var vs. let vs. const

• var는 사용하지 않는다.
• 재할당이 필요하면 let, 일기 전용 등에는 const