[JS] 이젠 알아야지.. var let const 차이

그동안.... var let const 애써 정확히 뭐가 다른지 무시했던 나날들...
이제 무시할 수 없다..!

1. 호이스팅

이 코드는 과연 실행이 될까?

a();

function a () {
  console.log("3");
}

정답은... YES!

그 이유는 JavaScript는 함수의 코드를 실행하기 전에 함수 '선언'에 대한 메모리부터 할당합니다.
우린 이걸 호이스팅이라고 부르기로 사회적으로 합의했어요

호이스팅 : 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미

console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num = 6; // 선언과 초기화

var num = 6은 한 줄에 선언과 초기화를 했지만 호이스팅은 선언만 메모리에 미리 할당합니다.
만약 호이스팅이 되지 않았다면 ReferenceError 예외가 발생했을 겁니다.
위 코드는 아래와 같습니다.

var num;
console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
num = 6; // 선언과 초기화

물론, let과 const로 선언한 변수도 호이스팅 대상이지만,
호이스팅시 undefined로 변수를 초기화 하지 않습니다.
따라서

console.log(num); // 호이스팅이 되었지만 let으로 ReferenceError 예외
let num = 6; // 선언과 초기화

var가 아닌 let으로 선언했다면 undefined로 초기화가 되어있지 않고 메모리 할당만 되어있어 ReferenceError 예외가 발생한다.

2. 변수 재선언, 재할당

var a = apple;
var a = tree; // OK!

let b = pretty;
let b = cute; // SyntaxError!
b = beautiful; // OK!

const b = cat;
const b = dog; // SyntaxError!
b = bird; // TypeError!

var의 경우 변수 재선언이 가능하다.

따라서 같은 이름으로 변수 선언해도 오류가 나지 않음.
하지만 let과 const는 변수 재선언은 안된다.
const는 재할당도 되지 않는다.

이젠 알자, const 재할당!

const a = [1,2,3];
a.push(3); //ok!

const b = {name : "jon"}
b.name = "happy"//ok!
b = a; //TypeError!

const가 보호해주는 것은 할당 주소값이지 객체의 내용은 아닙니다.
따라서 배열이나 객체 속 내용은 변경해도 괜찮습니다. 하지만 아예 const로 할당된 객체에 다른 객체를 할당하면 안됩니다.