[JS] var, let, const

* 개인적인 공부 내용을 기록하는 용도로 작성한 글 이기에 잘못된 내용을 포함하고 있을 수 있습니다.

 

이전 [JS] 변수와 상수 포스팅에서 var const 키워드를 이용해 변수와 상수를 선언하는 방법에 대해 알아 보았다.

이번 포스팅 에서는 ES6에서 새롭게 추가된 let 키워드와 var let const 의 차이점에 대해서 정리해 보고자 한다.

 

#1 var vs let

#2 let vs const

# 정리

---

ES6버전 이전에는 오로지 var로만 변수를 초기화가 가능했다. 따라서 오래된 JavaScript 코드를 보면 var로 선언된 변수들을 빈번하게 볼 수 있다. 하지만 사실 var키워드는 여러 단점을 지니고 있다. 

#1 var vs let

1. 재선언이 가능하다. 

var은 한 번 선언한 변수를 다시 선언해도 아무런 에러를 발생시키지 않는다는 단점이 있다.

여러개의 소스코드를 연결할 때 같은 변수 이름을 사용해서 선언한 부분이 있다면 이전 변수를 덮어씌워 버리기에 예상치 못한 결과를 발생시킬 수 있다. 

var a = 10;
var a = 10;

 

let은 var과 달리 재선언이 불가능하다. 다음과 같이 한 번 선언한 변수를 다시 선언하면 에러 메시지를 출력한다.

let b = 10;
let b = 10;

VM228:2 Uncaught SyntaxError: Identifier 'b' has already been declared

 

2. 호이스팅(Hoisting)

호이스팅(Hoisting)이란 "끌어올리다"라는 단어 뜻 그대로 var선언문이나 function선언문을 해당 스코프의 가장 위쪽으로 끌어올리는 것처럼 해석하는 것이다. 아래 코드를 실행시키면 3번째 라인에서 호이스팅이 발생한다. 

따라서 y의 변수값에는 undefined "값이 할당되지 않았음을 의미하는 자료형" 이 출력 되어 버린다.

var x = 10;
document.write("x is " + x + ", y is " + y);
var y = 20; // hoisting

x is 10, y is undefined

var로 선언한 변수는 호이스팅이 발생하기에 변수를 선언하기 전에 사용해도 에러가 발생하지 않고, 그로 인하여 예상치 못한 결과가 발생할 수 있다.

 

var과 달리 let은 호이스팅이 발생하지 않는다. 다음은 위의 코드에서 var만 let으로 바꾼 코드이다.

let x = 10;
document.write("x is " + x + ", y is " + y);
let y = 20;

VM569:1 Uncaught SyntaxError: Identifier 'x' has already been declared

 

 

3. 'var'은 블록 스코프가 존재하지 않는다.

var은 블록 스코프가 존재하지 않는다. 따라서 마치 전역변수처럼 작동한다. 아래 코드를 보면 변수 i가 for 반복문에서 벗어났음에도 불구하고 여전히 살아 있음을 확인할 수 있다. 

for (var i = 0; i < 3; i++) {
document.write("Hello, JS! ");
}
document.write(i);

Hello, JS! Hello, JS! Hello, JS! 3

 

let을 사용해 선언한 변수는 var과 달리 선언한 블록에서만 유효하고 블록을 벗어나면 사용할 수 없게된다.

for (let j = 0; j < 3; j++) {
document.write("Hello, JS! ");
}
document.write(j);

VM1357:4 Uncaught ReferenceError: j is not defined
    at <anonymous>:4:16

다른 언어를 접해본 사람이라면 알겠지만 전역변수의 사용은 최대한 지양하는 편이 좋다. 왜냐하면 같은 변수 이름을 사용해서 이전에 있던 변수를 덮어쓰는 불상사가 발생할 수 있기 때문이다. 

 

앞서 알아본 바와 같이 var을 사용한 변수는 "재선언이 가능"하며, "호이스팅이 발생"하고, "블록 스코프가 존재하지 않아 전역 변수처럼 작동"하기에 ES6을 사용한다면 var보다 let을 사용하는 것이 권장된다.

 

#2 let vs const

var과 let의 차이점에 대해 알아 보았으니, let과 const의 차이점에 대해서 알아 보도록 하자. var과 let은 위의 단점들을 제외하고는 똑같이 작동하기에 var과 const의 차이점은 생략 하도록 하겠다.

const로 사용한 변수는 let과 달리 재할당이 불가능하다. 어찌보면 당연한 건데 애초에 const는 상수를 선언하기 위해 만들어진 예약어이기 때문이다.

let l = 10;
l = 20;
document.write(l);

20

 

변수를 const로 바꾸어 실행시켜 보면 에러가 발생한다.

const c = 10;
c = 20;

VM1511:2 Uncaught TypeError: Assignment to constant variable.
    at <anonymous>:2:3

 

#정리

var (재할당 O 재선언 O)

재선언이 가능하다.

호이스팅이 발생하기에 변수를 선언하기 전에 변수를 사용해도 에러가 발생하지 않는다.

블록 스코프가 존재하지 않기에 마치 전역변수처럼 작동한다.

let (재할당 O, 재선언 X)

재선언이 불가능하며, 호이스팅이 발생하지 않는다. 또한 블록 스코프가 존재하기에 해당 스코프를 벗어난 범위에서 변수에 접근 시 에러가 발생한다.

const (재할당 X, 재선언 X)

재할당 재선언 모두 불가능하다.

 

결론 : ES6문법을 사용한다면 var 보단 let을 사용하고, 재할당이 필요 없는 상수나 객체에는 const를 사용하자!