자바스크립트 Let(JavaScript Let)

let 키워드는 ES6 (2015)에 소개되었다.

• let 키워드로 선언된 변수는 재 선언될 수 없다.
• let 키워드로 선언된 변수는 반드시 변수를 사용하기 전에 선언돼있어야 한다.
• let 키워드로 선언된 변수는 블록 범위를 갖고 있다.

 

재선언 불가(Cannot be Redeclared)

let으로 선언된 변수는 재선언이 불가하며, 실수로라도 변수를 재선언할 수 없다.

let x = "John Doe";

let x = 0;

// SyntaxError: 'x' has already been declared

 

 

var로 선언된 변수는 재선언이 가능하다.

var x = "John Doe";

var x = 0;

 

 

---

 

 

블록 스코프(Block Scope)

ES6 (2015) 이전에, 자바스크립트에는 전역 스코프(Global Scope)와 함수 스코프(Function Scope)만 있었다.

ES6는 두 가지 중요한 새 자바스크립트 키워드인 let과 const를 선보였다.

이 두 키워드는 자바스크립트에서 블록 스코프를 제공한다.

{ } 블록 내에서 선언된 변수는 블록 밖에서 접근이 불가하다.

 

{
  let x = 2;
}
// x can NOT be used here

 

 

var 키워드로 선언된 변수는 블록 스코프를 갖지 않는다.

그래서 { } 블록 내에서 선언됐더라 하더라도 블록 밖에서 접근이 가능하다.

 

{
  var x = 2;
}
// x CAN be used here

 

 

---

 

 

변수 재선언(Redeclaring Variables)

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

블록 내에서 변수를 재선언하면 블록 밖에서도 다시 선언이 된다.

 

var x = 10;
// Here x is 10

{
var x = 2;
// Here x is 2
}

// Here x is 2

 

 

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

블록 내에서 변수를 선언해도 블록 밖에서는 다시 선언되지 않기 때문이다.

 

let x = 10;
// Here x is 10

{
let x = 2;
// Here x is 2
}

// Here x is 10

 

 

---

 

 

브라우저 지원(Browser Support)

let 키워드는 인터넷 익스플로러 11(IE) 또는 이전 버전에서 완전히 지원되진 않는다.

다음 표는 let 키워드를 완벽하게 지원하는 첫 번째 브라우저 버전을 정의한다.

Chrome 49	Edge 12	Firefox 44	Safari 11	Opera 36
Mar, 2016	Jul, 2015	Jan, 2015	Sep, 2017	Mar, 2016

 

 

---

 

 

재선언(Redeclaring)

var를 이용하여 자바스크립트 변수를 재선언하는것은 프로그램 어디에서나 허용된다.

 

var x = 2;
// Now x is 2

var x = 3;
// Now x is 3

 

 

let을 이용하여 한 블록 안에서 변수를 재선언하는것은 허용되지 않는다.

 

var x = 2;   // Allowed
let x = 3;   // Not allowed

{
let x = 2;   // Allowed
let x = 3;   // Not allowed
}

{
let x = 2;   // Allowed
var x = 3;   // Not allowed
}

 

그렇지만, let을 이용하여 다른 블록에서 재선언하는것은 허용된다.

 

let x = 2;   // Allowed

{
let x = 3;   // Allowed
}

{
let x = 4;    // Allowed
}

 

 

---

 

 

Let 호이스팅(Let Hoisting)

var로 정의된 변수는 맨 위에 올려지고 언제든 초기화가 가능하다.

변수가 선언되기 전에 변수 사용이 가능하다.

 

carName = "Volvo";
var carName;

 

 

let으로 정의된 변수는 블록 맨 위에 올려지긴 하나, 초기화되진 않는다.

변수가 선언되기 전에 let을 이용한 변수를 사용하게 되면 ReferenceError를 일으킨다.

 

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