[JavaScript] var, let, const의 차이 및 scope, hoisting 알아보기

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

 

var, let, const의 차이점을 정리해보면 다음과 같다.

 

1. 중복 선언 가능 여부

2. 재할당 가능 여부

3. 스코프 유효범위

4. 호이스팅 방식

---

1. 중복 선언

var : 중복 선언 가능

// 변수 선언 + 초기화
var menu = "페퍼민트";
console.log(menu); // 페퍼민트

// 변수 선언 + 초기화
var menu = "캐모마일";
console.log(menu); // 캐모마일

// 변수 선언 (초기화 X)
var menu;
console.log(menu); // 캐모마일

var는 중복해서 변수 선언을 여러번해도 에러없이 각각 다른 값이 출력될 수 있다.

 

초기화 없이 선언만 한 경우엔 변수 선언문 자체가 무시된다. (이 또한 에러발생X)

 

이는 기존에 선언했던 변수의 존재를 까먹고 값을 재할당하게되는 등의 실수를 저지르기 쉽다는 단점이 있다.

---

let / const : 중복 선언 불가능

let menu = "돈까스";
let menu = "냉면"; // SyntaxError: Identifier 'menu' has already been declared

const menu = "피자";
const menu = "치킨"; // SyntaxError: Identifier 'menu' has already been declared

let, const로 선언한 변수는 중복 선언이 불가능하다.

 

위의 코드를 보면 이미 선언한 변수를 다시 선언할 경우 에러가 발생하는 것을 알 수 있다.

 

let, const는 var에 비해서 코드 안전성을 높여준다.

---

2. 재할당

var / let : 값의 재할당이 가능하다.

var order = "주문";
order = "취소";
console.log(order); // 취소

let door = "열림";
door = "닫힘";
console.log(door); // 닫힘

var와 let은 변수 선언 및 초기화 이후에 반복해서 다른 값을 재할당 할 수 있다.

---

const : 값의 재할당이 불가능하다.

const name = "홍길동";
name = "이순신"; // TypeError: Assignment to constant variable.

const는 상수를 선언하는 키워드이다.

처음에 선언 및 초기화 하고 나면 다른 값을 재할당 할 수 없다.

---

3. 스코프 (Scope)

스코프란 유효한 참조 범위를 뜻하며, var로 선언한 변수와 let, const로 선언한 변수의 스코프는 다르다.

 

var : 함수 레벨 스코프 (function-level scope)

function test() {
    var coco = "코코";
    console.log(coco);
}

test(); // 코코

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

var는 함수 내부에 선언된 변수만 지역변수로 한정하며, 나머지는 모두 전역변수로 간주한다.

 

test 함수 내부에서 선언된 coco 변수는 함수 내부에서만 참조가 가능하며, 외부에서 참조시 에러가 발생한다.

 

함수를 제외한 영역에서 var로 선언한 변수는 전역변수로 취급된다.

if(true) {
    var coco = "코코";
    console.log(coco); // 코코
}

console.log(coco); // 코코

자바스크립트에서는 if, for, while, try/catch 문 등의 코드 블록 { ... } 내부에서 var로 선언된 변수를 전역 변수로 간주한다.

 

그래서 블럭 외부에서도 어디에서나 참조할 수 있다.

 

하지만, let과 const는 다르다.

---

let / const : 블록 레벨 스코프 (block-level scope)

if(true) {
    let coco = "코코";
    console.log(coco); // 코코
}

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

let, const는 함수 내부는 물론이며 if, for문 등의 코드 블록 { ... } 에서 선언된 변수도 지역변수로 취급한다.

function test() {
    let coco = "코코";
    console.log(coco);
}

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

 

정리하면, 

var는 함수 내부에 선언된 변수만 지역 변수로 인정하는 함수 레벨 스코프이고,

let, const는 블록 내부에서 선언된 변수까지도 지역변수로 인정하는 블록 레벨 스코프이다.

---

4. 호이스팅

자바스크립트의 Parser는 코드를 실행하기 전에 해당 코드를 한번 훑어보는 일종의 코드 평가 과정을 거치는데,

 

이 때 변수 선언문을 미리 실행해두기 때문에 뒤에서 선언된 변수도 앞의 코드에서 참조할 수 있게 된다.

 

이를 변수 호이스팅이라 한다.

 

여기서 var와 let/const도 호이스팅 과정이 다르다.

 

var : 변수 호이스팅 발생

console.log(coco); // undefined

var coco = "코코";

console.log(coco); // 코코

변수 coco 가 선언되기 전에 참조되었음에도 에러가 발생하지 않는다.

 

이는 코드 실행 전에 자바스크립트 내부에서 미리 변수를 선언하고 undefined로 초기화를 해두었기 때문이다.

---

let / const : 다른 방식으로 변수 호이스팅 발생

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

let coco = "코코";
console.log(coco); // 코코

변수 coco 가 선언되기 전에 참조하니 에러가 발생한다.

 

let, const로 변수를 선언하는 경우,  자바스크립트 내부에서는 코드 실행 전에는 변수 선언만 해두며,

초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행한다. 그렇기 때문에 호이스팅이 발생하기는 하지만,

값을 참조할 수 없어서 호이스팅이 발생하지 않는 것처럼 보이는 것이다.

 

변수의 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간인 TDZ(Temporal Dead Zone)에 빠졌기 때문에 보이는 현상이다.

---

정리하면,

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

---

참고