[ JavaScript ] var vs. let

JavaScript는 ES6 버전 전까지 var 키워드만을 사용해서 변수를 선언했다.

var 키워드에는 여러가지 예상하지 못한 문제들이 발생했는데, 그 문제들은 다음과 같다.

 

var name = 'Jenet'
console.log(name)

var name = 'Mike'
console.log(name)

변수 이름이 동일하게 여러번 선언할 수 있다는 것이다.

재선언 / 재할당 가능하다는 문제점이 있다.

 

변수 이름을 여러개 생각하지 않아도 재활용할 수 있어서 자유롭고 좋다고 생각할 수도 있지만,

코드가 길어짐에 따라서 내가 어떤 변수명을 사용했는지 기억하지 못한다면 큰 문제를 초래할 수 있다.

 

 

그렇다면 let 키워드는 어떠할까?

let name = 'Jenet'
console.log(name)

let name = 'Mike'
console.log(name)

Uncaught SyntaxError: Identifier 'name' has already been declared

 

이미 선언된 변수명이라고 에러가 발생한다.

이처럼 let 키워드는 재선언이 불가능하다. (재할당은 가능하다.)

 

 

호이스팅 (Hoisting)이란 무엇일까?

호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 말한다.

 

변수 생성 과정 : 선언 ▶ 초기화 ▶ 할당 

 

var로 선언한 변수의 경우, 호이스팅 시 undefined로 변수를 초기화한다. 즉, 변수의 선언과 초기화를 동시에 해버린다는것!

let과 const로 선언한 변수는 호이스팅 시 변수를 초기화하지 않는다.

 

var로 선언한 변수는 변수가 선언되기 전부터 마치 선언된 것 처럼 동작하지만, let은 그렇지 못하다는 의미이다.

console.log(age)
var age = 22

console.log(name)
let name = 'Jenet'

undefined

Uncaught ReferenceError: Cannot access 'name' before initialization

 

 

< 정리 > 

- var는 호이스팅 시 선언과 할당이 모두 이뤄짐. 따라서 메모리의 공간이 할당되기까지 한다.- let은 호이스팅 시 선언만 이뤄짐. 할당은 코드 라인에 도착했을 때 진행됨. 그 전까지는 TDZ (Temporal Dead Zone : 일시적 사각지대). 따라서 메모리의 공간이 할당되지 않음.

 

 

퀴즈 > 다음 코드의 출력 결과는?

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

답 > 

0

1

2

3

4

5

 

퀴즈 > 다음 코드의 출력 결과는?

for (let i=0;i<5;i++) {
  console.log(i)
}
console.log(i)

답 >

0

1

2

3

4

에러발생