ZeroCho Blog

안녕하세요. 이번 시간부터 본격적으로 ES2015(ES6)에서 어떻게 자바스크립트가 바뀌었는지 알아보겠습니다!

먼저 변수를 선언할 때 var 외에도 const(constant, 상수)와 let이 생겼습니다.

const, let

기존 var과의 가장 큰 차이점은, const와 let은 함수스코프를 따르지 않고 블록스코프를 따른다는 겁니다. 스코프를 잘 모르신다면 이 글을 참고하세요. 지금까지 자바스크립트는 다른 언어와는 다르게 함수스코프를 사용하여 다른 언어를 사용하는 사람들이 적응하기가 힘들었는데, const와 let이 도입되어 적응하기 좀 수월해졌습니다.

블록스코프란 해당 변수를 해당 블록에서만 접근할 수 있는 것을 말합니다. var은 블록스코프가 아닌 함수스코프라서 if 블록과는 상관없이 접근할 수 있지만, const와 let은 블록 바깥에서는 접근할 수 없습니다.

if (true) {
  var x = 3;
}
console.log(x); // 3

if (true) {
  const y = 3;
}
console.log(y); // Uncaught ReferenceError: y is not defined

const와 let에서도 호이스팅이 일어나지만, var에서 일어나는 호이스팅과는 조금 다릅니다. var은 hoisting 때문에 코딩할 때 예기치 못한 상황이 자주 발생했죠. 변수를 선언한 곳보다 더 위에서 해당 변수에 접근할 수 있는 경우가 있었습니다. const와 let을 사용할 때는 선언한 곳보다 위에서 접근하는 것이 금지됩니다(에러 발생).

사실 호이스팅은 정의가 불분명한 용어입니다. 스펙에는 없지만 자바스크립트 동작을 설명하기 위해 만들어진 용어입니다. const와 let에도 호이스팅이 있다고 볼 수도 있습니다만, 호이스팅의 정의가 정해진 것이 아니라서 맞다 틀리다 판단할 수 없습니다. 그냥 const와 let은 var의 호이스팅과는 다르게 동작하며, TDZ(Temporal Dead Zone)이라는 현상을 갖고 있다고 알아두시는 게 좀 더 정확할 수 있습니다.

다음의 상황은 변수를 선언하기 전에 변수에 접근했는데도 에러가 나지 않는 현상을 보여줍니다.

(function() {
  console.log(x);
  var x = 10;
})(); // undefined;

하지만 const와 let은 그 현상을 차단했기 때문에 더 이상 변수를 선언한 곳보다 위에서는 변수에 접근이 불가능합니다.

(() => {
  console.log(z);
  const z = 10;
})(); // Uncaught ReferenceError: z is not defined

const와 let은 전역 스코프에서 선언 시 var과는 다르게 window나 global에 등록되지 않습니다.

var m = 1;
console.log(window.m); // 1
const n = 2;
console.log(window.n); // undefined

둘의 차이

const와 let의 차이는 간단합니다. 둘다 블록스코프를 따르지만, const는 한 번 초기화하면 다른 값을 대입할 수 없습니다. let은 기존의 var처럼 계속 값을 바꿔줄 수 있고요. const를 사용하면 절대 바꿔서는 안 되는 값을 실수로 바꾸는 것을 예방할 수 있겠죠?

const a = 100;
a = 101; // Uncaught TypeError: Assignment to constant variable.

let b = 100;
b = 101; // 101

하지만 조심해야 할 점은, const는 다시 대입하는 것만 막지, const에 할당된 객체나 배열의 요소를 바꾸는 것은 막지 않습니다. 즉 데이터의 주소값만 고정하는 겁니다.

const c = [1, 2, 3];
c[0] = 4;
c; // [4, 2, 3]
const d = {name: 'Zero'};
d.name = 'One';
d; // {name: 'One'} 

즉, =을 통한 대입만 막은 거죠. 이제 var 외에도 선택지가 두 개나 더 생겼으니 상황에 따라 선택하면 될 거 같습니다! 사실상 이제 var은 사용할 일이 없습니다. var의 기능은 let이 다 하거든요. const는 좀 더 제한적인 상황에서 사용하는 것이고요.

다음 시간에는 object의 변화에 대해 알아보겠습니다!