[JS] 호이스팅 var, let의 차이

let 과 var 의 차이점

우선 2015년 ES6 자바스크립트가 업그레이드를 하는데 그때 나온게 let 이다.

자바스크렙트에 특이한 특징이 있다.

코드가 실행이 되기전에 자바스크립트 엔진이 1줄식 선언된 변수와 함수를 가져가서 메모리에 기억을 해둔다.

갑작이 누군가 a 라는 변수를 불렀을때 (안에 있는 변수들을 범위에 최상단으로 끌어 올리는것)가 호이스팅이라고 한다.

차이점이라면:

• 스코프 (Scope)
• 중복 선언 (Variable redeclaration)
• 호이스팅 (Hoisting)

 

var의 문제점1

ex

console.log(a)
var a = 1
console.log(a)

a가 선언이 되기전에 a를 쓴다? 자바, C, C++등 다른 언어 배운 사람이라면 에러가 생길꺼라고 예상을 한다. 하지만 자바 스크립트는 다르다.

답은: undefined  1  

 

가능한 이유가 호이스팅 때문

그 이유는 자바스크립트 엔진이 선언된 a 를 저장하고 다시 첫 줄 부터 시작하기 때문이다. 첫줄은 아직 1로 할당 하기전이기 때문에 undefined 이라는 값을 준다.

호이스팅시 변수의 선언과 초기화 (undefined으로)를 같이 시키기 때문

 

var의 문제점2 : 전역변수와 지역변수의 개념이 확실치 않다.

(전역 변수: 블락 밖에서 선언을 한 어디서든 쓰일 수 있는 변수)

 

ex

var a = 2

function foo () {
    var b = 1  
    }
    
    console.log(b)

위 코드는 지역을 벗어났긴 때문에 에러가 생긴다.

 

하지만

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

지역을 벗어났는데도

답:1  2  3  4  5  

가 나온다. 이유는 함수만 지역변수로 호이스팅이 되기때문이다.

 

var a = 1
console.log(a)
var a = 2
console.log(a)

주민등록번호(?) 가 같은 사람이 있는게 말이 안되지만(변수의 이름은 절대로 중복이 되면 안되는데). 자바스크립트는 이것도 허용한다.

답: 1  2

 

그래서 나온게!!

새로운 변수 선언 let 이다.

위 코드에 var 대신 let으로 고쳐쓰면 에러가 뜬다.

단 let도 호이스팅이 된다. 그래서 나온게 일시적 사각지대 Temporal Death zone(TDZ) 

TDZ: "a가 호이스팅으로 기억이 된건 알겠어. 하지만! a 선언문이 나오기 전까지는 너는 a에 접근할 수 없어"