[JavaScript] var, let, const 차이점

1. 변수 선언 방식

javascript에서 변수 선언 방식을 크게  var, let, const로 나눌 수 있다.

[var]

ex)

var name = 'type'
console.log(name) // type
var name = 'javascript'
console.log(name) // javascript

var는 다음과 같이 같은 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 다른 값이 출력되는 것을 확인 할 수 있다.

이는 유연한 변수선언에 유리하지만, 

코드량이 많아진다면 어디에 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다.

ES6이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let과 const이다.

 

[let]

ex)

let name = 'type'
console.log(name) // type
let name = 'javascript' console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared

name이 이미 선언되었다는 에러 메세지가 나온다.( 이 부분은 const도 마찬가지)

그렇다면 let과 const의 차이점은 무엇일까?

차이점은 immutable 여부이다.

let은 변수에 재할당이 가능하다.

ex)

let name = 'type'
console.log(name) // type
let name = 'javascript' console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared
name = 'react'
console.log(name) //react

[const]

ex)

const name = 'type'
console.log(name) // type
const name = 'javascript'
console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared
name = 'react'
console.log(name) //Uncaught TypeError: Assignment to constant variable.


const는 변수 재선언 ,변수 재할당 모두 불가능하다.

2. 호이스팅

 

호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴것처럼 동작하는 특성을 말한다.

자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언을 호이스팅한다. 

하지만, var로 선언된 변수와는 달리 let으로 선언된 변수를 선언문 이전에 참조하면 참조 에러가 발생한다.

ex)

console.log(foo); // undefined
var foo;
console.log(bar); // Error: Uncaught ReferenceError: bar is not defined
let bar;



참고로 변수는 선언단계 > 초기화 단계 > 할당 단계에 걸쳐 생성된다.



var 로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다.



// 스코프의 선두에서 선언 단계와 초기화 단계가 실행된다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 있다.
console.log(foo); // undefined
var foo;
console.log(foo); // undefined
foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1



let 으로 선언된 변수는 선언단계와 초기화 단계가 분리되어 진행된다.



// 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 없다.
console.log(foo); // ReferenceError: foo is not defined
let foo; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo); // undefined
foo = 1;// 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1

3. 결론

그렇다면 어떤 변수 선언 방식을 써야할까?
변수 선언에는 기본적으로  const를 사용하고,
재할당이 필요한 경우에 한정해 let을 사용하는 것이 좋다.

 

 

 

#reference
https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d