예측 가능한 JS 코드의 핵심, Scope부터 Closure까지 완벽 정리

Context

JavaScript의 변수 유효 범위와 메모리 할당 방식에 대한 오해로 인한 런타임 에러 발생. 변수 접근 권한과 호이스팅 동작 원리 미숙지로 인한 코드 예측 불가능성 해소 필요.

Technical Solution

• 변수 접근 가능 범위를 결정하는 Global, Function, Block, Lexical Scope의 경계 정의
• 실행 컨텍스트 생성 단계에서 선언문을 메모리에 먼저 등록하는 Hoisting 메커니즘 적용
• var의 undefined 초기화 방식과 let·const의 Temporal Dead Zone(TDZ) 생성 차이 구분
• 함수가 선언된 물리적 위치를 기준으로 상위 스코프를 결정하는 Lexical Scope 구조 활용
• 외부 함수 종료 후에도 내부 함수가 상위 스코프의 변수를 참조하는 Closure 설계
• 각 Closure 호출 시마다 독립적인 메모리 인스턴스를 생성하여 데이터 은닉 및 상태 유지

Key Takeaway

JavaScript의 메모리 준비 과정과 렉시컬 스코프의 상호작용을 이해함으로써 런타임 동작의 예측 가능성을 확보하는 설계 원칙.