이번 포스팅에서는 JavaScript의 var, let, const의 차이에 대해 다뤄보도록 한다.
var & let
JavaScript는 es6 문법 도입 이전까지 var 키워드만을 이용하여 변수를 선언했다. 그렇기 때문에 코드 실행 중 예기치 못한 문제들이 자주 발생하게 되었다. 예를 들면 다음과 같은 문제들이다.
var a = "a"
console.log(a) // "a"
var a = "b"
console.log(a) // "b"같은 변수에 다른 값을 두 번 할당하였는데도 에러가 나지 않고 멀쩡히 다른 값이 출력되는 것을 볼 수 있다. var는 변수의 재선언, 재할당 모두가 가능하기 때문에 유연한 변수 선언 면에서는 장점일 수 있으나, 코드양이 많아질수록 유지 관리가 힘들며 에러를 찾기도 힘들어진다.
또한 var는 Hoisting과도 연관이 있다.
JavaScript에서 호이스팅(
hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.
(출처: https://developer.mozilla.org/ko/docs/Glossary/Hoisting)
즉, 앞서 선언하지 않은 변수가 먼저 선언되어 호출되는 것처럼 동작하는 프로세스를 말한다.
예를 들면 다음과 같다.
console.log(b) // undefined
var b = "something"
console.log(b) // Error: Uncaught ReferenceError: b is not defined
let b = "somethinglet으로 선언한 변수는 선언 전에 호출하게 되면 참조 오류가 발생하는 반면 var로 선언한 변수는 undefined로 할당값을 초기화한 상태로 출력된다.
변수 생성 과정은 선언 단계(Declaration phase) => 초기화 단계(Initialization phase) => 할당 단계(Assignment phase) 이렇게 총 세 단계를 거쳐 생성되는데, var로 선언된 변수는 선언 단계에서 undefined를 할당하는 과정(초기화 과정)이 한 번에 진행되어서 변수 선언 전 호이스팅이 가능하지만, let은 선언 단계에서 초기화 과정(메모리 공간 확보)이 이루어지지 않기 때문에 선언 이전에 변수를 참조할 수 없다.
let & const
var(es5 문법)와 let(es6 문법)의 차이를 알아보았으니 이제 같은 es6 문법인 let과 const의 차이에 대해 알아보자.
let
let은 변수의 재선언은 불가능하지만 재할당이 가능하다. 예를 들면 다음과 같다.
let variable = 'v'
console.log(variable) // 'v'
variable = 'c'
console.log(variable) // 'c'이와 같이 변수에 다른 값을 재할당 하면 제대로 값을 출력하는 것을 확인할 수 있다. 또한, let은 변수를 선언할 시 할당을 반드시 하지 않아도 된다.
let bar;
console.log(bar) // undefined
bar = 'bar'
console.log(bar) // 'bar'const
그렇다면 const는 어떨까?
const는 변수의 재선언, 재할당 모두 불가능하다. 변수에 값을 한 번 할당하게 되면 바꿀 수 없기 때문에 변수를 선언할 시 할당이 반드시 이루어져야 한다.
const a = 1
a = 2 // TypeError: Assignment to constant variable.
const b // SyntaxError: Missing initializer in const declaration예시와 같이 const로 선언한 변수는 값을 재할당할 수 없으며, 변수를 선언만 하는 것도 안된다.
간단 요약
var : 변수의 재선언/재할당 모두 가능, Hoisting이 되어 변수를 선언하기 전에 참조할 수 있다.
let: 변수의 재선언은 불가능하나 재할당은 가능, 변수를 선언하기 전에 참조할 수 없으나, 변수를 선언할 시 할당을 반드시 할 필요는 없다.
const: 변수의 재선언/재할당 모두 불가능, 변수를 선언하기 전에 참조할 수 없으며, 변수를 선언할 시 할당을 반드시 해야 한다.
참고자료
https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d
