JavaScript 실행 환경과 변수 환경 핵심 개념 정리
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

함수와 변수 환경을 이해하는 JavaScript의 핵심

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

JavaScript 개발자, 특히 함수 내부 동작과 변수 환경에 대한 이해가 필요한 중급 이상 개발자

핵심 요약

  • 함수 실행 시 생성되는 실행 환경(Execution Context)은 변수 환경, 스코프 체인, this 키워드로 구성
  • 변수 환경(Variable Environment)은 함수 매개변수, 변수(var, let, const), 내부 함수 선언을 포함하며, 함수 호출 시마다 새로 생성
  • var로 선언된 변수는 호이스팅(Hoisting)으로 환경 상단에 선언만 이동되지만 값은 초기화되지 않음

섹션별 세부 요약

1. 함수 실행 시 생성되는 요소

  • 함수 호출 시 Execution Context가 생성되며, 이는 Variable Environment, Scope Chain, this 키워드로 구성
  • Scope Chain은 외부 환경과의 연결을 유지하며, 변수 검색 경로를 결정
  • this 키워드는 함수 호출 방식(예: 메서드 호출, 생성자 호출)에 따라 동적으로 결정

2. 변수 환경의 구성 요소

  • Variable Environment는 함수 내부의 매개변수, 변수(var, let, const), 내부 함수 선언을 저장
  • 환경은 일시적이며, 함수 호출 시마다 새로 생성되어 이전 값과 무관
  • 예: function greet(name) { let message = "Hello " + name; } 호출 시 namemessage가 새로운 환경에 생성

3. 호이스팅과 변수 환경의 관계

  • var로 선언된 변수는 호이스팅되어 환경 상단으로 이동되지만, 초기값은 undefined
  • 예: function test() { console.log(x); // undefined; var x = 5; }에서 x는 환경에 존재하지만 값은 초기화되지 않음
  • let/const는 호이스팅되지 않음 → 블록 범위에 묶여 변수 초기화 전 참조 시 ReferenceError 발생

결론

  • let/const 사용을 권장하여 호이스팅 문제를 방지하고, 변수 환경의 동작을 명확히 이해해야 코드의 예측 가능성이 높아짐
  • 함수 내부의 환경 구조를 숙지해 메모리 관리와 캐시링 최적화에 도움을 얻을 수 있음