함정에 빠지기 쉬운 자바스크립트 문법12

12편에서는 스코프, 클로저, 변수 선언 시 발생하는 전형적인 혼동 사례를 정리합니다.

✅ 1. var는 블록 스코프를 가지지 않는다

if (true) {
  var x = 10;
}
console.log(x); // 10

📌 설명

var는 함수 스코프만 가지며, 블록({})을 스코프로 인식하지 않습니다.

---

✅ 2. 클로저에서 반복문 변수 캡처 문제

var funcs = [];
for (var i = 0; i < 3; i++) {
  funcs.push(() => console.log(i));
}
funcs[0](); // 3
funcs[1](); // 3
funcs[2](); // 3

📌 설명

클로저는 동일한 i를 참조하므로 루프 종료 시점의 값이 모두 사용됩니다.

📌 대처

let을 사용하거나 즉시 실행 함수(IIFE)를 통해 캡처합니다.

---

✅ 3. 중첩 함수의 this는 상위 컨텍스트가 아님

const obj = {
  value: 42,
  method: function () {
    function inner() {
      console.log(this.value); // undefined
    }
    inner();
  }
};
obj.method();

📌 설명

중첩된 일반 함수의 this는 글로벌 컨텍스트 또는 strict 모드에서는 undefined입니다.

📌 대처

화살표 함수 또는 .bind(this) 사용

---

✅ 4. 변수 선언 없이 할당하면 전역 변수가 된다

function test() {
  x = 10;
}
test();
console.log(x); // 10

📌 설명

선언 없이 값을 할당하면 암묵적으로 전역 변수로 등록되어 예기치 않은 오염이 발생합니다.

📌 대처

항상 let, const, var로 변수 선언을 명시합니다.

---

✅ 5. 함수 선언식과 함수 표현식의 차이

sayHi(); // OK
function sayHi() { console.log("hi"); }

sayBye(); // TypeError
var sayBye = function() { console.log("bye"); }

📌 설명

함수 선언식은 호이스팅되지만, 함수 표현식은 변수만 호이스팅되고 함수 할당은 런타임에 이뤄집니다.

---

✅ 결론

스코프와 클로저는 자바스크립트의 핵심 개념입니다. 이를 이해하고 변수 선언 방식의 차이를 구분하는 습관은 코드 안정성 향상에 큰 도움이 됩니다.