Var vs Let: 큰 혼란을 풀어보자!

Source: Dev.to

“let”과 “var” 개념에 대한 명확한 생각입니다.

Let

아마도 let이 블록‑스코프라는 말을 들어보셨을 겁니다. 루프, 함수, 클로저에서 정확히 어떻게 동작하는지 살펴봅시다.

Loop Example (Per‑Iteration New Variable)

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// Output: 0, 1, 2

Function Example (Block Shadowing)

function test() {
  let x = 10; // 외부 x

  if (true) {
    let x = 20; // 새로운 x (외부 x를 가림)
    console.log(x); // 20
  }

  console.log(x); // 10 (외부 x는 변함 없음)
}

let 변수는 블록이 끝난 후 외부 스코프에서 접근할 수 없습니다.

Closure Example (Each Block Independent)

function createClosures() {
  const closures = [];

  for (let i = 0; i < 3; i++) {
    closures[i] = () => console.log(i); // 각 i마다 자체 클로저
  }

  closures[0](); // 0
  closures[1](); // 1
  closures[2](); // 2
}

클로저는 외부 함수의 스코프 변수를 기억하는 함수입니다.

Var

var와 관련된 가장 큰 혼란은 루프에서의 동작입니다.

Loop Example

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

단계별 설명:

1. 반복 1: var i = 0 → 변수 하나가 생성됩니다.
2. 반복 2: i = 1 → 같은 변수이며 값이 바뀝니다.
3. 반복 3: i = 2 → 같은 변수이며 값이 바뀝니다.
4. 루프 종료: i = 3 → 최종 값.

세 개의 setTimeout이 모두 루프가 끝난 뒤 실행되므로 console.log(i)는 3을 출력합니다.

Function Scope Example

function test() {
  if (true) {
    var x = 10; // 함수 스코프, 블록 스코프 아님
  }
  console.log(x); // 10 – 함수 내부 어디서든 접근 가능
}

Var vs Let – The Real Difference

Final In‑Short

• var = 값이 변하는 하나의 변수.
• let = 각 블록마다 새로운 변수.

Helpful video demo: https://www.youtube.com/watch?v=1mgLWu69ijU