JavaScript의 var, let 및 const: 치트 시트

바르

var 문은 다음 규칙을 준수하는 JavaScript의 변수를 선언합니다.

은 기능 범위 또는 전역 범위입니다.

은 일시적 데드존의 영향을 받지 않습니다.

동일한 이름으로 window에 전역 속성을 생성합니다.

은 재할당 가능합니다.

은 재선언 가능합니다.

함수 범위 또는 전역 범위

var 전역 범위에 나타날 때 전역 변수를 생성합니다. 또한 동일한 이름으로 window에 전역 속성을 생성합니다.

var city = "Florence";

console.log(window.city); // "Florence"

함수 내에서 선언되면 변수는 해당 함수로 범위가 지정됩니다.

var city = "Florence";

function bubble() {
  var city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

console.log(city); // "Florence"

var 선언은 호이스팅 대상입니다.

function bubble() {
  city = "Siena";
  console.log(city);
  var city; // hoists
}

bubble(); // "Siena"

우발적인 전역 변수

var , let 또는 const 와 같이 명령문 없이 할당된 변수는 기본적으로 전역 변수가 됩니다.

function bubble() {
  city = "Siena";
  console.log(window.city);
}

bubble(); // "Siena"

이 동작을 무력화하기 위해 엄격 모드를 사용합니다.

"use strict";

function bubble() {
  city = "Siena";
  console.log(window.city);
}

bubble(); // ReferenceError: assignment to undeclared variable city

재할당 및 재선언 가능

var로 선언된 모든 변수는 나중에 다시 할당하거나 다시 선언할 수 있습니다. 재선언의 예:

function bubble() {
  var city = "Florence";
  var city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

재할당의 예:

function bubble() {
  var city = "Siena";
  city = "Florence";
  console.log(city);
}

bubble(); // "Florence"

허락하다

let 문은 다음 규칙을 준수하는 JavaScript의 변수를 선언합니다.

은 블록 범위입니다.

은 일시적 데드존의 영향을 받습니다.

window에 전역 속성을 생성하지 않습니다.

은 재할당 가능합니다.

은 재선언할 수 없습니다.

블록 범위

let로 선언된 변수는 window에 전역 속성을 생성하지 않습니다.

let city = "Florence";

console.log(window.city); // undefined

함수 내에서 선언되면 변수는 해당 함수로 범위가 지정됩니다.

let city = "Florence";

function bubble() {
  let city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

console.log(city); // "Florence"

블록 내부에서 선언되면 변수의 범위는 해당 블록으로 지정됩니다. block 문을 사용한 예:

let city = "Florence";

{
  let city = "Siena";
  console.log(city); // "Siena";
}

console.log(city); // "Florence"

if 블록이 있는 예:

let city = "Florence";

if (true) {
  let city = "Siena";
  console.log(city); // "Siena";
}

console.log(city); // "Florence"

var 대신 블록에 대해 신경 쓰지 않습니다.

var city = "Florence";

{
  var city = "Siena";
  console.log(city); // "Siena";
}

console.log(window.city); // "Siena"

일시적 데드존

let 선언은 끌어올릴 수 있지만 일시적인 데드존이 시작됩니다.

function bubble() {
  city = "Siena";
  console.log(city); // TDZ
  let city;
}

bubble();

// ReferenceError: can't access lexical declaration 'city' before initialization

일시적 데드 존은 초기화 전에 let 선언에 대한 액세스를 방지합니다. 또 다른 예:

function bubble() {
  console.log(city); // TDZ
  let city = "Siena";
}

bubble();

// ReferenceError: can't access lexical declaration 'city' before initialization

우리는 두 예에서 예외가 동일하다는 것을 알 수 있습니다: 일시적 데드존이 시작되었다는 증거.

주제에 대한 추가 리소스: Temporal dead zone demystified .

재할당 가능, 재선언 불가

let로 선언된 변수는 다시 선언할 수 없습니다. 다음을 던지는 재선언의 예:

function bubble() {
  let city = "Siena";
  let city = "Florence";
  console.log(city);
}

bubble(); // SyntaxError: redeclaration of let city

유효한 재할당의 예:

function bubble() {
  let city = "Siena";
  city = "Florence";
  console.log(city);
}

bubble(); // "Florence"

const

const 문은 다음 규칙을 준수하는 JavaScript의 변수를 선언합니다.

은 블록 범위입니다.

은 일시적 데드존의 영향을 받습니다.

window에 전역 속성을 생성하지 않습니다.

은 재할당할 수 없습니다.

은 재선언할 수 없습니다.

블록 범위

const로 선언된 변수는 window에 전역 속성을 생성하지 않습니다.

const city = "Florence";

console.log(window.city); // undefined

함수 내에서 선언되면 변수는 해당 함수로 범위가 지정됩니다.

const city = "Florence";

function bubble() {
  const city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

console.log(city); // "Florence"

블록 내부에서 선언되면 변수의 범위는 해당 블록으로 지정됩니다. 블록 문이 있는 예{}:

const city = "Florence";

{
  const city = "Siena";
  console.log(city); // "Siena";
}

console.log(city); // "Florence"

if 블록이 있는 예:

const city = "Florence";

if (true) {
  const city = "Siena";
  console.log(city); // "Siena";
}

console.log(city); // "Florence"

일시적 데드존

const 선언은 끌어올릴 수 있지만 일시적인 데드존이 시작됩니다.

function bubble() {
  console.log(city);
  const city = "Siena";
}

bubble();

// ReferenceError: can't access lexical declaration 'city' before initialization

재할당 불가, 재선언 불가

const로 선언된 변수는 재선언하거나 재할당할 수 없습니다. 재선언의 예 which throws:

function bubble() {
  const city = "Siena";
  const city = "Florence";
  console.log(city);
}

bubble(); // SyntaxError: redeclaration of const city

다음과 같은 재할당의 예:

function bubble() {
  const city = "Siena";
  city = "Florence";
  console.log(city);
}

bubble(); // TypeError: invalid assignment to const 'city'