클로저(closure)

클로저는 아래의 글에서 간략하게 설명했었던 개념이다.

이번 글에서는 클로저에 대해 자세히 알아보고 모르는 개념들을 함께 정리해보려고 한다.

 

https://lifeandit.tistory.com/60

고차 함수 그리고 중첩 함수

실행 컨텍스트는 동작 원리를 담고 있는 개념으로, 자바스크립트 엔진에서는 물리적 객체의 형태로 관리(나열 구조)

클로저(closure)의 개념

클로저는 자바스크립트 고유의 개념은 아니지만 중요한 개념 중 하나이다.

execution context에 대한 사전 지식이 있으면 이해하기 어렵지 않은 개념이라고 한다.

 

execution context란?

execution context는 실행 컨텍스트를 뜻한다.

scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심 원리이다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Language_Resources

자바스크립트 언어 자료 - JavaScript | MDN

ECMAScript 스펙에 따르면 실행 컨텍스트를 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 정의한다.

즉, 실행 가능한 코드가 실행되기 위해 필요한 환경이라고 말할 수 있다.

 

실행 가능한 코드는 다음과 같다.

 

• 전역 코드 : 전역 영역에 존재하는 코드
• Eval 코드 : eval 함수로 실행되는 코드
• 함수 코드 : 함수 내에 존재하는 코드

*Eval 코드 : 빌트인 객체

출처 : 포이에마 빌트인 객체

Eval 코드는 ECMAScript 명세에 정의되거나, 브라우저에서 제공되는 객체들을 의미한다.

 

여기서 일반적으로 실행 가능한 코드는 전역 코드와 함수 내 코드이다.

 

자바스크립트 엔진은 코드를 실행하기 위하여 실행에 필요한 여러 가지 정보를 알고 있어야 한다.

실행에 필요한 여러 가지 정보란 아래와 같은 것들이 있다.

 

• 변수 : 전역 변수, 지역변수, 매개변수, 객체의 속성
• 함수 선언
• 변수의 유효 범위(Scope)
• this

이와 같이 실행에 필요한 정보를 형상화하고 구분하기 위해 자바스크립트 엔진은 실행 컨텍스트를 물리적 객체의 형태로 관리한다.

 

var x = 'xxx';

function foo () {
  var y = 'yyy';

  function bar () {
    var z = 'zzz';
    console.log(x + y + z);
  }
  bar();
}
foo();

위 코드를 실행하면 아래와 같이 실행 컨텍스트 Stack을 생성하고 소멸한다.

현재 실행 중인 컨텍스트에서 이 컨텍스트와 관련 없는 코드(ex. 다른 함수)가 실행되면 새로운 컨텍스트가 생성된다.

이 컨텍스트는 스택에 쌓이게 되고 컨트롤(제어권)이 이동한다.

 

출처 : 포이에마 실행 컨텍스트

위 그림은 논리적 스택 구조를 가지는 실행 컨텍스트 스택이다.

 

1. 컨트롤이 실행 가능한 코드로 이동하면 논리적 스택 구조를 가지는 새로운 실행 컨텍스트 스택이 생성된다.
   스택은 LIFO(Last In First Out, 후입 선출, 나중에 쌓이고 가장 먼저 소멸되는)의 구조를 가지는 나열 구조이다.
2. 전역 코드(Global)로 컨트롤이 진입하면 전역 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 쌓인다.
   전역 실행 컨텍스트는 애플리케이션이 종료될 때(웹 페이지에서 나가거나 브라우저를 닫을 때)까지 유지된다. FILO!
3. 함수를 호출하면 해당 함수의 실행 컨텍스트가 생성되며 직전에 실행된 코드 블록의 실행 컨텍스트 위에 쌓인다.
4. 함수 실행이 끝나면 해당 컨텍스트를 파기하고 직전의 실행 컨텍스트에 컨트롤을 반환한다.

 

이렇게 실행 컨텍스트에 대해 알아보았고 다시 클로저로 돌아가 보자.

 

클로저에 대한 MDN의 정의는 다음과 같다.

클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다.

 

위 정의에서 함수란 반환된 내부 함수를 의미하고,

그 함수가 선언될 때의 렉시컬 환경(Lexical environment)란 내부 함수가 선언됐을 때의 스코프를 의미한다.

 

즉, 클로저는 반환된 내부 함수가 선언됐을 때의 환경인 스코프를 기억하여 자신이 선언됐을 때의 스코프 밖에서 자신이 호출되어도 스코프에 접근할 수 있는 함수를 말한다.

이해한 바로는 내부 함수가 자신을 감싸는 스코프 밖에서 호출되었을 때 자신이 속한 스코프의 자료들을 사용할 수 있다는 뜻인 것 같다.

 

클로저에 의해 참조되는 외부 함수의 변수, 즉 내부 함수가 속한 환경에서의 변수를 자유 변수(Free variable)라고 한다.

클로저라는 이름은 의역하면 자유 변수에 엮여있는 함수라는 뜻이다.

 

위에서 알아본 실행 컨텍스트의 관점에서 바라본다면,

외부 함수의 실행 컨텍스트가 사용된 후 반환이 되었더라도

외부 함수 실행 컨텍스트 내의 활성 객체(Activation object, 변수/함수 선언 등의 정보를 가지고 있다)는

내부 함수에 의해 참조되는 한 유효하여 내부 함수가 스코프 체인을 통해 참조할 수 있다는 것을 의미한다.

출처 : 포이에마 실행 컨텍스트

위 그림은 이 포스팅에서 설명하지 못한 VO, SC, this라는 부분이 있다.

이것은 간단히 말하면 실행 컨텍스트가 가지는 3가지 객체이며,

VO : Variable Object

SC : Scope Chain

this : thisValue

를 의미하고 실행 컨텍스트의 구조를 구성하는 요소이다.

 

VO에는 함수 선언, 변수, 매개 변수와 인수 정보를 가지는데,

그림에서 볼 수 있듯이 빨간색 박스는 외부 함수가 소멸되어도 내부 함수에 의해 참조되었을 때 스코프 체인을 통해 외부 함수의 활성 객체를 참조할 수 있다는 것을 보여준다.

 

이렇게 클로저에 대해서 알아보면서 추가적으로 몰랐던 부분을 찾아 정리해보았다.

각 개념에 대한 활용은 추후에 공부하면서 포스팅해보겠다.

 

정말 장황한 정리였다!

 

 

출처

https://poiemaweb.com/js-closure

Closure | PoiemaWeb

https://poiemaweb.com/js-execution-context

Execution Context | PoiemaWeb

https://poiemaweb.com/js-built-in-object#2121-eval

Built-in Object | PoiemaWeb