let

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

Syntax

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

Parameters

var1, var2, …, varN

변수명. 유효한 식별자이면 가능하다.

value1, value2, …, valueN

변수의 초기값. 유효한 표현식이면 가능하다.

Description

let은  선언된 블록 유효 범위에 상관없이 전역 또는 함수 유효 범위를 갖는 var 키워드와는 달리, 변수가 사용되는 블록, 구문 또는 표현식 유효 범위를 갖는 변수를 선언한다.

블록 유효 범위와 let

블록 내에 변수를 정의하기 위해 let 키워드를  사용한다.

if (x > y) {
  let gamma = 12.7 + y;
  i = gamma * x;
}

let은 내장 함수(inner function)를 사용할 때 때때로 코드를 명확하게 한다.

var list = document.getElementById("list");

for (var i = 1; i <= 5; i++) {
  var item = document.createElement("LI");
  item.appendChild(document.createTextNode("Item " + i));

  let j = i;
  item.onclick = function (ev) {
    console.log("Item " + j + " is clicked.");
  };
  list.appendChild(item);
}

위 예제는 의도한대로 동작하는데, 5개의 익명 내장 함수가 5개의 각기 다른 변수 j를 참조하기 때문이다. 만약 let을 var로 대체하거나 변수 j를 삭제하고 단순히 변수 i를 내장 함수에서 사용할 경우 위 예제는 의도대로 동작하지 않음에 주의하라.

유효범위 규칙

let으로 선언한 변수는 변수를 선언한 블록과 그 내부 블록들에서 유효하다. 이럴 경우, let은 var와 같이 동작한다. 가장 큰 차이점은 var 변수의 유효 범위는 전체 외부 함수까지라는 점이다.

function varTest() {
  var x = 31;
  if (true) {
    var x = 71;  // same variable!
    console.log(x);  // 71
  }
  console.log(x);  // 71
}

function letTest() {
  let x = 31;
  if (true) {
    let x = 71;  // different variable
    console.log(x);  // 71
  }
  console.log(x);  // 31
}

프로그램 또는 함수의 최상위에서는 let은 var와 완전히 똑같이 동작한다. 예를 들어,

var x = 'global';
let y = 'global';
console.log(this.x);
console.log(this.y);

이 코드의 출력은 “global”을 두번 출력한다.

let의 일시적 사각 지대(Temporal dead zone)와 에러

동일한 함수 또는 블록 범위에서 동일한 변수를 재선언시 TypeError가 발생한다.

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

ECMAScript6에서는 let은 변수를 블록의 최상단으로 호이스팅하지만, 만약 블록 내에서 변수가 선언되기 전에 해당 변수를 참조할 경우 ReferenceError가 발생한다. 이 변수는 블록의 시작부터 선언되어질 때까지 “일시적 사각 지대”에 있다.

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

switch문 사용 시에는 하나의 기본 블록만이 있기 때문에 에러가 발생할 수 있다.

switch (x) {
  case 0:
    let foo;
    break;
    
  case 1:
    let foo; // TypeError for redeclaration.
    break;
}

for 루프에서 let으로 선언한 변수의 유효 범위

for 루프의 범위를 지역 변수의 유효 범위로 설정하기 위해 let 키워드를 사용할 수 있다. var 키워드를 for 루프에서 사용할 때 루프를 포함한 함수 전체에서 해당 변수가 유효한 것과는 다르다.

var i=0;
for ( let i=i ; i < 10 ; i++ ) {
  console.log(i);
}

유효 범위 규칙

for (let expr1; expr2; expr3) statement

이 예에서  let expr1으로 선언한 지역 변수들을 포함하는 암시적 블록이 expr2, expr3 그리고 statement를 둘러싸고 있다. 이것을 위 첫번째 루프에서 확인할 수 있다..

Examples

let vs var

블록 내에서 사용하는 경우, let은 변수의 유효 범위를 블록 내로 제한한다. var의 유효 범위는 변수가 선언된 함수 전체임을 참고하라.

var a = 5;
var b = 10;

if (a === 5) {
  let a = 4; // The scope is inside the if-block
  var b = 1; // The scope is inside the function

  console.log(a);  // 4
  console.log(b);  // 1
} 

console.log(a); // 5
console.log(b); // 1

루프 내에서의 let

루프의 범위를 지역 변수의 유효 범위로 설정하기 위해 (var를 이용하여 정의된) 전역 변수를 사용하는 대신 let 키워드를 사용 할 수 있다.

for (let i = 0; i<10; i++) {
  console.log(i); // 0, 1, 2, 3, 4 ... 9
}

console.log(i); // i is not defined

비표준 let 확장

let blocks

let 블록은 블록 외부에 있는 같은 이름의 변수의 값에 영향을 주지 않고, 블록의 범위 내에서 변수 값을 연결시키는 방법을 제공한다.

Syntax

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

Description

let 블록은 변수에 대한 지역 유효 범위 지정을 제공한다. 이는 0개 이상의 변수들을 하나의 코드 블록의 문법적 유효 범위 내로 바인딩하여 동작하는데 그렇지 않을 경우, 블록 구문과 정확히 동일하다. let블록 내에서 var를 사용하여 선언한 변수의 유효 범위는 여전히 let 블록 밖에 선언한 변수와 동일하니 이 점에 특히 주의하라. 이럴 경우 여전히 함수 유효 범위를 가지게 된다. let 블록 문법을 사용하는 경우, let에 다음에 괄호가 필요하다. 괄호를 포함하지 않을 경우 구문 오류가 발생한다.

Example

var x = 5;
var y = 0;

let (x = x+10, y = 12) {
  console.log(x+y); // 27
}

console.log(x + y); // 5

코드 블록에 대한 규칙은 Javascript의 다른 코드 블록 규칙과 동일하다. let 블록은 let으로 선언된 지역 변수들을 가질 수 있다.

유효 범위 규칙

let 블록을 이용하여 정의한 변수들의 유효 범위는 해당 let 블록과 같은 이름의 변수를 정의하지 않은 모든 내부 블록이다.

let expressions

let 표현식(expression)은 변수의 유효 범위를 하나의 표현식으로 설정할 수 있다.

Syntax

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

Example

변수의 유효 범위를 오직 하나의 표현식으로 설정하기위해 let을 사용할 수 있다.

var a = 5;
let(a = 6) console.log(a); // 6
console.log(a); // 5

유효 범위 규칙

let 표현식이 있을 때,

let (decls) expr

expr을 둘러싼 암시적인 블록이 있다.

Specifications

Browser compatibility

Firefox-specific notes

• SpiderMonkey44(Firefox 44 / Thunderbird 44 / SeaMonkey 2.41)에 앞선 버전에서, let은 <script type="application/javascript;version=1.7”>블록(또는 더 높은 버전)으로 둘러싸인 코드 블록 내에서만 사용할 수 있고 다른 의미를 갖는다. 
• Worker 코드 내에서의 지원은 dom.workers.latestJSVersion 플래그를 사용해야한다. let이 버전이 상관없이 지원된다면, 이 플래그는 후에 삭제될 것이다.
• SpiderMonkey의 let에 대한 ES6 준수는 bug 950547에서 트래킹하고 있다.

See also

• var
• const
• ES6 In Depth: let and const
• Breaking changes in let and const in Firefox 44.