[3주차] 실행 컨텍스트와 클로저

1월 28일 자 학습 내용 정리입니다.

 

 

✅ 자바스크립트에서 함수가 실행되는 과정

✔️ 어떤 코드도 없이 실행되는 경우

자바스크립트 엔진은 어떤 코드도 없이 실행되는 경우에 대해서도 this, 변수들(Variable Object), Scope Chain을 초기화한다.

즉, 실행 환경을 초기화하는 것이다.

 

이처럼 빈 코드를 실행했을 때 초기화는 다음과 같이 진행된다.

• this : window
• Variables : {}
• Scope Chain : [] 

Scope는 코드가 현재 실행되는 환경, 맥락을 의미한다.

따라서 Variables와 Scope Chain은 가리킬 것이 없으니 빈 객체와 배열로 초기화 되었지만 this는 window 객체를 가리킨다.

this는 코드가 실행되는 시점에 환경이 가리키는 객체를 의미하는데 즉, 지금의 실행 환경이 window 객체를 가리키고 있는 것이다.

 

 

✔️ 특정 함수가 존재하고 코드가 실행되는 경우

특정 함수가 존재하고 코드가 실행되는 경우에는 함수 실행 시 전역 컨텍스트(global context)는 따로 존재하게 되고 함수의 안에 들어갔을 때 지역 컨텍스트(local context)가 생긴다.

즉, 함수 실행 시 함수 스코프에 따라 환경이 만들어지며 this, variables, scope chain이 형성된다.

scope chain을 따라가다 함수의 실행이 끝나면 글로벌 환경에 도달하게 된다.

 

 

add라는 특정 함수를 생성하고 함수를 호출하도록 했다.

이때 함수 밖에서 this는 window 객체를 가리키고 있는 것과 Variables에 함수 밖에서 선언된 변수들의 현황이 들어가 있는 것을 확인할 수 있다.

 

 

함수 안에 진입하자 local context가 생기고 그 안에 변수들이 저장되는 것을 확인할 수 있다.

함수 안에 진입했을 때에도 this는 window 객체를 가리킨다. (하지만 이 값은 바뀔 수도 있다.)

 

✔️ 객체가 있고 그 객체의 메서드를 호출하는 경우

객체의 메서드의 경우 메서드 환경에서의 this는 해당 객체를 가리킨다.

하지만 this가 가리키는 것은 환경에 따라 변할 수도 있으니 무조건 해당 객체를 가리킨다고 말할 수는 없다.

 

 

특정 함수를 실행했을 때와 마찬가지로 객체의 메서드에 진입하기 전에 Variable Object와 Scope Chain이 생성된 것을 확인할 수 있다.

또한 객체의 메서드를 실행했을 때 this는 해당 Object를 가리키며 local context도 생성되었다.

 

 

✅ 실행 컨텍스트

실행 컨텍스트(Execution Context) 또는 실행 맥락은 자바스크립트 코드가 실행되는 환경을 의미한다.

실행 컨텍스트에는 코드에서 참조하는 변수, 객체, this 등에 대한 레퍼런스가 있다.

 

자바스크립트가 실행될 때 전역 실행 컨텍스트(Global Execution Context)가 생성되며 함수가 실행되면 함수 실행 컨텍스트(Function Execution Context)가 생성된다.

이처럼 전역(global)에서 시작해 함수 호출 시 스택에 쌓이게 된다.

 

 

✅ Closure

일급 객체란 다른 변수처럼 대상을 다룰 수 있는 것을 말한다.

자바스크립트에서 함수는 일급 객체에 속한다.

즉, 자바스크립트에서 함수는 변수처럼 다룰 수 있다.

 

클로저(Closure)는 함수의 일급 객체 성질을 이용한다.

함수가 생성될 때, 함수의 내부에서 사용되는 변수들이 함수 외부에 존재하는 경우 그 변수들은 함수의 스코프에 저장된다.

이때 함수와 함수가 사용하는 변수들을 저장한 공간을 클로저라고 한다.

 

 

makeFunc라는 함수를 생성하고 makeFunc 내부에 displayName 이라는 함수가 존재한다.

그리고 함수의 일급 객체 성질을 이용해 myFunc라는 변수에 makeFunc()를 값으로 담았다.

 

함수를 값으로 담는 시점에서 makeFunc 함수를 실행했을 때 makeFunc의 local context에는 name과 displayName이 들어있다.

그리고 현재 displayName에서 사용하는 변수 name은 displayName 외부에 존재한다.

따라서 closure를 만들고 name을 closure에 저장한다.

 

 

makeFunc가 displayName을 리턴해 끝내고 11번째 줄의 myFunc()가 실행되면 closure를 확인할 수 있다.

displayName 함수의 내부로 진입했을 때 closure에 저장해둔 name의 값을 가져와 콘솔 로그로 출력하는 것이다.

 

 

🔍 참조

클로저 https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures