[JavaScript] var, let, const 차이점

 

1. javascript에서 var, let, const 차이점!!

 

 1. 변수 선언 방식의 차이

 

var  number = 1
console.log(number) // -> result: 1

var number = 2
console.log(number) // -> result: 2

이와같이 변수를 한번더 선언 했음에도 불구하고 에러가 나오지 않는다.

 

이러한 현상은 공부할때나 테스트 할때는 편할수 있으나 코드량이 많아 져서 중간에 값이 변경이 되면 어디서 부터 잘못 되었는지 찾기가 힘들어진다.

 

그렇다면 let변수를 사용해서 선언을 한다면 어떻게 될까?

 

let number = 1
console.log(number) // -> result: 1

let number = 2
console.log(number) // -> 에러: Indentifier 'number' has already been declared

var변수 선언과는 다르게 메시지가 보인다. 이미 "number"이라는 변수가 선언되었다고 한다.

 

즉 재선언이 되냐 안되냐의 차이이다.

 

그렇다면 const는 에러 메시지가 뜰까?

 

const number = 1
console.log(number) // -> result: 1

const number = 2
console.log(number) // -> 에러: Identifier 'number' has already been declared

역시나 안되나..

 

그렇다면 var과 const는 어떠한 차이일까?

 

!! 불변의(immutable)?? -> 재할당 가능 여부

 

코드로 차이점을 알아보자!!

let number = 1
console.log(number) // -> result: 1

let number = 2
console.log(number) // -> 에러: Indentifier 'number' has already been declared

number = 3
console.log(number) -> // result: 3

아하 number 이라는 변수에다 3을 넣었더니 정상적으로 출력이 된다.

 

그렇다면 const는?

 

const number = 1
console.log(number) // -> result: 1

const number = 2
console.log(number) // -> 에러: Identifier 'number' has already been declared

number = 3
console.log(number) // -> 에러: Assignment to constant variable

 

앗 const는 재할당이 안된다. 그러니 한번정하면 안바뀌는 값으로 저장해야겠다.

 

ES6이후 var의 문제점을 보안하기위해 let,const가 나왔다고 한다.  

 

 1. 호이스팅(그냥 코딩보면서 이해하시기 바랍니다.!!)

 

흠 호아스팅이라는 이름부터 맘에 안든다. 

 

변수의 선언 순서는 다음과 같다. 

 

  선언 단계 > 초기화 단계 > 할당 단계

 

var 변수와 같은 경우 선언과 초기화가 동시에 된다.

 

var number = nudefined < == > var number 

 

// 응? 나는 number이란 변수를 선언 안했는데 nudefined????
console.log(number); // result: undefined

var number; // 
console.log(number) // result: undefined

number = 1 //  할당
console.log(number) // result: 1

// 응? 이번에는 에러가 뜨네 var은 undefined가 떴는데 !!
console.log(number); // 에러: ReferenceError: number is not defined

let number; // 
console.log(number) // result: undefined

number = 1 //  할당
console.log(number) // result: 1

 

 

결과!!!

 

기본적으로 const를 사용하고 재할당을 할 경우는 let을 사용하고 var은 버리자!!^^