var vs. let & const
var과 달리 let은 다음과 같은 특징을 가진다.
(1) 변수 재선언이 불가능하다
var name="Max";
var name="Manuel";
//에러 없음
let age = 22;
let age = 11;
//에러가 남let의 경우, 변수에 새로운 값을 할당하려면 아래와 같이 코드를 작성해야 한다.
let age = 22;
age = 11;이는 개발자가 변수에 새로운 값을 다시 할당한다는 분명한 의도를 가지고 코드를 작성한 것이라는 점에서 더 깔끔한 코드라고 볼 수 있다.
(2) var은 global, functional scope 내에서, let은 block scope 내에서 작용한다.
: 예컨대 if문 안에서 let 변수를 선언해주면 if문 밖에서는 해당 변수를 사용할 수 없다. 그러나 var은 function 안에서 변수를 선언해준 것만 아니라면 if문 안에서 선언한 변수도 global 변수처럼 사용이 가능하다.
Hoisting
(1) 변수의 호이스팅
먼저 자바스크립트의 변수 생성은 다음의 과정을 거친다.
선언(Declaration): 스코프와 변수 객체가 생성되고, 스코프가 변수 객체를 참조한다. 초기화 전까지는 TDZ 상태이다.
초기화(Initialization): 변수 객체 값을 위한 공간을 메모리에 할당한다. 이 때 할당되는 값은 undefined다. myValue = undefined
할당(Assignment): 변수 객체에 값을 할당한다. myValue = 150
var, const, let은 모두 호이스팅이 이루어지는데, var은 선언과 동시에 초기화단계가 이루어져 해당 var에 무언가를 할당하는 코드 이전에 var을 호출하면 undefined가 뜬다. 한편 const, let은 선언 단계까지만 이루어지기 떄문에 Reference error가 뜬다.
(2) 함수의 호이스팅
함수의 선언식은 호이스팅되어 함수 선언 전에 함수를 실행하여도 온전히 실행이 된다.
hoisted(); // Output: "This function has been hoisted."
function hoisted() {
console.log('This function has been hoisted.');
};한편 함수의 표현식은 호이스팅 되지 않는다.
expression(); // Ouput: TypeError: expression is not a function
var expression = function hoisting() {
console.log('Will this work?');
};