let, const, var

let, const, var

 

• JavaScript에서 변수 선언 방식에는 let, const, var가 있다.

 

 

 

변수 선언 방식

 

• var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다.

 

	var name = 'bathingape'
	console.log(name) // bathingape
	var name = 'javascript'
	console.log(name) // javascript

view raw 변수선언방식.js hosted with ❤ by GitHub

• 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다.
• 이는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있으나, 코드량이 많아진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐만아니라 값이 바뀔 우려가 있다.
• 그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let과 const이다.
• 위의 코드에서 변수 선언 방식을 바꿔주면 아래와 같다.

 

	let name = 'bathingape'
	console.log(name) // bathingape
	let name = 'javascript'
	console.log(name)
	// Uncaught SyntaxError: Identifier 'name' has already been declared

view raw 변수선언방식.js hosted with ❤ by GitHub

┌ name이 이미 선언 되었다는 에러 메시지를 볼 수 있다. (const도 마찬가지이다.)

├ 변수 재선언이 되지 않는다.

├ 그렇다면 let과 const의 차이점은 무엇일까 ?

├ 이 둘의 차이점은 immutable 여부이다.

├ let은 변수에 재할당이 가능하지만

└ const는 변수 재선언, 변수 재할당 모두 불가능하다.

 

	let name = 'bathingape'
	console.log(name) // bathingape
	let name = 'javascript'
	console.log(name)
	// Uncaught SyntaxError: Identifier 'name' has already been declared
	name = 'react'
	console.log(name) //react

view raw 변수선언방식.js hosted with ❤ by GitHub

 

	const name = 'bathingape'
	console.log(name) // bathingape
	const name = 'javascript'
	console.log(name)
	// Uncaught SyntaxError: Identifier 'name' has already been declared
	name = 'react'
	console.log(name)
	//Uncaught TypeError: Assignment to constant variable.

view raw 변수선언방식.js hosted with ❤ by GitHub

 

 

 

호이스팅

 

• 호이스팅이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.
• 자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, class)를 호이스팅한다.
• 하지만, var로 선언된 변수와는 달리 let으로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다.

 

	console.log(foo); // undefined
	var foo;
	console.log(bar); // Error: Uncaught ReferenceError: bar is not defined
	let bar;

view raw hoisting.js hosted with ❤ by GitHub

┌ 이는 let으로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대에 빠지기 때문이다.

├ 참고로, 변수는 선언 단계 > 초기화 단계 > 할당 단계 에 걸쳐 생성되는데,

└ var 으로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다.

 

	// 스코프의 선두에서 선언 단계와 초기화 단계가 실행된다.
	// 따라서 변수 선언문 이전에 변수를 참조할 수 있다.
	console.log(foo); // undefined
	var foo;
	console.log(foo); // undefined
	foo = 1; // 할당문에서 할당 단계가 실행된다.
	console.log(foo); // 1

view raw hoisting.js hosted with ❤ by GitHub

 

let으로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.

 

	// 스코프의 선두에서 선언 단계가 실행된다.
	// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
	// 따라서 변수 선언문 이전에 변수를 참조할 수 없다.
	console.log(foo); // ReferenceError: foo is not defined
	let foo; // 변수 선언문에서 초기화 단계가 실행된다.
	console.log(foo); // undefined
	foo = 1; // 할당문에서 할당 단계가 실행된다.
	console.log(foo); // 1

view raw hoisting.js hosted with ❤ by GitHub