var과let의 차이

머리가 들었을 때부터 var을 사용하지 않고 let을 쓰면 된다는 것을 알았기 때문에 var과 let의 차이에 별로 신경을 쓰지 않았다.
let과 var의 차이에 대해 다음과 같은 시도를 통해 이해를 깊이 있게 하였다.
퀴즈 형식이 되면 재미있을 것 같아서 프로그램의 결과를 숨겼어요.

var의 함수 역할 영역 확인

JavaScript

{
 var i = 2;
 { var i = 1; }
 console.log(i);
}

결과(열기 클릭)

1

JavaScript

{
 var i = 2;
 (function () { var i = 1; })();
 console.log(i);
}

결과(열기 클릭)

2

위의 두 가지 측면에서 볼 수 있듯이 var은 함수 범위이다.

var과 let의 상자 수가 다르다

JavaScript

{
 for (var i = 1; i < 4; i++) {
  setTimeout(function () { console.log(i) }, 100);
 }
}

결과(열기 클릭)

4
4
4

이 결과에서 볼 수 있듯이 var의 상자는 하나 있다.var i를 let i로 변경하면 희망대로 133으로 돌아갑니다.
처음에 let 때function(){}bindlet i라고 생각했는데 그게 아니었어요. let에 상자가 많았던 것 같아요.
이 일은 아래의 실험에서 알 수 있다.

밖에서 let의 값을 바꿔봤어요.

let은 Blockcop이라고 합니다.
블락코프의 let 값을 외부면접에서 변경해 보면 어떻게 되는지 알아봤다.
let값을 바꾸는 함수를 되돌려줍니다.
JavaScript

{
 var g = (function () {
  for (let i = 1; i < 4; i++) {
   setTimeout(function () { console.log(i) }, 100);
   if (i === 2) { var f = function (ii) { i = ii; } }
  }
  return f; // i===2のlet iを変更する関数を返す
 })();
 g(22); // i===2のlet iを変更する
}

결과(열기 클릭)

1
22
3

이 결과let i에 상자가 3개나 있다는 것을 알 수 있다.

let을 두 겹으로 만들어 볼게요.

JavaScript

{
 var g = (function () {
  for (let i = 1; i < 4; i++) {
   for (let j = 1; j < 3; j++) {
    setTimeout(function () { console.log(i, j) }, 100);
    if (i === 2 && j === 1) { var f = function (ii, jj) { i = ii; j = jj; } }
   }
  }
  return f; // i===2, j===1のlet i, let jを変更する関数を返す
 })();
 g(22, 11); // i===2, j===1のlet i, let jを変更する
}

결과(열기 클릭)

1 1
1 2
22 11
22 2
3 1
3 2

이 결과let i의상자는3개,let j의상자는6개였다.
for의 단수가 증가함에 따라let의 상자 수도 곱셈이 증가한다.

let의 상자가 증가하지 않는 경우

포의 초기화식에 let을 쓸 때만 let의 상자가 증가합니다.
JavaScript

{
 let i = 1; // ここにletを書く
 for (; i < 4; i++) {
  setTimeout(function () { console.log(i) }, 100);
 }
}

이 프로그램은 4번 출력합니다.
for의 초기화 공식에서let을 설명하지 않으면let의 상자가 증가하지만 for의 초기화 공식에서let을 설명하지 않으면let의 상자는 증가하지 않습니다.
JavaScript

{
 for (var i = 1; i < 4; i++) {
  var j = i;
  let k = i;
  setTimeout(function () { console.log(i, j, k) }, 100);
 }
}

이 프로그램

4 3 1
4 3 2
4 3 3

출력
그러니까 어떻게 된 거야?
var 변수는 함수 작용역을 가지고 함수의 첫머리에 상자를 만든다.
let 변수는 블록 코드 (block scope) 를 가지고 있으며, 각 블록 ({}의 괄호) 은 상자를 생성합니다.

결론

var에는 상자가 하나 있기 때문에 var의 메모리 효율은let보다 낫다(하지만 고장나기 쉽다).
그런 사람은 없을 것 같은데 기억 효율을 높이기 위해 var을 사용하는 사람이 있나요? 1
var의 상자는 하나 있고,let의 상자는 매우 많다.
var을 사용할 때 여러 상하문에서 var을 사용했는지 주의해야 합니다.

Q&A

Q1 상자의 이미지 상세 설명

let과 var은 상자 수의 차이로 표현됩니다. 상자의 이 인상을 좀 더 자세히 포착해 주시겠습니까?

비유가 아니라 설명이라면 상자는 메모리의 위치다.
let은 Blockcop이기 때문에 for의 반복에 대해 다른 상자를 준비했습니다.
var for에 대한 같은 상자를 반복해서 사용합니다.
var 시 이벤트 중 한 상자를 사용하고 싶을 때 순환이 다른 값으로 바뀌는 경우가 많습니다.
let의 단점은 메모리를 낭비하는 것이다. let의 장점은 고장이 잘 나지 않는다는 것이다.

왜 순환 후 i=4?

var과let의 상자 수가 다른 부분에 대해서 왜 콘솔에 4가 뜨죠?
i<4이기 때문에 최대 i는 3까지의 수치라고 생각합니다.
처리가 세 번 바뀌었는데 왜 i가 4로 표시되죠?

이것은 다른teratail 문제에서 for문의 제어 절차를 설명하기 위해 만든 그림이다.
변수i=3시 종료 조건i<4이 진짜가 되고 명령문 주체를 실행합니다.
이어'증감'을 집행하는i++은i=4으로, 종료조건i<4은가짜로, for문은 끝난다.
for 순환 후i=4.
let과 var의 차이를 알고 var↩를 사용하기 시작합니다.