13장. 스코프

참고: 이웅모 《모던 자바스크립트 Deep Dive》 13장 · 보강: MDN Grammar and types / Closures

프로젝트를 하다 보면 const랑 var를 섞어 쓰다가 “왜 여기선 되고 저기선 안 되지?”가 반복된다. 팀원들은 스코프 이야기를 자연스럽게 하는데, 나는 사용법만 외운 느낌이 있었다. 알고 쓰니? 솔직히 반쯤 아니요. Deep Dive 13장 + MDN을 같이 보며 헷갈림→찾아봄→정리로 적는다.

처음에 뭐가 헷갈렸냐

같은 이름 x가 두 군데면 덮어쓰는 건지 따로 사는 건지. “호출 위치” vs “작성 위치”가 머릿속에서 싸웠다. 이게 무슨 말이냐.

찾아봄

JS는 렉시컬 스코프. 작성 위치가 상위 스코프를 정하고, 호출 위치는 안 본다. this(22장, 호출 방식)와 축이 다르다. MDN도 lexical = 소스상 위치라고 한다.

비유

스코프 = 아파트 동·호수. 동 다르면 같은 호수도 남의 집. 이름도 스코프 다르면 다른 저장 공간. 칸막이 = 네임스페이스.

전역과 지역

전역=로비, 지역=회의실. 안은 체인으로 바깥을 볼 수 있고, 바깥은 안을 못 본다.

예제 1 — 다른 집

var x = 'global';
function foo() {
  var x = 'local';
  console.log(x); // local
}
foo();
console.log(x); // global

착각: 덮어쓴다. 진실: 다른 변수.

스코프 체인

현재→바깥→…→전역. 없으면 ReferenceError. 안쪽부터 찾는다.

예제 2 — 체인

function outer() {
  const msg = 'hi';
  function inner() { console.log(msg); }
  return inner;
}
outer()(); // hi

끝난 뒤에도 살아 있으면 24장 클로저.

var = 함수 레벨

블록이 칸이 아님. if 안 var가 함수로 샘 → let/const(15장).

예제 3 — 누수

function demo(flag) {
  if (flag) { var leaked = 1; }
  console.log(typeof leaked);
}

렉시컬 증명

예제 4

var x = 1;
function foo() { console.log(x); }
function bar() {
  var x = 10;
  foo(); // 1
}
bar();

표

질문→자답

스코프 vs 실행컨텍스트? 지도 vs 지금 방(23). 화살표 스코프 특수? 스코프 같고 this만 특수. 모듈에서 전역 안 보임? 모듈 칸.

오늘 지운 미신

호출 위치가 스코프를 바꾼다 → 작성 위치다.

웹 보강 메모

MDN을 옆에 두고 콘솔에 예제를 옮겨 적었다. 책만 보면 “알 것 같은” 느낌이 남고, 손으로 실행해야 미신이 떠난다. Flux/Proxy 노트 쓸 때랑 같은 루틴이다. 헷갈리면 먼저 “이게 무슨 말이냐”를 쓰고, 비유를 만들고, 표로 닫는다. 원문 복붙은 안 한다. 내 실패만 남긴다.

실무 적용: 오늘 작성 중인 모듈 하나에 이 장 기준을 즉시 적용해 본다. 노션에만 있으면 지식 아님. 체크리스트에 한 줄 내려야 팀 자산이다.

추가 자문: 이 개념이 버그 클래스 중 무엇을 줄이는가? 가시성? 수명? 공유? 호출 규약? 질문이 나뉘면 디버깅이 빨라진다. 그래서 일기를 길게 쓴다.