4. let, const, var의 차이점

let : 변수를 선언합니다.

let age = 30;
age = 31;

---

 

 

const : 상수를 선언합니다.

const birthYear = 1991;
// birthYear = 1990; // TypeError

const job // 'const' declarations must be initialized.

 

const(상수)는 무조건 초기값을 필요로 합니다.

let variable;
variable = 20; // ok

const constant; // error

 

const라고 할지라도 'object의 property'나 'Array의 element'가 추가되거나 변경되는 것은 허용합니다.

const myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

const fruits = []
fruits.push('바나나', '사과', '복숭아')

console.log(fruits.length) // 3

---

 

 

var : 변수를 선언합니다. (Legacy)

ES6의 let/const가 등장하기 이전에, 변수는 var 키워드를 이용해서 선언되었습니다. 하지만 이제는 쓰지 않는 방법입니다.

let/const와 var의 작동 방식은 매우 다릅니다.

 

1. let/const는 block-scoped이고, var은 function-scoped입니다.

block-scoped는 코드 블록({}중괄호 기준) 내에서 선언된 변수는 코드 블록 내에서만 변수를 참조할 수 있고, function-scoped는 함수 내에서 선언된 변수는 함수 내에서만 변수를 참조할 수 있습니다.

 

function-scoped

var first = 1; // 전역 변수

console.log(first); // 1

{
  var second = 2; // 전역 변수
}

console.log(second); // 2

var의 경우에는 second가 코드블록 내에 있음에도 불구하고 function이 아니기 때문에 전역 변수로 사용됩니다.

 

 

block-scoped

let first = 1; // 전역 변수

{
  let second = 2; // 지역 변수
}

console.log(first); // 1
console.log(bar); // ReferenceError: second is not defined

let으로 선언된 second는 코드블록({}) 안에서 선언되었기에 전역에서는 참조가 불가능한 것을 확인할 수 있습니다.

 

 

2. 변수 선언 중복 가능 여부

var first = 1;
var first = '1'; // 중복 선언 ok

let second = 2;
let second = '2'; // Uncaught SyntaxError: Identifier 'second' has already been declared

var은 똑같은 변수명으로 중복 선언 할 수 있습니다. 하지만 let은 불가능합니다.

복잡한 프로그램일 경우 변수명을 짓다가 중복이 발생할 수 있는데, var은 이 위험에 쉽게 노출되는 반면, let은 방지가 가능합니다.

 

3. hoisting

호이스팅이란 scope 안에 있는 선언들을 모두 scope의 최상위로 끌어올리는 것입니다.

 

호이스팅이 적용되는 var

console.log(first); // undefined
var first = 1;

// 위는 아래와 같이 호이스팅 됩니다.
var first;
console.log(first);
first = 1;

var는 호이스팅이 됩니다. 그래서 이후에 선언된 first 변수는 항상 최상위에 선언한 것과 동등한 의미를 가지게 됩니다.

 

var로 선언된 변수는 

1. 선언 & 초기화

2. 할당

과정을 거칩니다.

 

first는 우선 scope 최상위에서 선언되고 아무값도 안 받아진 상태(undefined)로 초기화됩니다.

그래서 위으 코드에서 console.log(first);에 undefined가 출력됩니다. 출력 이후에 1이 할당됩니다.

 

 

TDZ(Temporal Dead Zone)이 포함된 let/const

console.log(first); // ReferenceError
let first = 1;
console.log(first); // output : 1

 

TDZ가 적용되는 let과 const는

1. 선언

2. TDZ (선언과 초기화 완료 시점 사이의 시간상 사각지대)

3. 초기화

4. 할당

과정을 거칩니다.

 

let과 const 또한 첫 번째로 '1.선언'을 거치기 때문에 호이스팅이 되기는 합니다. 하지만 var과는 다르게 초기화가 선언과 동시에 진행되지 않습니다. var는 undefined로 초기화해놓지만, let과 const는 아무것도 초기화하지 않았습니다.

그래서 undefined로 초기화되어 있지 않은 상태에서 해당 변수를 참조하고자 하면 ReferenceError를 던집니다.

즉, let과 const는 호이스팅은 되지만 undefined로 초기화되지 않습니다.