let

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

let 명령문은 블록 스코프의 범위를 가지는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수도 있습니다.

시도해보기

구문

js
let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

매개변수

nameN

변수 이름. 모두 유효한 JavaScript 식별자여야 합니다.

valueN Optional

각각의 변수 선언에 대해, 유효한 JavaScript 표현식을 지정해 변수의 초기 값을 지정할 수 있습니다.

이 구문 대신 구조 분해 할당을 사용해서 변수를 선언할 수도 있습니다.

js
let { bar } = foo; // foo = { bar: 10, baz: 12 };
/* 10의 값을 가진 'bar' 변수를 생성 */

설명

let을 사용하면 블록 명령문이나 let을 사용한 표현식 내로 범위가 제한되는 변수를 선언할 수 있습니다. 이는 let이 var 키워드와 다른 점으로, var는 변수를 블록을 고려하지 않고 현재 함수 (또는 전역 스코프) 어디에서나 접근할 수 있는 변수를 선언합니다. 또한 let은 파서가 구문을 평가해야만 변수를 값으로 초기화(아래 참고)한다는 점도 var와 다릅니다.

const와 마찬가지로 let 역시 전역 범위 선언에 사용(최상위 스코프 선언)해도 window 객체에 새로운 속성을 추가하지 않습니다.

왜 키워드의 이름이 "let"이 됐는지에 대한 설명은 여기서 읽을 수 있습니다.

참고: let 변수가 가진 다양한 문제는, let 변수 선언을 현재 스코프의 맨 위에서 수행해서 피할 수 있습니다. (가독성에 영향을 줄 수 있습니다)

예제

스코프 규칙

let으로 선언한 변수는 자신을 선언한 블록과 모든 하위 블록을 스스로의 스코프로 가집니다. 이런 점에서는 let이 var와 유사합니다. 그러나 둘의 중요한 차이는, var의 경우 스코프가 '자신을 선언한 블록'이 아니라, 자신의 선언을 포함하는 함수라는 점입니다.

js
function varTest() {
  var x = 1;
  if (true) {
    var x = 2; // 같은 변수!
    console.log(x); // 2
  }
  console.log(x); // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2; // 다른 변수
    console.log(x); // 2
  }
  console.log(x); // 1
}

프로그램 최상위에서 사용할 경우 var는 전역 객체에 속성을 추가하지만 let은 추가하지 않습니다.

js
var x = "global";
let y = "global";
console.log(this.x); // "global"
console.log(this.y); // undefined

비공개 멤버 모사

생성자와 let을 함께 사용하면 클로저를 사용하지 않아도 비공개 멤버를 나타낼 수 있습니다.

js
var Thing;

{
  let privateScope = new WeakMap();
  let counter = 0;

  Thing = function () {
    this.someProperty = "foo";

    privateScope.set(this, {
      hidden: ++counter,
    });
  };

  Thing.prototype.showPublic = function () {
    return this.someProperty;
  };

  Thing.prototype.showPrivate = function () {
    return privateScope.get(this).hidden;
  };
}

console.log(typeof privateScope);
// "undefined"

var thing = new Thing();

console.log(thing);
// Thing {someProperty: "foo"}

thing.showPublic();
// "foo"

thing.showPrivate();
// 1

클로저를 사용하면 var를 써도 위와 동일한 은닉 패턴을 구현할 수 있습니다. 그러나 이 경우, 위 코드와 같은 단순 블록 스코프를 사용할 수 없으며 함수 스코프(보통 모듈 패턴의 IIFE)가 필요합니다.

재선언

같은 변수를 같은 함수나 블록 스코프 안에서 다시 선언하려고 시도하면 SyntaxError가 발생합니다.

js
if (x) {
  let foo;
  let foo; // SyntaxError
}

switch 명령문에는 블록이 하나밖에 없으므로 이 오류를 자주 마주칠 수 있습니다.

js
let x = 1;
switch (x) {
  case 0:
    let foo;
    break;

  case 1:
    let foo; // 재선언으로 인한 SyntaxError
    break;
}

그러나 분기에 블록을 배치하면 블록 스코프도 생성하므로 재선언으로 인한 오류가 발생하지 않습니다.

js
let x = 1;

switch (x) {
  case 0: {
    let foo;
    break;
  }
  case 1: {
    let foo;
    break;
  }
}

일시적 사각지대

let 변수는 초기화하기 전에는 읽거나 쓸 수 없습니다(선언 구문에 초기 값을 지정하지 않은 경우 undefined로 초기화함). 초기화 전에 접근을 시도하면 ReferenceError가 발생합니다.

참고: var 변수와 다른 점으로, var의 경우 선언 전에 접근할 시 undefined입니다.

변수 스코프의 맨 위에서 변수의 초기화 완료 시점까지의 변수는 "일시적 사각지대"(Temporal Dead Zone, TDZ)에 들어간 변수라고 표현합니다.

js
function do_something() {
  console.log(bar); // undefined
  console.log(foo); // ReferenceError
  var bar = 1;
  let foo = 2;
}

"일시적" 사각지대인 이유는, 사각지대가 코드의 작성 순서(위치)가 아니라 코드의 실행 순서(시간)에 의해 형성되기 때문입니다. 예컨대 아래 코드의 경우 let 변수 선언 코드가 그 변수에 접근하는 함수보다 아래에 위치하지만, 함수의 호출 시점이 사각지대 밖이므로 정상 동작합니다.

js
{
  // TDZ가 스코프 맨 위에서부터 시작
  const func = () => console.log(letVar); // OK

  // TDZ 안에서 letVar에 접근하면 ReferenceError

  let letVar = 3; // letVar의 TDZ 종료
  func(); // TDZ 밖에서 호출함
}

TDZ와 typeof

typeof 연산자를 TDZ 내의 let 변수에 사용해도 ReferenceError가 발생합니다.

js
console.log(typeof i); // ReferenceError
let i = 10;

선언조차 하지 않은 변수, 또는 undefined를 값으로 가진 변수와 다른 점입니다.

js
console.log(typeof undeclaredVariable); // undefined 출력

어휘적 스코프와 결합한 TDZ

아래 코드는 주석으로 표기한 지점에서 ReferenceError가 발생합니다.

js
function test() {
  var foo = 33;
  if (foo) {
    let foo = foo + 55; // ReferenceError
  }
}
test();

바깥 스코프의 var foo가 값을 가지므로 if 블록 또한 평가됩니다. 그러나 어휘적 스코프로 인해, var foo의 값은 블록 내에서 사용할 수 없습니다. 이곳의 foo 식별자는 let foo를 가리키기 때문입니다. 따라서 (foo + 55) 표현식은 let foo의 초기화가 끝나지 않은, 즉 TDZ의 내부이며 ReferenceError가 발생하게 되는 것입니다.

아래와 같은 코드에서는 이 현상으로 인해 상당한 혼란을 겪을 수 있습니다. 반복문의 let n of n.a는 for 블록의 스코프에 속하므로, 식별자 n.a는 반복문 스스로가 선언(let n)하는 n 객체의 a 속성을 가리킵니다. 그리고 n의 선언 후 초기화가 아직 끝나지 않았으므로 n.a는 let n의 TDZ에 속합니다.

js
function go(n) {
  // 이 n은 매개변수 n
  console.log(n); // Object {a: [1,2,3]}

  for (let n of n.a) {
    // ReferenceError
    console.log(n);
  }
}

go({ a: [1, 2, 3] });

기타 예제

블록 내에서 사용한 경우 let은 변수의 스코프를 해당 블록으로 제한합니다. var는 스코프를 함수로 제한한다는 차이에 주의하세요.

js
var a = 1;
var b = 2;

if (a === 1) {
  var a = 11; // 전역 변수
  let b = 22; // if 블록 변수

  console.log(a); // 11
  console.log(b); // 22
}

console.log(a); // 11
console.log(b); // 2

그러나 var와 let을 아래와 같이 사용하면 SyntaxError입니다. 호이스팅으로 인해 var가 블록 최상단으로 끌어올려져, 변수 재선언을 하는 것과 같아지기 때문입니다.

js
let x = 1;

{
  var x = 2; // 재선언으로 인한 SyntaxError
}

명세

Specification
ECMAScript Language Specification
# sec-let-and-const-declarations

브라우저 호환성

BCD tables only load in the browser

같이 보기