자바스크립트 스코프와 실행 컨텍스트: 내부 동작 원리 파헤치기(Scope, Execution Context)
코드는 잘 작성했는데 예상대로 작동하지 않나요? 그 이유는 "스코프와 실행 컨텍스트"를 모르기 때문일 수 있습니다. 안녕하세요, 개발자 여러분! ICT리더 리치입니다. 자바스크립트를 다루다 보면 변수의 접근 범위, 호출 시점의 오류, undefined 문제 등 예기치 않은 상황들을 자주 마주하게 되죠. 대부분의 문제는 "스코프(Scope)"와 "실행 컨텍스트(Execution Context)" 개념을 정확히 이해하면 해결됩니다. 오늘 포스팅에서는 자바스크립트의 내부 동작 구조를 쉽게 풀어보고, 실무에서 반드시 알아야 할 개념들을 정리해드립니다. 📌 바로가기 목차 1. 스코프(Scope)란 무엇인가요? 2. 렉시컬 스코프와 동적 스코프 차이 3. 실행 컨텍스트의 구조 4. 실행 컨텍스트와 호출 스택(Call Stack) 5. 변수 호이스팅과 TDZ(Temporal Dead Zone) 6. 실무에서 주의해야 할 스코프 팁 7. 자주 묻는 질문 (FAQ) 8. 마무리 요약 자바스크립트 디버깅 및 실행 컨텍스트를 주제로 한 대표 이미지 1. 스코프(Scope)란 무엇인가요? 자바스크립트에서 스코프(Scope) 란 변수에 접근할 수 있는 범위를 의미합니다. 코드를 실행할 때 어떤 변수를 어디서 참조할 수 있는지를 결정하는 중요한 기준이죠. 스코프는 크게 전역 스코프(Global Scope) 와 지역 스코프(Local Scope) 로 나뉘며, 함수나 블록 단위로 생성됩니다. 2. 렉시컬 스코프와 동적 스코프 차이 자바스크립트는 렉시컬 스코프(Lexical Scope) 를 채택하고 있습니다. 이는 코드가 작성된 위치(정적 구조)에 따라 스코프가 결정된다는 의미입니다. 반면, 동적 스코프(Dynamic Scope) 는 함수를 호출한 위치에 따라 결정되며, 이는 일부 다른 언어에서 사용...