var, let, const

변수의 생성과정

차이점을 알아보기 전에 변수의 생성과정을 알고 가면 좋다.
변수의 생성은 선언 -> 초기화 -> 할당의 과정으로 진행된다.

1. var는 변수가 선언되는 동시에 초기화가 되며, 할당이 이루어진다.
2. let은 선언, 초기화, 할당이 분리되어 진행된다.
3. const는 선언, 초기화, 할당이 모두 동시에 진행된다.

var, let, const의 차이점

1. 중복선언이 가능한가?

var는 ES6(EcmaScript의 6번째 개정판) 버전에서 변수 선언 방법이 변화하기 전 사용하던 방법으로 중복 선언, 재할당이 가능한 변수이다.

var name = "Mike";
console.log(name); // Mike

var name = "Jun";
console.log(name);  //Jun

위의 예시처럼 변수를 재선언해도 에러가 나지 않는다.
즉, 마지막에 할당한 값이 최종 변수의 값이 된다.

복잡하고 긴 코드를 작성할 때 변수의 이름을 일일히 기억하긴 힘들어 중복선언을 할 경우가 생길수도 있다. 이때 문제가 어디서 발생했는지 찾기 어려울것이다.
이러한 문제때문에 ES6 버전에서 let과 const라는 변수 선언 방법이 생긴것이다.

let은 중복선언은 불가능하지만 재할당은 가능한 변수 선언 방법이다.

중복선언을 했을 때, 에러가 발생한다.

let name = "Mike";
console.log(name); //Mike

let name = "Jun";
console.log(name); //SyntaxError: Identifier 'name' has already been declared

재할당은 가능하다.

let name = "Mike";
console.log(name); // Mike

name = "Jun";
console.log(name); // Jun

const는 중복선언과 재할당이 모두 불가하다.

const name = "Mike";
console.log(name); // Mike

name = "Jun"; // TypeError: Assignment to constant variable.

이러한 점에서 let과 const의 차이는 변수에 값의 재할당 가능여부에 있다.

2. 호이스팅

먼저 호이스팅(hoisting) 이란 자바스크립트 문서를 인터프리터할 때, 변수와 함수의 메모리공간을 미리 할당하는 것으로, 최상위로 끌여올려진 것 처럼 동작하는 것이다.(코드가 실제로 올라가진 않는다)

var는 선언하기 전에 변수를 사용할 수 있다.

console.log(name); //undefined
var name = "Jun"; 

위의 코드는 에러를 일으키지 않는다. 왜냐면 아래의 코드처럼 동작하기 때문이다.

var name;	// 변수의 선언이 호이스팅 된다
console.log(name); // undefined
name = "Jun";  // 여기서 할당이 됨

변수 name을 출력할 때, undefined가 출력되는 이유
-> var는 선언 + 초기화가 동시에 이루어지며,
호이스팅으로 인해 선언은 최상위로 올려지고, 할당은 호이스팅 되지 않기 때문이다.

let과 const는 var처럼 호이스팅은 되지만 TDZ에 의해 에러가 발생한다.

console.log(name);
let name = "Jun"; //ReferenceError: Cannot access 'name' before initialization

TDZ(Temporal Dead Zone)

TDZ는 변수의 생성과정 중 선언과 초기화 사이의 일시적으로 변수의 값을 참조할 수 없는 구간이다.

var는 선언과 초기화가 동시에 이루어지지만, let과 const는 선언만 하면 초기화는 이루어지지 않아 호이스팅은 발생하였지만 TDZ에 들어가기 때문에 에러가 발생한다.

3. 함수 스코프 / 블록 스코프

var는 함수 스코프이며, let과 const는 블록 스코프에 해당한다.

함수 스코프 : 함수가 생성될 때 새로운 스코프가 형성되며, 함수 내에서 선언된 변수는 그 함수의 지역변수가 된다.

블록 스코프 : 코드블록( {} )이 생성되면 새로운 스코프가 형성되며, 코드블록 내에서 선언된 변수는 지역변수가 된다.

스코프에 대해서는 따로 포스팅하여 다뤄보겠다.

---

무엇을 사용해야하는가?

let과 const를 사용하면 내가 생각한대로 변수를 사용할 수 있으며, 예상못한 버그를 줄일 수 있다.