let, var, const의 차이점 & 호이스팅(Hoisting)

변수 선언 시 사용되는 let, var, const의 차이점과 호이스팅(Hoisting)에 대해 정리하였습니다.

 

 

---

< let, var, const >

let, var, const는 모두 자바스크립트에서 변수 선언 시 사용되는 키워드입니다.
var가 초기 자바스크립트에서 사용되던 키워드이고, 해당 키워드의 단점을 보완하기 위해 ES6버전의 자바스크립트에 let과 const가 추가되었습니다.

이 세가지 키워드의 차이점을 1. 변수 선언 방식과 2. 재할당 가능 여부로 나누어 보겠습니다.

 

---

< 1. 변수 선언 방식 >

var name = "Lee"
console.log(name) // Lee

var name = "Kim"
console.log(name) // Kim

: 먼저 var는 변수 선언 방식에 큰 단점이 있습니다. var 키워드를 이용해 변수를 한 번 선언했음에도 추후 재선언 시 에러가 출력되지 않고 잘 작동합니다.

간단한 테스트시에는 이런 유연한 선언방식이 편리하겠지만, 코드가 길어지고 복잡해지면 어디에서 같은 변수명이 사용되었는지 모르고, 값 역시 바뀔 우려가 있다는 단점이 있습니다.

이런 단점을 보완하기 위해 ES6부터 let, const 키워드가 추가되었습니다.

 

let name = "Lee"
console.log(name) // Lee

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


const name = "Lee"
console.log(name) // Lee

const name = "Kim"
console.log(name)
// Uncaught SyntaxError: Identifier 'name' has already been declared

: let과 const키워드에서는 해당 키워드를 이용해 추후 재선언 시 에러가 출력되며 작동하지 않는 모습을 볼 수 있습니다.

 

---

< 2. 재할당 가능 여부 >

var name = "Lee"
console.log(name) // Lee
name = "Kim"
console.log(name) // Kim

let name = "Lee"
console.log(name) // Lee
name = "Kim"
console.log(name) // Kim

: var와 let키워드를 사용시 추후 재할당이 가능하기 때문에 유연한 사용이 가능합니다.

 

const name = "Lee"
console.log(name) // lee

name = "Kim"
// Uncaught TypeError: Assignment to constant variable.

: 하지만, 변수의 값이 변하지 않아야 할 경우에는 추후 재할당이 불가능한 const를 사용하는 게 좋습니다.

 

 

---

< 호이스팅(Hoisting) >

자바스크립트는 함수 및 변수의 코드를 실행하기 전에 함수(변수) 선언에 대한 메모리부터 할당합니다. 덕부에 함수(변수)를 호출하는 코드를 함수(변수) 선언보다 앞서 배치할 수 있습니다. 이를 호이스팅(Hoisting)이라고 합니다.

MDN 공식문서를 살펴보면 호이스팅을 설명할 때 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다.
예제로 살펴보겠습니다.

 

예시1: 함수의 호이스팅)

setName("이상훈");

function setName(name) {
  console.log("제 이름은 " + name + "입니다");
}

// "제 이름은 이상훈입니다"

: 자바스크립트는 setName함수를 실행하기 전에 함수 선언에 대한 메모리부터 할당하기 때문에 정상적으로 작동합니다.

 

 

예시2: 변수 var 의 호이스팅)

console.log(num); // undefined
var num; // 선언
num = 6; // 초기화

: 호이스팅한 var 선언으로 인해 undefined 출력 => 선언만 코드의 최상단으로 옮기기 때문입니다.

 

console.log(num); // ReferenceError
num = 6; // 초기화

: 해당 예제는 선언 없이 초기화만 존재하기 때문에, 호이스팅도 없고 변수를 읽으려는 시도에서는 ReferenceError가 발생합니다.