JavaScript Let

ECMAScript 2015

ECMAScript 2015은 두 가지 중요한 JavaScript 새로운 키워드를 도입했습니다:let 그리고 const.

이 두 가지 키워드는 JavaScript에서 블록 범위를 제공합니다（Block Scope）변수（및 상수）.

ES2015 이전에는 JavaScript는 두 가지 유형의 범위만 있었습니다:전역 범위그리고함수 범위.

전역 범위

전역（함수 외에서）선언된 변수는전역 범위.

예제

var carName = "porsche";
// 이 코드에서 carName를 사용할 수 있습니다
function myFunction() {
  // 이 코드에서도 carName를 사용할 수 있습니다
}

직접 시도해 보세요

전역변수는 JavaScript 프로그램의 어디서든 접근할 수 있습니다.

함수 범위

지역（함수 내에서）선언된 변수는함수 범위.

예제

// 이 코드에서 carName를 사용할 수 없습니다
function myFunction() {
  var carName = "porsche";
  // 여기서 code를 사용할 수 있습니다 carName
}
// 이 코드에서 carName를 사용할 수 없습니다

직접 시도해 보세요

지역변수는 선언된 함수 내에서만 접근할 수 있습니다.

JavaScript 블록 범위

을 통해 var 키워드 선언된 변수는 블록이 없습니다범위.

블록 {} 블록 내 선언된 변수는 블록 외에서 접근할 수 있습니다.

예제

{ 
  var x = 10; 
}
// 여기서 x를 사용할 수 있습니다

ES2015 이전에는 JavaScript는 블록 범위가 없었습니다.

사용할 수 있습니다 let 키워드 선언은 블록 범위의 변수를 가집니다.

블록 {} 블록 내 선언된 변수는 블록 외에서 접근할 수 없습니다:

예제

{ 
  let x = 10;
}
// 여기서 x를 사용할 수 없습니다

변수를 다시 선언

사용 var 키워드를 다시 선언하면 문제가 발생합니다.

블록 내에서 변수를 다시 선언하면 블록 외의 변수도 다시 선언됩니다:

예제

var x = 10;
// 여기서 x는 10입니다
{ 
  var x = 6;
  // 여기서 x는 6입니다
}
// 여기서 x는 6입니다

직접 시도해 보세요

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

블록 내에서 변수를 다시 선언하면 블록 외의 변수는 다시 선언되지 않습니다:

예제

var x = 10;
// 여기서 x는 10입니다
{ 
  let x = 6;
  // 여기서 x는 6입니다
}
// 여기서 x는 10입니다

직접 시도해 보세요

브라우저 지원

Internet Explorer 11 또는 이전 버전은 부분적으로 지원하지 않습니다. let 키워드를 정의합니다.

다음 표는 첫 번째 완전히 지원하는 let 키워드의 브라우저 버전:

Chrome 49 IE / 엣지 12 파이어폭스 44 사파리 11 오페라 36
2016년 3월 2015년 7월 2015년 1월 2017년 9월 2016년 3월

루프 범위

루프에서 사용 var:

예제

var i = 7;
for (var i = 0; i < 10; i++) {
  // 일부 문장
}
// 여기서, i는 10입니다

직접 시도해 보세요

루프에서 사용 let:

예제

let i = 7;
for (let i = 0; i < 10; i++) {
  // 일부 문장
}
// 여기서 i는 7입니다

직접 시도해 보세요

첫 번째 예제에서, 루프에서 사용하는 변수는 var 루프 외의 변수를 다시 선언합니다.

두 번째 예제에서, 루프에서 사용하는 변수는 let 루프 외의 변수를 다시 선언하지 않습니다.

루프에서 let 변수 i를 선언하면, 그 변수 i는 루프 내에서만 보이게 됩니다.

함수 범위

함수 내에서 변수를 선언할 때 사용 var 그리고 let 매우 유사합니다.

그들은 모두함수 범위:

function myFunction() {
  var carName = "porsche";   // 함수 범위
}
function myFunction() {
  let carName = "porsche";   // 함수 범위
}

전역 범위

또는 블록 외에서 선언된 경우 var 그리고 let 매우 유사합니다.

그들은 모두전역 범위:

var x = 10;       // 전역 범위
let y = 6;       // 전역 범위

HTML의 전역 변수

JavaScript를 사용하는 경우 전역 범위는 JavaScript 환경입니다.

HTML에서 전역 범위는 window 객체입니다.

을 통해 var 키워드로 정의된 전역 변수는 window 객체에 속합니다:

예제

var carName = "porsche";
// 이 코드는 window.carName를 사용할 수 있습니다

직접 시도해 보세요

을 통해 let 키워드로 정의된 전역 변수는 window 객체에 속하지 않습니다:

예제

let carName = "porsche";
// 이 코드는 window.carName를 사용할 수 없습니다

직접 시도해 보세요

재선언

프로그램의 어느 위치에서든 사용할 수 있습니다 var JavaScript 변수 재선언:

예제

var x = 10;
// 지금, x는 10입니다
var x = 6;
// 지금, x는 6입니다

직접 시도해 보세요

동일한 범위或在 동일한 블록에서 let 다시 선언 var 변수는 불허됩니다:

예제

var x = 10;       // 허용
let x = 6;       // 불가
{
  var x = 10;   // 허용
  let x = 6;   // 불가
}

동일한 범위或在 동일한 블록에서 let 다시 선언 let 변수는 불허됩니다:

예제

let x = 10;       // 허용
let x = 6;       // 불가
{
  let x = 10;   // 허용
  let x = 6;   // 불가
}

동일한 범위或在 동일한 블록에서 var 다시 선언 let 변수는 불허됩니다:

예제

let x = 10;       // 허용
var x = 6;       // 불허
{
  let x = 10;   // 허용
  var x = 6;   // 불허
}

다른 범위나 블록에서 let 변수를 다시 선언하는 것은 허용됩니다:

예제

let x = 6;       // 허용
{
  let x = 7;   // 허용
}
{
  let x = 8;   // 허용
}

직접 시도해 보세요

키오스팅

을 통해 var 선언된 변수는키오스팅톱으로. 키오스팅(Hoisting)이 무엇인지 모르신다면, 우리의 키오스팅 장을 공부하세요.

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

예제

// 여기서는 carName을 사용할 수 있습니다
var carName;

직접 시도해 보세요

을 통해 let 정의된 변수는 톱으로 提升되지 않습니다.

선언할 때 let 변수를 사용하기 전에 선언하지 않으면 ReferenceError가 발생합니다.

변수는 블록의 시작에서부터 선언까지 '임시 사망 区'에 있습니다:

예제

// 여기서는 carName을 사용할 수 없습니다
let carName;