[Javascript] let ,const , var 차이점 (호이스팅)

[Javascript] let , const , var 차이점 (호이스팅)

 Javscript는 기본적으로 var을 이용한 변수 선언만 존재했다.

하지만 var의 문제점을 호리 스팅 let과 const가 나왔다.

이 세 가지 선언 방법의 차이점을 알기 위해선 var의 문제점을 먼저 알아야 한다.

 

그전에 호이스팅을 먼저 알아보겠습니다.

---

호이스팅이란? 

변수나 함수의 선언을 최상단으로 끌어올리는 것을 말합니다.

 

그냥 무작정 코드 첫 줄로 올리는 게 아니라

변수가 유효한 범위 최상단으로 올리는 것을 말합니다.

 

var age = 3;

console.log(age); //3

 

호이스팅이 되면 이런 식으로 변하게 됩니다.

 

var age;

age = 3

console.log(age)

함수도 호이스팅이 되기 때문에

코드상 함수를 선언하기 전에 호출을 해도 정상적으로 작동합니다.

 

test(); //Test!

function test() {
  console.log("Test!");
}

 

이번엔 변수에다가 함수를 담아보겠습니다. 변수에다가 함수를 담는걸 함수 표현식이라고 합니다.

 

test(); //TypeError: test is not a function

var test = function () {
  console.log("test!");
};

이렇게 해 보니까 에러가 납니다.

 

에러가 나는 이유는 변수는 "선언과 할당이"분리가 됩니다.

 

호이스팅은 선언을 올려준다고 했죠 그래서 에러가 나는 겁니다

 

이제 var , let , const의 차이점을 알아보겠습니다.

 

 

Var을 이용한 변수 선언 법

설명 전에 이 코드의 결과는 어떻게 될 거 같나요?

var test = 3;

console.log(test);

var test = 5;

console.log(test);

 

 

대부분 에러가 날 거라고 생각할 거 같습니다.

 

하지만 아무 문제없이 3과 5가 출력이 되는 모습을 보입니다.

 

이게 조금 심각한 게 코드가 지금 4줄인데

 

1000줄인 코드의 변수를 모두 var로 선언을 하고

 

정말 재수가 없게 똑같은 이름으로 선언을 해버렸다면 에러가 나지 않고 

 

잘못 할당해버린 값이 그대로 쓰이는 거죠

---

 

console.log(water);

var water;

 

그럼 이런 상황에선 어떻게 될까요

 

이건  위에 호이스팅을 설명해서  Undefined라고 생각할 수 있을 거 같습니다.

 

맞습니다. 근데 Undefined라서 문제인 겁니다.

 

Var는 변수의 선언과 초기화가 동시에 진행됩니다.

 

아니 변수를 선언만 해도 "초기화"가 된다니 이게 무슨 말일까 싶지만

 

호이스팅은 선언만 최상단으로 올려주지만 var는 선언과 undefined로 초기화를 "동시에"하기 때문에

 

그래서 선언 전에 참조를 해도 에러가 나지 않습니다.

 

정리를 해보면

 

1. 중복 선언이 가능하다.

2. 선언과 초기화를 동시에 한다(undefined로)

 

---

 

 

let을 이용한 선언 법

 

let은 일단 선언을할때 초기화가 분리됩니다 var와 큰 차이죠

 

그래서 이런상황에는 에러가발생합니다.

console.log(Age);

let Age = 3;

var는 undefined로 초기화가 되는 반면 let은 초기화가되지않아서

 

호이스팅이 되긴 하지만 변수를 참조할순없습니다. 

 

그리고 let은 변수를 재할당은 할수있지만 재선언은 불가능합니다.

 

때문에 이런상황에선 에러가 발생하지만

let Age = 15;

let Age = 14;

//SyntaxError: Identifier 'Age' has already been declared

 

아래와 같은 상황에선 에러가 발생하지않습니다.

let Age = 15;

Age = 14

console.log(age) // 14

 

let도 정리해보면

 

1.재선언은 불가능하다

2.재할당은 가능하다.

3.마찬가지로 호이스팅이되지만 선언과 초기화는 분리되기때문에 선언하기전에 참조하면 에러가 난다.

 

 

 

Const를 이용한 선언방식

const는 constant의 약자입니다.

 

상수라는뜻인데

 

이차함수에서 y = ax^2 + bx + c

 

c가 상수인거죠  bx나 ax^2은 x값에따라서 바뀌지만 c는 그렇지않으니까요

 

const변수도 마찬가지입니다 let과 동일하게 재선언이 불가능하고

 

선언과 초기화가 분리됩니다.

 

let과의 차이점은

 

재할당이불가능하다는겁니다.

 

때문에

 

const Age = 3;

console.log(Age); 

Age = 4;//Assignment to constant variable.

 

이렇게 에러가 발생됩니다.

 

Const 정리해보면

 

1.let과 마찬가지로 선언과 초기화가 분리된다

2.let,var와 달리 재할당이 불가능하다

3.재선언도 안된다