JavaScript let

let 키워드는 ES6(2015)에서 도입되었습니다.

let으로 정의된 변수는 다시 선언할 수 없습니다.

let으로 정의된 변수는 사용하기 전에 선언해야 합니다.

let으로 정의된 변수는 블록 범위를 갖습니다.

재선언 불가

let으로 정의된 변수는 재선언할 수 없습니다.

let은 아래 작업을 수행할 수 없습니다.

예제 1

let x = "John Doe";

let x = 0;

// SyntaxError: 'x' has already been declared

하지만 var은 가능합니다.

var x = "John Doe";

var x = 0;

블록 범위

ES6(2015) 이전 JavaScript에는 글로벌 범위와 함수 범위만 있었습니다.

ES6는 두 가지 중요한 새로운 자바스크립트 키워드(let과 const)를 도입했습니다.

이 두 키워드는 JavaScript에서 블록 범위 (Block Scope)를 제공합니다.

{ } 블록 내에서 선언된 변수는 블록 외부에서 액세스할 수 없습니다.

예제 2

{
  let x = 2;
}
// x 는 중괄호 밖에서 사용할 수 없습니다.

var 키워드로 선언된 변수는 블록 범위를 가질 수 없습니다.

{ } 블록 내에서 선언된 변수는 블록 외부에서 액세스할 수 있습니다.

예제 3

{
  var x = 2;
}
// x 는 중괄호 밖에서 사용할 수 있습니다.

변수 재선언

var 키워드를 사용하여 변수를 재선언하면 문제가 발생할 수 있습니다.

블록 내부의 변수를 재선언하면 블록 외부의 변수도 재선언됩니다.

예제 4

var x = 10;
// x : 10

{
var x = 2;
// x : 2
}

// x : 2

이 문제는 let 키워드를 사용하여 변수를 재선언하면 해결할 수 있습니다.

블록 내에서 변수를 재선언해도 블록 외부에서 변수가 다시 재선언되지 않습니다.

예제 5

let x = 10;
// x : 10

{
let x = 2;
// x : 2
}

// x : 10

지원 브라우저

let 키워드는 Internet Explorer 11 이전 버전에서는 완전히 지원되지 않습니다.

다음 표에 let 키워드를 완전히 지원하는 최소 브라우저 버전을 나타냅니다.

재선언

JavaScript 변수를 var를 사용하여 재선언하는 것은 프로그램 내 어디에서나 허용됩니다.

예제 6

var x = 2;
// x : 2

var x = 3;
// x : 3

let을 사용하면 동일한 블록에 있는 변수를 재선언할 수 없습니다.

예제 7

var x = 2;    // 가능
let x = 3;    // 불가능

{
let x = 2;    // 가능
let x = 3     // 불가능
}

{
let x = 2;    // 가능
var x = 3     // 불가능
}

다른 블록에서 let변수를 재선언하는 것은 허용됩니다.

예제 8

let x = 2;    // 가능

{
let x = 3;    // 가능
}

{
let x = 4;    // 가능
}

let 호이스팅

var로 정의된 변수는 맨 위로 이동하며 언제든지 초기화할 수 있습니다.

의미: 변수를 선언하기 전에 사용할 수 있습니다.

예제 9

carName = "Volvo";
var carName;

let으로 정의된 변수도 블록의 맨 위로 이동하지만 초기화되지 않습니다.

의미: let 변수를 선언하기 전에 사용하면 ReferenceError가 발생합니다.

예제 10

carName = "Saab";
let carName = "Volvo";