함수와 변수 환경을 이해하는 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; }
호출 시name
과message
가 새로운 환경에 생성
3. 호이스팅과 변수 환경의 관계
var
로 선언된 변수는 호이스팅되어 환경 상단으로 이동되지만, 초기값은undefined
- 예:
function test() { console.log(x); // undefined; var x = 5; }
에서x
는 환경에 존재하지만 값은 초기화되지 않음 let
/const
는 호이스팅되지 않음 → 블록 범위에 묶여 변수 초기화 전 참조 시ReferenceError
발생
결론
let
/const
사용을 권장하여 호이스팅 문제를 방지하고, 변수 환경의 동작을 명확히 이해해야 코드의 예측 가능성이 높아짐- 함수 내부의 환경 구조를 숙지해 메모리 관리와 캐시링 최적화에 도움을 얻을 수 있음