let 구문은 블록 유효 범위를 갖는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수도 있다.

Syntax

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

Parameters

var1, var2, …, varN
변수명. 유효한 식별자이면 가능하다.
value1, value2, …, valueN
변수의 초기값. 유효한 표현식이면 가능하다.

Description

let은 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언한다. 이는 var 키워드가 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언되는 것과 다른 점이다.

"let"을 사용해야 하는 이유에 대해서는 이어지는 링크를 참조하시오.

유효 범위 규칙

let 으로 선언된 변수는 변수가 선언된 블록 내에서만 유효하며, 당연하지만 하위 블록에서도 유효하다. 이러한 점에서는 letvar는 유사하지만, var는 함수 블록 이외의 블록은 무시하고 선언된다는 점이 다르다.

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
}

프로그램이나 함수의 최상위에서는 letvar은 서로 다르게 행동한다. let은 전역 객체의 속성 값을 생성하지 않는다.

var x = 'global';
let y = 'global';
console.log(this.x); // "global" 전역 객체의 속성 x를 생성
console.log(this.y); // undefined 전역 객체의 속성 y를 생성하지 않음

비공개 변수 모사

생성자와 함께 사용하여 클로저를 사용하지 않고 비공개 변수를 만들고 접근할 수 있다.

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

임시적인 사각 지역과 오류

같은 변수를 같은 함수나 블록 범위 내에서 재선언하면 SyntaxError가 발생한다.

if (x) {
  let foo;
  let foo; // SyntaxError thrown.
}

ECMAScript 2015에서는let선언 끌어올리기의 적용을 받지 않습니다. 이는 let 선언이 현재 실행되는 구간의 최상위로 옮겨지지 않는다는 것을 의미합니다. 따라서 변수가 초기화(선언)되기 전에 참조할 경우 ReferenceError가 발생합니다.(var로 선언된 변수는 undefined 값을 가지는 것과는 대조적입니다.) "임시적인 사각 지역"은 블록 시작 부분부터 변수 선언이 실행되기 전까지 입니다.

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

switch 구문을 사용할 때는 실제 블록이 하나 뿐이므로 중복 선언 오류가 발생하기 쉽습니다.

let x = 1;
switch(x) {
  case 0:
    let foo;
    break;
    
  case 1:
    let foo; // 재선언에 의한 SyntaxError.
    break;
}

하지만 case 조건을 새로운 블록으로 감싸면 위의 코드와는 다르게 재선언 오류가 발생하지 않습니다.

let x = 1;

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

임시적인 사각 지역과 typeof

선언되지 않은 변수와 undefined 값을 지닌 변수와는 다르게, 임시적인 사각 지역에 있는 변수에 변수형 확인을 위해 typeof을 사용하면 ReferenceError가 발생합니다:

// 'undefined' 출력
console.log(typeof undeclaredVariable);
// 'ReferenceError' 발생
console.log(typeof i);
let i = 10;

정적 유효 범위와 결합된 임시적인 사각 지역 예시

정적 유효 범위로 인해, 표현 (foo + 55) 내부의 "foo"는 33을 값으로 가지는 상위 블록의 foo가 아니라 if 블록의 foo로 해석됩니다. 해당 행에서 if 블록의 "foo"는 이미 정적 유효 범위에 생성되었지만, 선언의 초기화가 완료(선언 구문의 종료)되지 않았습니다. 따라서 여전히 임시적인 사각 지역에 해당됩니다.

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

이 현상은 다음과 같은 상황에서 혼란을 유발할 수 있습니다. 지시 구문  let n of n.a은 이미 for loop 블록에 속해 있으며, 구문자 "n.a"는 속성 'a'를 지시 구문 자기자신의 앞부분에 위치한 객체 'n'에서 참조하려 합니다. 해당 객체 'n'은 위와 마찬가지로 선언이 종료되지 않았기에 임시적인 사긱 지역에 해당합니다.

function go(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와의 차이점을 숙지하세요.

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

Specifications

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Let and Const Declarations' in that specification.
Standard Initial definition. Does not specify let expressions or let blocks.
ECMAScript Latest Draft (ECMA-262)
The definition of 'Let and Const Declarations' in that specification.
Draft  

Browser compatibility

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung InternetNode.js
Basic supportChrome Full support 49
Full support 49
No support 48 — 49
Notes Disabled
Notes Support outside of strict mode.
Disabled From version 48 until version 49 (exclusive): this feature is behind the Enable Experimental JavaScript Features preference. To change preferences in Chrome, visit chrome://flags.
No support 41 — 49
Notes
Notes Strict mode is required.
Edge Full support 12Firefox Full support 44
Notes
Full support 44
Notes
Notes Prior to Firefox 44, let is only available to code blocks in HTML wrapped in a <script type="application/javascript;version=1.7"> block (or higher version) and has different semantics (e.g. no temporal dead zone).
Notes Prior to Firefox 46, a TypeError is thrown on redeclaration instead of a SyntaxError.
Notes Firefox 54 adds support of let in workers.
IE Full support 11Opera Full support 17Safari Full support 10WebView Android Full support 49
Full support 49
No support 41 — 49
Notes
Notes Strict mode is required.
Chrome Android Full support 49
Full support 49
No support 48 — 49
Notes Disabled
Notes Support outside of strict mode.
Disabled From version 48 until version 49 (exclusive): this feature is behind the Enable Experimental JavaScript Features preference. To change preferences in Chrome, visit chrome://flags.
No support 41 — 49
Notes
Notes Strict mode is required.
Edge Mobile Full support 12Firefox Android Full support 44
Notes
Full support 44
Notes
Notes Prior to Firefox 44, let is only available to code blocks in HTML wrapped in a <script type="application/javascript;version=1.7"> block (or higher version) and has different semantics (e.g. no temporal dead zone).
Notes Prior to Firefox 46, a TypeError is thrown on redeclaration instead of a SyntaxError.
Notes Firefox 54 adds support of let in workers.
Opera Android Full support 17Safari iOS Full support 10Samsung Internet Android Full support 4.0nodejs Full support 6.0.0

Legend

Full support  
Full support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also

문서 태그 및 공헌자

이 페이지의 공헌자: Isitea, RingoKim
최종 변경자: Isitea,