[Javascript] let과 var의 차이점, 호이스팅이란?

1. 개요

Javascript에서 변수 선언 방식에는 const, var, let이 있다.

const는 값을 재할당 하지 않는 변수를 선언하기 위해 사용하는데, 특히 let과 var의 차이는 무엇일까?

 

이 둘의 개념을 알기 전에 호이스팅이라는 개념을 알아야 한다.

 

2. 호이스팅이란?

호이스팅이란 변수가 사용되기 전에 선언된 함수와 변수들을 메모리가 미리 기억할 수 있게 범위의 최 상단으로 끌어올리는 것을 의미한다.

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

// undefined
// 1

a변수가 선언되기 전의 라인에서 a를 사용할때에, 에러가 나오는 대신 undefined를 출력한다. 이는 아직 a가 할당되기 전 이라는 의미를 갖는다. 이는 바로 호이스팅때문인데, 자바스크립트 엔진이 선언된 a변수를 최 상단으로 끌어 올려 먼저 선언하고, undefined로 할당해 놓는다.

 

 

다음으로, 전역변수와 지역변수에 관해서도 알아보자.

var a = 2

function foo() {
	var b = 1
}

console.log(b)

// ReferenceError: b is not defined

위의 코드는 에러가 난다. 왜냐하면 foo() 함수 내에 사용된 b라는 지역변수를 해당 함수 밖에서 사용하려 했기 때문이다.

 

 

하지만 아래의 코드는 어떨까?

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

// 1
// 2
// 3
// 4
// 5 

for문 안에서 사용된 i라는 지역변수를 사용하려 하였기에 에러를 내뱉는게 상식적이나, 위의 코드는 문제없이 작동된다.

이처럼 var선언문은 함수만 지역변수로 호이스팅이 되고, 나머지는 모두 전역변수로 올려버린다.

 

 

아래의 코드는 어떨까? 다른 언어를 경험했던 사람이라면 알겠지만, 아래는 말이 될수 없다. 같은 이름의 변수가 두개 선언이 되니, 에러를 뱉는게 당연하나,

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

// 1
// 2

자바스크립트는 위의 상황 마저도 허용해 버린다.

 

 

3. var을 보완하기 위해 등장한 let

이쯤되니, var선언문의 문제점이 드러나게 되고, var의 문제점을 보완하고자 Javascript ES6 버전 이후 let과 const라는 변수 선언문이 출시되게 된것이다.

 

위의 코드에서 변수 선언문만 let으로 바꿔보자.

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

// Syntax Error: Identifier 'a' has already declared

위와같이 a변수가 이미 선언되어있다고 에러를 출력하게 된다.

 

위에서 작성했던 다른 코드들도 변수 선언문을 let으로 바꿔보자

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

// ReferenceError: i is not defined

console.log(a)
let a = 1
console.log(a)
// ReferenceError: Cannot access 'a' before initialization

위와같이 우리가 원래 예상한 대로 에러를 출력하게 된다. 그러나 이런 let도 호이스팅이 되는데,

let에는 TDZ(Temporal Death Zone)의 개념이 있다. 이는 let의 변수가 호이스팅이 된건 알겠으나, let의 선언문이 나오기 전엔 해당 변수에 접근할수 없게 한다. (이를 말 그대로 일시적 죽은 영역이라 한다.)

 

 

4. 마치며..

이처럼 let과 var선언문의 차이는 무엇인지, 호이스팅의 개념은 무엇인지 알아보게 되었다.

변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let을 사용하는 습관을 갖는것이 좋다.

 

 

---

#References

https://www.youtube.com/watch?v=fETYLCU2YYc

https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90