자바스크립트 var , let , const 의 스코프 차이에 대해 알아보자.

개요

• 자바스크립트에서 변수를 선언할 수 있는 키워드는 var, let, const 3가지가 있다.
  • 엄밀히 따지자면, const 는 상수를 선언하는 키워드라고도 할 수 있다.
• 자바스크립트 코딩 시 무조건 var 의 사용은 지양해야 한다.
• var 와 let, const 의 가장 큰 차이는 스코프이다.
• var 는 Function Scope 혹은 Global Scope 에 사용된다.
  • 이는 많은 자바스크립트 개발자들이 실수할 여지를 만들어주었다.

예제 코드

var 는 블록 스코프를 지원하지 않는다.

if (Math.random() > 0.5) {
  var x = 1;
} else {
  var x = 2;
}

console.log(x); // window.x;

• 다른 언어를 사용하다 왔다면, 보통 위의 코드가 에러가 날 것이라고 생각한다.
  • 보통 블록에서도 스코프가 만들어진다 생각하기 때문이다.
• 위 코드에서 var 는 블록 스코프를 지원하지 않기 때문에 var 로 선언된 변수는 전역 변수가 되어버린다.
  • 이 때문에, 브라우저에서 실험하면, window.x 을 출력해보아도 1 혹은 2 가 출력된다.

let, const 는 블록 스코프를 지원한다.

if (Math.random() > 0.5) {
  const y = 1;
} else {
  const y = 2;
}

console.log(y); // ReferenceError: y is not defined

if (Math.random() > 0.5) {
  let z = 1;
} else {
  let z = 2;
}

console.log(z); // ReferenceError: z is not defined

블록 스코프가 지원되어 변수가 속한 블록({}) 이 끝나면, 스코프가 끝나고 더이상 해당 변수를 이용할 수 없다. 이 사실을 모르면 이 차이 하나로 많은 버그가 양산될 수 있다. 버그에 대한 예제는 추후 시간이 있을 때 천천히 글을 수정하며 추가할 것이다.

이유도 모른체 무지성으로 let, const 를 사용하기만 해도 사실 많은 버그를 예방할 수 있긴 하다.

레퍼런스

MDN - let
MDN - const
MDN - scoping with let and const