Velog
자바스크립트 스코프 호이스팅은 망가졌습니다
JavaScript의 스코프와 호이스팅 메커니즘이 직관에 반하는 방식으로 동작하는 엣지 케이스들을 심층 분석한다. 특히 블록 스코프(let/const)와 함수 스코프(var)의 호이스팅 차이, TDZ(Temporal Dead Zone), 클로저와 루프의 상호작용 등 개발자들이 흔히 오해하는 부분을 구체적인 코드 예시로 설명한다.
핵심 요약
이 아티클은 JavaScript 런타임과 언어 설계를 실무 판단 기준으로 다시 정렬해 주는 읽기 자료입니다. JavaScript의 스코프와 호이스팅 메커니즘이 직관에 반하는 방식으로 동작하는 엣지 케이스들을 심층 분석한다. 특히 블록 스코프(let/const)와 함수 스코프(var)의 호이스팅 차이, TDZ(Temporal Dead Zone), 클로저와 루프의 상호작용 등 개발자들이 흔히 오해하는 부분을 구체적인 코드 예시로 설명한다. 이러한 동작들이 언어 설계 상의 결함이 아니라 명세에 의한 의도적인 동작임에도 불구하고 왜 '망가진 것처럼' 느껴지는지를 논한다.
이 아티클은 JavaScript 런타임과 언어 설계를 면접에서 바로 꺼낼 수 있는 답변 프레임으로 접어 두는 메모처럼 읽으면 좋습니다.
JavaScript 런타임과 언어 설계를 설명할 때 정의만 말하면 답변이 얕아지기 쉽습니다. var는 함수 스코프를 가지며 선언이 함수 최상단으로 호이스팅되어 undefined로 초기화된다 실무 판단 근거와 면접 답변의 밀도를 동시에 끌어올릴 수 있습니다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
var는 함수 스코프를 가지며 선언이 함수 최상단으
var는 함수 스코프를 가지며 선언이 함수 최상단으로 호이스팅되어 undefined로 초기화된다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
var는 함수 스코프를 가지며 선언이 함수 최상단으를 개념으로만 기억하고 맥락 없이 적용하면 var는 함수 스코프를 가지며 선언이 함수 최상단으로 호이스팅되어 undefined로 초기화된다 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
let/const는 블록 스코프를 가지며 호이스팅은
let/const는 블록 스코프를 가지며 호이스팅은 되지만 TDZ로 인해 선언 전 접근 시 ReferenceError가 발생한다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
let/const는 블록 스코프를 가지며 호이스팅은를 개념으로만 기억하고 맥락 없이 적용하면 let/const는 블록 스코프를 가지며 호이스팅은 되지만 TDZ로 인해 선언 전 접근 시 ReferenceError가 발생한다 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
함수 선언식은 전체가 호이스팅되지만
함수 선언식은 전체가 호이스팅되지만, 함수 표현식은 변수 선언만 호이스팅된다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
함수 선언식은 전체가 호이스팅되지만를 개념으로만 기억하고 맥락 없이 적용하면 함수 선언식은 전체가 호이스팅되지만, 함수 표현식은 변수 선언만 호이스팅된다 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
읽는 순서
- 1이론
"자바스크립트 스코프 호이스팅은 망가졌습니다"의 멘탈 모델과 요약을 먼저 읽고, JavaScript 런타임과 언어 설계와 관련된 핵심 용어 3개를 적어보세요.
- 2구현
자바스크립트 스코프 호이스팅은 망가졌습니다에서 다룬 아이디어를 작은 예제로 직접 구현하거나 기존 코드에 대입해 보면서 적용 조건을 확인하세요.
- 3실무
현재 프로젝트에서 JavaScript 런타임과 언어 설계와 연결되는 화면이나 코드 리뷰 사례를 찾아, 어디서 같은 판단이 필요한지 정리해보세요.
- 4설명
동료에게 "var, let, const의 호이스팅 동작 방식의 차이점을 설명하고, Temporal Dead Zone(TDZ)이란 무엇인가요?"에 대한 답을 5분 안에 설명해보세요. 막히는 부분이 아직 이해가 얕은 구간입니다.
면접 연결 질문
[감점 답변] 용어 정의만 반복하거나 "자바스크립트 스코프 호이스팅은 망가졌습니다에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] var는 undefined로 초기화되어 호이스팅, let/const는 호이스팅되지만 초기화 전까지 TDZ 상태로 ReferenceError 발생을 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "자바스크립트 스코프 호이스팅은 망가졌습니다에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] var의 함수 스코프로 인해 클로저가 같은 i 변수를 참조하여 3이 세 번 출력됨. let을 사용하거나 클로저로 캡처하면 0, 1, 2가 출력됨을 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "자바스크립트 스코프 호이스팅은 망가졌습니다에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 선언식은 함수 전체가 호이스팅되어 선언 전 호출 가능, 표현식은 변수만 호이스팅되어 선언 전 호출 시 TypeError 발생을 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
자기 점검
"var는 함수 스코프를 가지며 선언이 함수 최상단으"를 기능 목록으로만 외우는 것. 실제로는 왜 이 접근이 필요한지와 적용 조건까지 설명해야 합니다.
좋은 사례만 기억하고 실패 조건을 빼먹는 것. 실제 면접에서는 언제 위험해지는지까지 함께 말해야 합니다.