자바스크립트에서 var의 대체인 let의 도입과 그 이유

 

"자바스크립트에서 var와 let은 모두 변수를 선언하는 키워드 입니다.

그러나 let은 var보다 블록 스코프(block scope)를 지원하고, 호이스팅(hoisting)이 발생하지 않아 좀 더 예측 가능한 동작을 제공합니다.

이러한 이유로 let이 var의 대안으로 사용되게 되었습니다."

 

블록스코프

변수는 접근이 가능한 스코프를 가지고 있습니다.

var는 함수 스코프를 가지고 있어서 블록 외부에서도 접근이 가능합니다.

let은 블록 스코프가 적용되어 블록 내에서만 접근을 허용 합니다.

var 의 경우

위의 코드에서 var로 선언된 변수 x는 블록 내에서 선언되었음에도 전역 스코프에 영향을 미치게 됩니다.

이는 예상치 못한 변수의 노출로 인한 오류를 유발할 수 있습니다.

if (true) {
  var x = 10;
}

console.log(x); // 10
//if문 블록내에서 선언된 변수인데 블록 외부에서 접근이 됨.

 

let 의 경우

반면에 let은 블록 스코프를 따르기 때문에 블록 내에서 선언된 변수는 블록 외부에서 접근할 수 없습니다.

if (true) {
  let y = 20;
}

// y 가 정의되지 않았다고 에러가 난다.
console.log(y); // ReferenceError: y is not defined

 

호이스팅

호이스팅이란 변수나 함수가 선언될 때 최상단으로 가는 것을 말합니다.

코드상으로 아래에 선언 했지만 위에서 선언되는 것을 말합니다.

 

var 의 경우

var로 선언된 변수는 호이스팅에 의해 선언이 끌어올려지기 때문에 변수를 선언하기 전에 참조해도 에러가 발생하지 않습니다.

하지만 값을 할당되기 전에 undefined로 초기화 됩니다.

console.log(a); // undefined
var a = 5;
console.log(a); // 5

 

let 의 경우

반면에 let은 호이스팅이 발생하지만 초기화가 이루어지지 않아 변수를 참조할 때 에러가 발생합니다.

console.log(b); // ReferenceError: b is not defined
let b = 10;
console.log(b); // 10

마무리

let 은 블록 스코프를 지원하고 호이스팅 문제를 완화하여 코드의 가독성과 예측성을 향상 시킵니다.

따라서 ES6에서는 let을 사용하여 변수를 선언하는 것을 권장합니다.