var, let, const 그리고 호이스팅

참고자료

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

var, let, const 차이점

이 글은 위 블로그 글을 타이핑해보면서 공부한 글입니다. 자세한 내용은 위 글을 참고해주세요.

 

 

JavaScript에서 변수 선언 방식인 var, let, const의 차이점에 대해 알아보자.

변수 선언 방식

우선 var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다.

var name = 'bathingape'
console.log(name) // bathingape

var name = 'javascript'
console.log(name) // javascript

변수를 한번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력된다.

이러한 유연한 변수 선언 방식은 장점이 되지만, 이미 있는 변수를 재선언하여 값이 변경되는 등 문제를 야기할 수 있다.

 

그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언방식이 let 과 const 이다.

위 코드에서 변수 선언 방식만 바꿔보자.

let name = 'bathingape'
console.log(name) // bathingape

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

name이 이미 선언 되었다는 에러 메세지가 나온다. (const 도 마찬가지이다.)

변수는 재선언 되지 않는다.

그렇다면 let 과 const 의 차이는 무엇일까?

이 둘의 차이점은 immutable(불변) 여부이다.

let 은 재할당이 가능하지만,

let name = 'bathingape'
console.log(name) // bathingape

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

name = 'react'
console.log(name) //react

const 는 재선언, 재할당이 불가능한 불변이다.

const name = 'bathingape'
console.log(name) // bathingape

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

name = 'react'
console.log(name) 
//Uncaught TypeError: Assignment to constant variable.

 

여기서 정리

var       재선언 재할당 가능

let        재선언 불가능 , 재할당 가능

const   재선언 , 재할당 불가능

 

호이스팅

호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것 처럼 동작하는 특성을 말한다.

자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅한다.

하지만, var로 선언된 변수와는 달리 let 으로 선언된 변수를 선언문 이전에 참조하면 참조에러 (ReferenceError)가 발생한다.

console.log(foo); // undefined
var foo;

console.log(bar); // Error: Uncaught ReferenceError: bar is not defined
let bar;

이는 let 로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone) TDZ에 빠지기 때문이다.

let 과 const는 TDZ 때문에 선언전에 변수를 사용하는 것을 허용하지 않는다.

참고로, 변수는 선언 단계 > 초기화 단계 > 할당 단계 에 걸쳐 생성되는데 

var 으로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다. 하지만

// 스코프의 선두에서 선언 단계와 초기화 단계가 실행된다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 있다.

console.log(foo); // undefined

var foo;
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

let 으로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.

// 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 없다.

console.log(foo); // ReferenceError: foo is not defined

let foo; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

여기서 정리

var 같은 경우에는 선언 - 초기화가 한번에 이루어지기 때문에 선언전에 변수에 접근해도 undefined 값처럼 접근이 가능하다.

하지만 let 호이스팅이 일어나더라도 TDZ 때문에 변수가 선언되기 전까지 접근할 수 없다.