var, let 그리고 const

이번 포스팅에는 var와 let, const에 대해서 정리해보자. 😊

💡 기존에 사용해왔던 var와 ES6에서 새롭게 등장한 키워드인 let, const의 차이점 위주로 작성할 예정입니다.

var vs let, const

기존 ES6 도입 전에는 변수 선언 키워드로 var만 존재했었다. 그렇다면 const와 let이 등장하게 된 배경은 무엇일까? var로는 해결하기 힘든 어떤 문제점이 있었던 것일까?

1. scope

var와 let, const가 가지는 가장 큰 차이점 중 하나는 scope이다. scope란 대부분의 언어에서 가지고 있는 개념으로, 식별자가 유효한 범위를 말한다.

var

우선 var에서의 scope를 살펴보자. 자바스크립트에서 var은 블록 레벨 scope가 아닌 함수 레벨의 scope만 인정한다. 즉 함수의 코드 블록만을 지역 scope로 인정한다!

따라서, 함수가 아닌 if문이나 for문 안에 선언한 변수들도 모두 전역변수가 된다. 다음 코드를 살펴보자.

var x = 1;

if (true) {
  var x = 10 // 블록 scope가 인정되지 않는다.
}
console.log(x); // 10

for (var i = 0; i < 100; i++) {
  // do nothing
}
console.log(i); // 100

위 코드를 살펴 보면, if문 블록 안에 선언된 x와 for 블록안에 선언된 i가 전역 변수로서 취급 되는 것을 볼 수 있다.

이처럼 var을 선언하면 의도치 않게 다수의 전역 변수를 만들게 되고, 코드가 길어지고 복잡해지면 예상하지 못한 스코프로 인해 개발자가 의도하지 않은 버그로 이어질 위험성이 있다.

let, const

let과 const 키워드는 블록 레벨 scope를 가질 수 있는 변수 선언 방식이다.

let x= 1;  // 전역변수
const y = 2;

if (true) {
  let x = 10 //지역변수
  const y = 20;
  console.log(x) // 10
  console.log(y) // 20
}

console.log(x); //1
console.log(y); // 2

위의 코드 실행 결과를 보면 if문 안에서 선언된 x, y는 지역변수로서 전역 블록에 선언된 x, y와 구별되는 것을 확인할 수 있다.

let 키워드로 선언한 변수는 모든 코드 블록을 지역 scope로 인정하는 블록 레벨 scope를 따른다! const도 마찬가지이다.

2. 변수 호이스팅

이번에는 변수 호이스팅 관점에서 var과 let,const의 차이를 알아보자!

var

var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작한다.

자바스크립트 엔진은 런타임 이전에 코드를 읽으며 var로 선언된 모든 변수를 메모리에 만들고 undefined로 초기화한다. 즉, 선언은 호이스팅 되지만 할당은 호이스팅 되지 않는다.

console.log(foo) // undefined
foo = 123
console.log(foo) /// 123
var foo;

위와 같은 코드는 실제로 변수 선언문이 선두로 끌어 올려지게 되어, 아래와 같이 동작한다.

var foo = undefined;
console.log(foo); // undefined
foo = 123;
console.log(foo) // 123

let

let도 런타임 이전에 선언이 실행되며 변수 호이스팅이 발생한다. 하지만 let은 코드가 변수 선언문에 도착하기 전에는 초기화가 진행되지 않으며 변수에 접근할 수 없다!

변수 선언문에 도착해서야 undefined로 초기화가 진행된다.

console.log(foo) 
// ReferenceError: Cannot access 'foo' before initialization
// var과 달리 선언문 전에 접근하려고 하면 error를 발생시킨다.

let foo; // 이 라인이 지나야 접근이 가능하다.
console.log(foo) // undefined

foo = 1;
console.log(foo) // 1

const

const의 경우도 let과 같지만 선언과 동시에 초기화를 해야한다는 차이점이 있다.

console.log(foo) // ReferenceError: Cannot access 'foo' before initialization

const foo = 1; // 여기에서야 변수가 초기화 됨
console.log(foo) // 1

하지만 역시 const도 처음 console.log(foo) 라인이 ReferenceError: Cannot access 'foo' before initialization 를 발생 시키는 것으로 보아 변수 호이스팅이 발생 한다는 것을 확인할 수 있다.

++ 20-12-25 추가!
실행 컨텍스트를 공부했더니 변수 호이스팅의 원리를 더 쉽게 이해할 수 있었다. (자세한 원리가 궁금하신 분들은 실행 컨텍스트 포스팅을 읽어보세요!)

3. 전역객체

var 키워드로 선언한 전역 변수, 전역 함수, 그리고 선언하지 않은 변수에 값을 할당한 암묵적 전역은 전역 객체 window의 프로퍼티가 된다

var x = 1;
console.log(window.x); // 1
console.log(x); // 1

반면 let과 const 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다.

let x = 1;
const y = 2;

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

console.log(window.y); // undefined
console.log(y); //2

마치며

var이 가지고 있었던 여러가지 문제들을 해결하기 위해 let과 const가 나온 만큼,
ES6에서는 var 사용을 지양하고 let과 const를 사용하도록 하자!