var 키워드는 수년 동안 JavaScript에서 변수를 선언하는 기본 방법이었습니다. 그러나 코드에서 예상치 못한 동작을 초래할 수 있는 몇 가지 단점과 함정이 있습니다. let 및 const와 같은 최신 대안은 이러한 많은 문제를 해결하므로 대부분의 경우 변수 선언에 선호됩니다.

1️⃣ 호이스팅: var는 알기도 전에 변수를 선언합니다!

? 설명:

JavaScript에서 var 선언은 해당 범위의 맨 위로 끌어올려집니다. 즉, 선언이 나중에 코드에 나타나더라도 정의되지 않은 상태로 초기화됩니다. 이로 인해 혼란스러운 동작이 발생하고 감지하기 어려운 버그가 발생할 수 있습니다.

? 핵심 사항:

• ? 호이스팅 실행: 변수 선언은 범위의 맨 위로 이동되지만 할당은 그렇지 않습니다.
• ? 예기치 않은 정의되지 않은 값: 값이 할당되기 전에 변수를 사용할 수 있어 의도하지 않은 정의되지 않은 결과가 발생할 수 있습니다.

? 예:

console.log(myVar);  // undefined (hoisted but not initialized)
var myVar = 10;
console.log(myVar);  // 10

? 설명: myVar 변수는 범위의 맨 위로 끌어올려졌지만 처음에는 정의되지 않았으므로 코드에 혼란을 일으킬 수 있습니다.

? 고치다:

• ? let 또는 const를 사용하세요. 이러한 키워드는 var와 같은 방식으로 끌어올려지지 않으므로 이 문제를 방지하는 데 도움이 됩니다.

? 수정 예:

console.log(myLet);  // ReferenceError: myLet is not defined
let myLet = 10;
console.log(myLet);  // 10

? 설명: let을 사용하면 변수가 선언되기 전에 변수에 액세스하는 것을 방지하여 혼란과 잠재적인 버그를 줄일 수 있습니다.

2️⃣ 함수 범위와 블록 범위: var는 블록에서 누출될 수 있습니다!

? 설명:

var의 주요 결함 중 하나는 블록 범위가 아닌 함수 범위라는 것입니다. 이는 루프, if 문 또는 기타 블록 내부에 선언된 변수가 해당 블록에 국한되지 않고 블록 외부에서 액세스될 수 있어 버그가 발생할 수 있음을 의미합니다.

? 핵심 사항:

• ? 함수 범위: var는 루프나 if 문과 같은 블록 내부에 선언된 경우에도 가장 가까운 함수로 범위가 지정됩니다.
• ? 변수 누출: 이로 인해 변수가 의도치 않게 블록 밖으로 누출되어 예측할 수 없는 동작이 발생할 수 있습니다.

? 예:

if (true) {
  var blockVar = "I’m accessible outside this block";
}
console.log(blockVar);  // "I’m accessible outside this block"

? 설명: blockVar는 if 블록 내부에서 선언되었지만 var는 블록 범위가 아닌 함수 범위이므로 블록 외부에서 여전히 액세스할 수 있습니다.

? 고치다:

• ? let 또는 const 사용: 이러한 키워드는 블록 범위이므로 정의된 블록 내에서만 액세스할 수 있습니다.

? 수정 예:

if (true) {
  let blockLet = "I’m only accessible inside this block";
}
console.log(blockLet);  // ReferenceError: blockLet is not defined

? 설명: let 또는 const를 사용하면 변수가 해당 블록에 국한되어 범위 누출을 방지할 수 있습니다.

3️⃣ 재선언 문제: var를 사용하면 동일한 변수를 두 번 선언할 수 있습니다!

? 설명:

var를 사용하면 동일한 범위에서 동일한 변수를 실수로 다시 선언할 수 있으며 이로 인해 이전 값을 덮어쓸 수 있습니다. 이로 인해 의도하지 않은 버그가 발생할 수 있으며, 특히 변수 이름이 실수로 재사용될 수 있는 대규모 코드베이스에서는 더욱 그렇습니다.

? 핵심 사항:

• ? 변수 재선언: var를 사용하면 동일한 범위 내에서 변수를 재선언할 수 있으며 잠재적으로 기존 값을 덮어쓸 수 있습니다.
• ? 의도하지 않은 덮어쓰기: 이로 인해 특히 크거나 복잡한 기능에서 감지하기 어려운 버그가 발생할 수 있습니다.

? 예:

var name = "Alice";
var name = "Bob";  // No error, overwrites the previous value
console.log(name);  // "Bob"

? 설명: 두 번째 이름 선언이 첫 번째 선언을 덮어쓰므로 잠재적으로 코드에 버그가 발생할 수 있습니다.

? 고치다:

• ? let 또는 const 사용: 이 키워드는 동일한 범위에서 변수를 다시 선언하는 것을 방지하여 의도하지 않은 덮어쓰기의 위험을 줄입니다.

? 수정 예:

let name = "Alice";
let name = "Bob";  // SyntaxError: Identifier 'name' has already been declared

? 설명: let 또는 const를 사용하면 변수를 다시 선언하는 것을 방지하고 코드를 예측 가능하게 유지하는 데 도움이 됩니다.

4️⃣ 루프의 var: 비동기 코드의 버그 가능성

? 설명:

루프에서 var를 사용하면 특히 비동기 코드로 작업할 때 변수 값이 예상치 못한 방식으로 변경될 수 있습니다. var는 블록 범위가 아닌 함수 범위이므로 비동기 콜백 내에서 액세스할 때 루프 변수에 예상치 못한 값이 포함될 수 있습니다.

? 핵심 사항:

• ? 루프 변수: 루프 내부에서 var로 선언된 변수는 루프 블록에 국한되지 않으므로 나중에 액세스할 때 잠재적인 버그가 발생할 수 있습니다.
• ⏳ 비동기 문제: 이로 인해 setTimeout 또는 promise와 같은 비동기 작업에서 루프 변수에 예상치 못한 값이 있을 수 있는 버그가 발생할 수 있습니다.

? 예:

for (var i = 0; i  console.log(i), 1000);  // Prints: 3, 3, 3 (unexpected)
}

? 설명: var는 블록 범위가 아니기 때문에 루프 변수 i는 모든 반복에서 공유되며 최종 값(3)은 각 setTimeout 콜백에서 사용됩니다.

? 고치다:

• ⛓ let 사용: let 키워드는 블록 범위이므로 루프의 각 반복이 루프 변수의 고유한 독립적인 값을 얻도록 보장합니다.

? 수정 예:

for (let i = 0; i  console.log(i), 1000);  // Prints: 0, 1, 2 (as expected)
}

? 설명: let을 사용하면 각 반복마다 i의 새 인스턴스가 생성되어 비동기 콜백 문제를 해결하고 올바른 값이 인쇄되도록 합니다.

5️⃣ var와 클로저: 혼란의 근원

? 설명:

클로저를 var와 결합하면 예상치 못한 동작이 발생할 수 있습니다. var는 함수 범위이므로 클로저가 이를 캡처할 때 예상하지 못한 방식으로 값이 변경될 수 있습니다.

? 핵심 사항:

• ? JavaScript의 클로저: 클로저는 외부 함수의 실행이 완료된 후에도 주변 범위를 기억하는 함수입니다.
• ? 공유 변수 문제: var가 클로저 내에서 사용되면 캡처된 변수가 모든 클로저에서 공유되어 예기치 않은 동작이 발생할 수 있습니다.

? 예:

function createFunctions() {
  var funcs = [];
  for (var i = 0; i 



? 설명: var가 함수 범위이므로 모든 클로저는 동일한 i 값을 캡처하여 예상치 못한 결과를 초래합니다.

? 고치다:

• ? let 사용: let을 사용하면 각 클로저가 루프 변수의 새 인스턴스를 캡처하여 문제를 해결합니다.

? 수정 예:

function createFunctions() {
  var funcs = [];
  for (let i = 0; i 



? 설명: let을 사용하면 각 클로저가 자체 i 복사본을 가져와 문제를 해결하고 예상 값이 인쇄되도록 합니다.



  
  
  ? 결론: var에 작별을 고할 시간


var는 JavaScript에서 변수를 선언하는 원래 방법이었지만 현대 JavaScript 개발에서는 적합하지 않은 선택이 되는 몇 가지 단점이 있습니다. let 및 const의 도입으로 더 나은 범위 지정이 제공되고, 버그 위험이 줄어들며, 코드를 더욱 예측 가능하게 만듭니다. 더 깔끔하고 유지 관리하기 쉬운 JavaScript를 작성하려면 이제 var에서 벗어나 let과 const를 수용해야 할 때입니다.