[JavaScript] 자바스크립트 var, let, const 차이 가볍게 이해하기

자바스크립트에 변수를 선언하는 방식은 키워드 별로 3가지가 있다.

var, let 그리고 const

이 셋이 각가 어떤 차이를 가지고 있는지 살펴보자.

 

1. 중복선언과 재할당

이 셋의 가장 큰 차이는 선언과 할당에 있다.

먼저, var 키워드는 중복선언이 가능하다.

var myName = 'Bigtop';
console.log(myName); // Bigtop

var myName = 'KimBigtop';
console.log(myName); // KimBigtop

혹시라도 중복이 가능하니 좋지않으냐고 생각할 수도있겠지만, 코드의 양이 늘어나고 복잡도가 높아질수록 변수의 중복선언을 허용하는 것은 이 변수 관리를 한층 더 어렵게 만든다.

 

그래서 이를 보완해 ECMA2015 부터 등장하게된 let과 const 키워드는 이런 중복선언이 불가하다.

let myName = 'Bigtop';
console.log(myName); 

let myName = 'KimBigtop';
console.log(myName); 

이렇게 위 코드에서 키워드만 let(혹은 const)로 바꾸면, Uncaught SyntaxError: Identifier 'myName' has already been declared라는 에러메세지를 만나게 된다.

 

그렇다면 let과 const는 무슨 차이일까?

const는 선언과 동시에 초기화를 해야하고, 재할당이 불가하다.

var myName1; // OK
let myName2; // OK
const myName3; // Error

const는 이렇게 값을 할당하지 않고 선언이 불가하다.
이렇게 코드를 실행하면 Uncaught SyntaxError: Missing initializer in const declaration이라는 에러 메세지를 만나게 된다.

const myName = 'bigtop';
myName = 'KimBigtop'; // Error

const는 이렇게 값을 재할당할 수도 없다. 

이렇게 코드를 실행하면 Uncaught TypeError: Assignment to constant variable.이라는 에러 메세지를 만나게 된다.

const 선언에 대한 자세한 내용은 [JavaScript] 자바스크립트 상수(Constant) 이해하기에서 살펴보자.

 

2. 유효범위 (Scope)

var와 let/const는 서로 다른 유효범위를 가지고 있다.

var는 함수-Scope를 가지고 있고 let/const는 블록-Scope를 가지고 있다.

 

이번에는 let/const 부터 살펴보자.

{
    let myName = 'bigtop';
}

console.log(myName); // Error

let/const는 블록-Scope를 가지기 때문에, 아래와 같이 블록문 내부에서 선언한 변수는 블록문 밖에서 참조할 수가 없다.

위 코드를 실행하면 Uncaught ReferenceError: myName is not defined라는 에러를 만나게 된다.

 

반면, 함수-Scope를 가지는 var변수는 블록문에 상관없이, 동작하는 것을 확인할 수 있다.

{
    var myName = 'bigtop';
}

console.log(myName); // bigtop;

하지만, 아래와 같이 함수 안에서 정의한 변수의 경우에는 함수 밖에서 참조할 수 없다.

function sayMyName() {
    var myName = 'bigtop';
}

console.log(myName); // bigtop;

위 코드를 실행하면 동일하게 Uncaught ReferenceError: myName is not defined라는 에러를 만나게 된다.

스코프에 대한 자세한 내용은 [JavaScript] 자바스크립트 스코프(scope) 가볍게 이해하기를 살펴보자.

3. 호이스팅 hoisting

선언문을 해당 유효범위의 최상단으로 끌어올리는 현상인 호이스팅은 var 키워드로 선언한 변수에서 명시적으로 드러난다.

사실 제대로 따지자면 let과 const도 호이스팅은 된다. 하지만 let과 const가 가지는 특성에 의해서 refferenceError가 발생하기 때문에 자연스럽게 코드를 수정하게 되면서 호이스팅에 대한 생각을 잊어버리게 된다. 기회가 된다면 자세한 나용을 다뤄보겠지만, 일단은 var 키워드에서 호이스팅이 명시적으로 발생한다는 사실로 구분해두자.

console.log(myName); // undefined

var myName;
console.log(myName); // undefined

myName = 'Bigtop';
console.log(myValue); // Bigtop

위와 같은 코드의 경우에는 myName 변수를 선언하는 부분이 호이스팅 되어 첫 번째 줄에서 myName을 사용해도, undefined값이 출력이 되지만, let/const의 경우는 다르다.

console.log(myName); // Error

let myName;
console.log(myName);

myName = 'Bigtop';
console.log(myValue);

let 키워드는 호이스팅 되지 않기 때문에, 위 코드를 실행할 경우, Uncaught ReferenceError: Cannot access 'myName' before initialization 라는 에러를 만나게 된다.

const 키워드의 경우, 일단 const로는 선언만 할 수 없기 때문에 위와 같은 코드가 작성될 수 없지만 만일 초기화를 통해 const 변수를 선언하더라도 let과 동일한 에러를 만나게 된다. 

호이스팅에 대한 자세한 내용은 [JavaScript] 자바스크립트 호이스팅(Hoisting) 가볍게 이해하기를 살펴보자.