[Javascript] 호이스팅과 var, let, const 차이점

var, let, const의 차이점

자바스크립트에서 변수를 선언하는 방식은 3가지가 있습니다.

let, var, const 세가지의 차이점에 대해 정리하겠습니다.

- 재선언, 재할당 여부

• var는 재선언, 재할당 모두 가능하다.

var age = 123;
var age = 20
console.log(age); //20

var num = 123;
num = 20
console.log(num); //20

• let은 재선언은 불가능하고 재할당은 가능하다.

let age = 123;
let age = 20;  SyntaxError: Identifier 'age' has already been declared

let num = 123;
num = 20
console.log(num); //20

• const는 재할당, 재선언이 모두 불가능하다.

const age = 123;
const age = 20;  SyntaxError: Identifier 'age' has already been declared

const num = 123;
num = 20; TypeError: Assignment to constant variable.

- scope범위

• let, const는 block scope

function addNum() {
    for(let i=0; i < 5; i++) {
        
    }
    console.log(i); // ReferenceError: i is not defined
}

addNum();

• var은 function scope

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

addNum();

- 호이스팅

호이스팅이란?

코드가 실행하기 전 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다.

var는 선언전에 사용이 가능하고, let은 선언전에 사용이 불가능하다. var는 호이스팅이 되고 let은 호이스팅이 되지 않아서일까? 답은 아니오다.

let var 둘 모두 호이스팅이 된다. 하지만 차이점이 있다.

• var은 호이스팅 시 undefined로 변수를 초기화한다.
• let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. 초기화를 하지 않아 사용할 수 없는 것이다.
  
  

결론

	재선언	재할당	스코프	호이스팅
var	O	O	함수	undefiend로 초기화
let	X	O	블록	초기화X
const	X	X	블록	초기화X

참고: https://developer.mozilla.org/ko/docs/Glossary/Hoisting

참고: https://www.youtube.com/watch?v=ocGc-AmWSnQ