let, const 그리고 var

let and const

let과 const에 대해서 알아보자.
이 둘은 변수를 선언할 때 사용하게 되는데 이전에는 var를 사용했다.
var로 변수를 선언하게 된다면 다음과 같이 변수의 overwrite가 가능해진다.

var name = 'john';
var name = 'kevin';
console.log(name); // kevin

이렇게 var를 사용하게 되면 큰 어플리케이션을 만들거나 협업을 할 경우에 문제가 생길 수 있다.
다른 개발자가 다른 파일에서 또는 같은 파일인데 다른 위치에서 작업을 할 경우 name이라는 변수명을 또 사용할 수 있을 수 있고, 그렇게되면 의도치않게 name은 kevin으로 overwrite 하게 된다.
따라서, 변수가 변하는걸 막기 위한 메커니즘이 필요했고 const가 등장하게 된 것이다.
const는 아래와 같이 변수가 바뀌는 것을 막아준다.

const name = 'john';
name = 'kevin'; // Error

하지만 const라고 해서 무조건적으로 바뀌는 것을 막아주는 것은 아니다. object의 경우 바뀌는 것을 허용하게 된다.
아래 코드를 보면, person을 직접 바꾸는 것은 허용되지 않지만 person안의 name을 바꾸는 건 허용된다.

const person = {
  name: 'john'
}

person = 'kevin'; // Error
person.name = 'kevin; // 수정완료

let은 이전의 var와 같은 것으로써 overwrite를 허용한다.

let name = 'john';
name = 'kevin';
console.log(name); // kevin

하지만 let과 var의 차이점이라면, var는 위에서 적었던 코드와 같이 재선언이 가능하지만 let은 재선언이 불가능하고, 재할당이 가능하다.

• 따라서 일반적으로 const를 사용하는 것을 추천한다.
• 값을 overwrite 해야하는 경우에만 let을 사용하고 var는 더 이상 사용하지 않는다.

Dead Zone

temporal dead zone은 let이랑 같이 소개되는 개념이다.
temporal dead zone이란 let이 hoisting을 못하도록 막아주는 것이다.
temporal dead zone이 없을 때는 어떻게 했었을까?
자바스크립트는 위에서부터 아래로 코드를 실행하기 때문에 이는 정의되지 않았다는 결과를 출력하게 된다.

console.log(name);
var name = 'john';
// undefined

ReferenceError가 뜨지 않고 undefined가 뜬 이유는 자바스크립트가 hoisting을 해주기 때문이다.
hoisting은 변수 선언을 상단부로 이동시키는 것을 말한다.
즉, 우리가 작성한 코드대로 위에서부터 아래로 진행되는 것이 아니다.
내부적으로는 코드가 아래와 같이 변경되게 된다.

var name;
console.log(name);
name = 'john';

사실 위와 같이 작성한 코드도 에러를 발생해야 맞는데 undefined로 끝나기 때문에 별로 적합하지 않다. 과한 친절이 개발자의 의도와는 다르게 흘러가는 것이다.
여기서 var대신 let을 사용하면 어떻게 될까?

console.log(name);
let name = 'john';
// Uncaught ReferenceError

의도한대로 에러가 출력된다.
이것이 바로 let의 temporal dead zone이다.