자바스크립트의 실행 컨텍스트 / 스코프 / 클로저

1. 실행 컨텍스트란?

• 실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 추상화한 객체입니다. 코드가 실행될때 필요한 환경 정보들을 모아 놓은 객체라고 할 수 있습니다.

 

 

2. 실행 컨텍스트의 역할

• 스코프 관리 : 변수 , 함수 등의 식별자를 저장하고 관리합니다.
• 실행 순서 관리 : 실행 컨텍스트 스택(콜 스택)을 통해 코드의 실행 순서를 제어합니다.

3. 실행 컨텍스트의 종류

• 전역 실행 컨텍스트 : 코드가 처음 실행될 때 생성되는 컨텍스트
• 함수 실행 컨텍스트 : 함수가 호출될 때 마다 생성되는 컨텍스트
• eval 실행 컨텍스트 : eval 함수 내에서 실행되는 코드의 컨텍스트

4. 실행 컨텍스트의 구조

 

실행 컨텍스트는 다음 세 가지 주요 컴포넌트로 구성됩니다.

1. Lexical Environment(렉시컬 환경)
2. Variable Environment(변수 환경)
3. This Binding

4-1 Lexical Environment

 

렉시컬 환경은 식별자-변수 매핑을 보유하는 구조입니다. 두 가지 컴포넌트로 구성됩니다.

• Environment Record : 모든 지역 변수 , 함수 선언 등을 저장
• Outer Environment Reference : 외부 렉시컬 환경에 대한 참조

4-2 Variable Environment

 

Variable Environment 는 Lexical Environment 와 구조가 같지만 var로 선언된 변수만을 저장합니다.

 

4-3 This Binding

 

현재 실행 컨텍스트에서 this 키워드가 참조하는 객체를 결정합니다.

 

5. 실행 컨텍스트의 생성 과정

 

실행 컨텍스트는 두 단계를 거쳐 생성됩니다.

1. 생성 단계 (Creation Phase)
2. 실행 단계 (Execution Phase)

5-1 생성 단계

 

생성 단계에서는 다음 작업이 수행됩니다.

• Lexical Environment 생성
• Variable Environment 생성
• this 바인딩 결정

5-2 실행 단계

 

실행 단계에서는 코드가 한 줄씩 실행되며 변수에 값이 할당되고 함수가 호출됩니다.

 

예시 코드

 

1 . 전역 실행 컨텍스트 생성

2. outerFunction 실행 컨텍스트 생성

3. innerFunction 실행 컨텍스트 생성

4. innerFunction 실행 컨텍스트 제거

5. outerFunction 실행 컨텍스트 제거

6. 전역 실행 컨텍스트 제거(프로그램 종료)

 

 

 

스코프 체이닝 ( Scope Chaining )

 

정의 

• 스코프 체이닝은 JavaScript 에서 변수나 함수와 같은 식별자를 찾을 때 사용하는 매커니즘 입니다. 현재 스코프에서 시작하여 상위 스코프로 순차적으로 검색해 나가는 과정을 말합니다.

실행 컨텍스트와 환경

• 각 실행 컨텍스트는 Lexicalenvironment 객체를 가집니다.
• Lexicalenvironment는 environmentRecord와  outerEnvironmentRefernce로 구성됩니다.
•  environmentRecord : 현재 스코프의 변수와 함수 선언을 저장
• outerEnvironmentReference : 상위 스코프의 LexicalEnvironment 를 참조

스코프 체이닝 과정

1. 변수 선언 및 초기화(평가 단계)
2. 코드 실행 및 변수 참조(실행 단계)
3. 현재 스코프에서 식별자 검색
4. 찾지 못하면 outerEnvironmentReference를 통해 상위 스코프로 이동
5. 전역 스코프까지 검색후 없으면 ReferenceError 발생

 

 

클로저 (Closure)

클로저란 함수와 그 함수가 선언될 때의 렉시컬 환경(Lexical Environment)을 조합한 것입니다. 이는 내부 함수가 외부 함수의 변수에 접근할 수 있게 해주는 JavaScript의 중요한 특성입니다.

 

1. 클로저의 기본개념 

 

innerFunction은 outerFunction의 매개변수x에 접근할 수 있습니다.

outerFunction이 실행을 마치고 반한된 후에도 innerFunction은 여전히 x의 값을 기억하고 있습니다.

 

2. 데이터 은닉과  캡슐화

클로저를 사용하면 private 변수를 흉내낼 수 있습니다.

 

count 변수는 외부에서 직접 접근할 수 없지만 increment 와 getCount 함수를 통해 조작하고 읽을 수 있습니다.

 

3. 함수 팩토리

클로저를 이용해 함수를 동적으로 생성할 수 있습니다.

 

multiplyBy 함수는 서로 다른 factor를 가진 새로운 함수들을 생성합니다.

 

클로저는 데이터 은닉 , 모듈 패턴 , 콜백 함수 등 다양한 상황에서 유용하게 사용됩니다.