개요

ES6에는 다음과 같은 두 가지 정의 변수 키워드가 추가되었습니다.let는 새로운 const, var의 간단한 상량 성명이다.

function f() {
  {
    let x;
    {
      // okay, block scoped name
      const x = "sneaky";
      // error, const
      x = "foo";
    }
    // error, already declared in block
    let x = "inner";
  }
}

let, var 블록 레벨 역할 영역 구현

const, let 생성된 변수는 모두 블록 레벨 작용 영역입니다. 가장 깊은 코드 블록만 존재합니다.

function func() {
    if (true) {
        let tmp = 123;
        // const tmp = 123;
    }
    console.log(tmp); // ReferenceError: tmp is not defined
}
console.log(tmp);// ReferenceError: tmp is not defined

이에 비해 const 함수역을 성명했다.

function func() {
    if (true) {
        var tmp = 123;
    }
    console.log(tmp); // 123
}
func()
console.log(tmp); // tmp is not defined

면접 문제: 순환 중 타이머 클러치

for(var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i) //5, 5, 5, 5, 5
  }, 0)
}
console.log(i) //5 i 

// var let 
for(let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i) // 0,1,2,3,4
  }, 0)
}
console.log(i)//i is not defined i 

for 순환에서 var가 설명한 순환 변수를 사용하면 순환체가 현재의 함수를 오염시킨다.

let, const 일시적 사구 (temporal dead zone)

var, let 성명된 변수는 일시적인 사구를 가지고 있습니다. 성명이 실행될 때까지 역할 영역에 들어가면 접근할 수 없습니다.간단한 설명:

if (true) {
  // TDZ
  console.log(a) // Uncaught ReferenceError: Cannot access 'a' before initialization
  let a = 1
  // const a = 1
}

if (true) { // enter new scope, TDZ starts
    // Uninitialized binding for `tmp` is created

    tmp = 'abc'; // ReferenceError
    console.log(tmp); // ReferenceError

    let tmp; // TDZ ends, `tmp` is initialized with `undefined`
    console.log(tmp); // undefined

    tmp = 123;
    console.log(tmp); // 123
}

다음 예는 데드 존(dead zone)이 진짜 짧은 시간 (시간 기반) 과 공간 조건의 제한을 받지 않는 (위치 기반) 을 보여 줍니다.

if (true) { // enter new scope, TDZ starts
    const func = function () {
        console.log(myVar); // OK!
    };

    // Here we are within the TDZ and
    // accessing `myVar` would cause a `ReferenceError`

    let myVar = 3; // TDZ ends
    func(); // called outside TDZ
}

const 변수 향상

JavaScript에서 우리가 일반적으로 말하는 역할 영역은 함수 역할 영역이다. var 성명의 변수를 사용하면 코드의 어느 부분에서든 현재 역할 영역의 맨 위로 올라간다. 이런 행위를 변수 향상(Hoisting)이라고 부른다
다음 코드는 함수의 변수 향상을 보여 줍니다.

{ // Enter a new scope

    console.log(foo()); // hello, due to hoisting
    function foo() {
        return 'hello';
    }
}

즉, 함수 내부에서 성명된 변수는 모두 함수의 시작으로 올라가고, 전역의 성명은 전역 작용역의 맨 위로 올라간다.

function test() {
    console.log('1: ', a) //undefined
    if (false) {
      var a = 1
    }
    console.log('3: ', a) //undefined
}

test()

실제 실행할 때 상기 코드의 변수 a는 함수 맨 위로 올라가 성명한다. 만약에 f문장의 조건이false라고 해도 a의 향상에 영향을 주지 않는다.

function test() {
    var a
    //a 
    console.log('1: ', a) //undefined
    if (false) {
      a = 1
    }
    //a 
    console.log('3: ', a) //undefined
}

중첩 함수의 경우 변수는 가장 가까운 함수의 상단까지만 올라가고 외부 함수는 올라가지 않는다.

//b a ， test。
function test() {
    function a() {
      if (false) {
        var b = 2
      }
    }
    console.log('b: ', b)
}

test() //b is not defined

반복 선언을 허용하지 않음

const 같은 역할 영역에서 같은 변수를 반복해서 설명하는 것을 허용하지 않습니다.

//  
function func() {
  let a = 10;
  var a = 1;
}

//  
function func() {
  let a = 10;
  let a = 1;
}

따라서 함수 내부에서 함수를 다시 성명할 수 없다

function func(arg) {
  let arg;
}
func() //   Identifier 'arg' has already been declared

function func(arg) {
  {
    let arg;
  }
}
func() //  

var 명령

일반적으로 장면:

const start = 'hi all';

const getName = () => {
  return 'jelly';
};

const conf = {
  fav: 'Coding'
};

//  
const msg = `${start}, my name is ${getName()}, ${conf.fav} is my favourite`;

네가 모를 수도 있는 일:

// 1.  
const wantToSay = `I'm a "tbfed"`;

// 2.  
const slogan = 
`
I have a dream today!
`;

//  HTML
const resultTpl = 
`
  

    
...
  
`;

let, let, const가 뭐가 달라요?

공통점: var, let, const 성명된 변수는 var에 의해 성명될 수 없다.

차이점:

변수 승급: let 성명된 변수는 변수 승급이 존재한다. 즉, 변수는 성명하기 전에 호출할 수 있고 값은undefined이다.const, delete 변수 증가는 존재하지 않습니다. 즉, 그들이 성명한 변수는 반드시 성명 후에 사용해야 합니다. 그렇지 않으면 오류가 발생할 수 있습니다.
일시적 사구: var 일시적 사구는 존재하지 않는다.let, const에는 일시적인 사구가 존재하며, 성명 변수를 기다려야만 이 변수를 획득하고 사용할 수 있다.
중복 성명: var 중복 성명 허용;let, const 같은 역할 영역에서는 중복 선언을 허용하지 않습니다.
성명의 변수 수정: var 및 lat 성명의 변수를 수정할 수 있습니다.const 읽기 전용 상수를 성명하는데, 일단 성명하면 상수의 값은 바꿀 수 없다.
var/let/const, 블록 레벨 역할 영역, TDZ, 변수 향상