차이 무엇 let과 var?

• var명령문을 사용하여 정의 된 변수 는 함수 시작부터 정의 된 함수 전체 에 알려져 있습니다 .(*)
• let명령문을 사용하여 정의 된 변수 는 정의 된 순간부터 정의 된 블록 에서만 알 수 있습니다 . (**)

차이점을 이해하려면 다음 코드를 고려하십시오.

// i IS NOT known here
// j IS NOT known here
// k IS known here, but undefined
// l IS NOT known here

function loop(arr) {
    // i IS known here, but undefined
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here

    for( var i = 0; i < arr.length; i++ ) {
        // i IS known here, and has a value
        // j IS NOT known here
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    };

    // i IS known here, and has a value
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here

    for( let j = 0; j < arr.length; j++ ) {
        // i IS known here, and has a value
        // j IS known here, and has a value
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    };

    // i IS known here, and has a value
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here
}

loop([1,2,3,4]);

for( var k = 0; k < arr.length; k++ ) {
    // i IS NOT known here
    // j IS NOT known here
    // k IS known here, and has a value
    // l IS NOT known here
};

for( let l = 0; l < arr.length; l++ ) {
    // i IS NOT known here
    // j IS NOT known here
    // k IS known here, and has a value
    // l IS known here, and has a value
};

loop([1,2,3,4]);

// i IS NOT known here
// j IS NOT known here
// k IS known here, and has a value
// l IS NOT known here

여기에서 변수 j는 첫 번째 for 루프에서만 알려져 있지만 이전과 이후에는 알려지지 않았습니다. 그러나 우리의 변수i 는 전체 기능에 알려져 있습니다.

또한 블록 범위 변수는 게양되지 않았기 때문에 선언되기 전에 알 수 없습니다. 또한 동일한 블록 내에서 동일한 블록 범위 변수를 다시 선언 할 수 없습니다. 이렇게하면 블록 범위 변수가 전역 또는 기능 범위 변수보다 오류가 덜 발생합니다.이 변수는 게양되어 여러 선언의 경우 오류가 발생하지 않습니다.

let오늘 사용하는 것이 안전 합니까?

어떤 사람들은 미래에 let 문만 사용할 것이며 var 문은 더 이상 사용되지 않을 것이라고 주장합니다. JavaScript 전문가 인 Kyle Simpson 은 이것이 사실이 아니라고 믿는 이유에 대해 매우 정교한 기사를 썼습니다 .

그러나 오늘날에는 그렇지 않습니다. 실제로, 우리는 실제로 사용하기에 안전한지 스스로에게 물어볼 필요가 있습니다.let 진술 . 해당 질문에 대한 답변은 환경에 따라 다릅니다.

• 서버 측 JavaScript 코드 ( Node.js )를 작성하는 경우 안전하게 사용할 수 있습니다.let 작성 명령문을 .

• 클라이언트 측 JavaScript 코드를 작성하고 Traceur 또는 babel-standalone 과 같은 브라우저 기반 변환기를 사용하는 경우 안전하게 사용할 수 있습니다.let 명령문을 있지만 코드는 성능 측면에서 최적 일 수 있습니다.

• 클라이언트 측 JavaScript 코드를 작성하고 traceur 쉘 스크립트 또는 Babel 과 같은 노드 기반 변환기를 사용하는 경우 안전하게 사용할 수 있습니다.let 명령문을 . 브라우저는 변환 된 코드에 대해서만 알기 때문에 성능 단점이 제한되어야합니다.

• 클라이언트 측 JavaScript 코드를 작성 중이고 트랜스 파일러를 사용하지 않는 경우 브라우저 지원을 고려해야합니다.

  전혀 지원하지 않는 브라우저가 여전히 있습니다 let:

브라우저 지원을 추적하는 방법

let이 답변을 읽을 당시의 진술을 지원하는 브라우저에 대한 최신 개요는 이 Can I Use페이지를 참조 하십시오 .

(*) JavaScript 변수가 들어 있기 때문에 전역 및 기능적으로 범위가 지정된 변수를 선언하기 전에 초기화하고 사용할 수 있습니다 .이것은 선언이 항상 범위의 맨 위에 있다는 것을 의미합니다.

(**) 블록 범위 변수는 게양되지 않습니다

답변

{
  let a = 123;
};

console.log(a); // ReferenceError: a is not defined

var globalVariable = 42;
let blockScopedVariable = 43;

console.log(globalVariable); // 42
console.log(blockScopedVariable); // 43

console.log(this.globalVariable); // 42
console.log(this.blockScopedVariable); // undefined

(() => {
  var functionScopedVariable = 42;
  let blockScopedVariable = 43;

  console.log(functionScopedVariable); // 42
  console.log(blockScopedVariable); // 43
})();

console.log(functionScopedVariable); // ReferenceError: functionScopedVariable is not defined
console.log(blockScopedVariable); // ReferenceError: blockScopedVariable is not defined

{
  var globalVariable = 42;
  let blockScopedVariable = 43;
  console.log(globalVariable); // 42
  console.log(blockScopedVariable); // 43
}

console.log(globalVariable); // 42
console.log(blockScopedVariable); // ReferenceError: blockScopedVariable is not defined

for (var i = 0; i < 3; i++) {
  var j = i * 2;
}
console.log(i); // 3
console.log(j); // 4

for (let k = 0; k < 3; k++) {
  let l = k * 2;
}
console.log(typeof k); // undefined
console.log(typeof l); // undefined
// Trying to do console.log(k) or console.log(l) here would throw a ReferenceError.

// Logs 3 thrice, not what we meant.
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}

// Logs 0, 1 and 2, as expected.
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 0);
}

console.log(noTDZ); // undefined
var noTDZ = 43;
console.log(hasTDZ); // ReferenceError: hasTDZ is not defined
let hasTDZ = 42;

var a;
var a; // Works fine.

let b;
let b; // SyntaxError: Identifier 'b' has already been declared

var c;
let c; // SyntaxError: Identifier 'c' has already been declared

const a = 42;
a = 43; // TypeError: Assignment to constant variable.

const obj = {};
obj.a = 42;
console.log(obj.a); // 42

const a; // SyntaxError: Missing initializer in const declaration

"use strict";
console.log("var:");
for (var j = 0; j < 2; j++) {
  console.log(j);
}

console.log(j);

console.log("let:");
for (let i = 0; i < 2; i++) {
  console.log(i);
}

console.log(i);