[JS] let, var, const의 차이점

오늘은 기술면접의 단골 질문이라 할 수 있는 const let var의 차이점과 호이스팅에 대해 알아보자. 

 

자바스크립트에서 변수의 선언은 총 세가지 방법이 있는데, 

 

위 짤에서 알 수 있듯... 우리 var 친구는 약간... 관심이 필요한 친구다...

 

VAR

ES6 이전에는 변수 선언과 할당을 위해서는 var키워드를 사용해야 했다.

Scope of var

스코프란 간단하게 말해 변수들이 어디서 사용 가능한가를 나타낸다. var선언은 global 혹은 function/locally 스코프다. 

var변수가 만약 함수 밖에서 선언되었다면 var은 글로벌 스코프를 가진다. 그 말은 전 영역에서 사용 가능하다는 뜻.

만약 var변수가 함수안에서 선언된다면 함수 블록 안에서 접근 가능하다.

Var variables can be re-declared and updated

그리고 var변수는 재선언 재할당이 가능하다.

Hoisting of var

var는 호이스팅의 영향을 받는다. 

Problem

var선언은 언제든지 재선언과 재할당이 가능하며, 호이스팅의 영향을 받기 때문에

코드를 명확하게 알지 못하는 경우 변수사용에 문제를 일으킬 가능성이 아주 높다. 따라서 Let과 Const의 필요성이 대두되었다.

---

Let

let키워드는 var의 문제점을 해결하기 때문에 이제는 let의 사용이 일반적이다.

Let is block scoped

글로벌/함수 스코프이던 var와는 다르게 let은 block {} 스코프의 특성을 가진다. 따라서 curly brace 안에서만 변수 사용이 가능하다.

Let can be updated but not re-declared

같은 block 스코프내에서 재할당은 가능하지만 재선언은 불가능하다.

Hoisting of let

let도 var과 마찬가지로 호이스팅의 영향을 받는다. 한 가지 차이점은 var는 undefined로 초기화가 되지만 let은 초기화가 되지 않는다. 따라서 만약 선언 이전에 변수를 사용하려고 한다면 Reference Error를 받게 된다.

---

Const

const키워드는 let키워드와 유사하다.

Const declarations are block scoped

let과 마찬가지로 const도 block {} 스코프 내에서 접근이 가능하다. 

Const cannot be updated or re-declared

let과의 차이점이 있다면 재할당과 재선언이 모두 불가능하다는 점이다. 

한가지 유의할 점은 객체의 경우 약간은 규칙이 달라진다. const 객체 그 자체를 재할당하는 것은 불가능하지만 그 안의 프로퍼티는 재할당이 가능하다. 

Hoisting of const

const도 마찬가지로 hoisting의 영향을 받는다. 하지만 let과 마찬가지로 초기화 되지는 않는다. 

 

• var declarations are globally scoped or function scoped while let and const are block scoped.
• var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
• They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
• While var and let can be declared without being initialized, const must be initialized during declaration.