클로져(Closure)란?

실행 컨텍스트(Execution Context, EC)

실행 + 컨텍스트 ⇒ 실행 + 맥락 ⇒ 실행하는 맥락

실행 컨텍스트의 종류

Case1: 어떠한 환경에도 속하지 않음

var 이름 = "danpacho, 장준성";console.log(이름); // danpacho, 장준성

1. window 전역 객체 생성

2. this를 window로 설정

Case2: 함수라는 환경에 속함

var 이름 = "danpacho, 장준성";console.log(이름); // danpacho, 장준성function 인사하기(이름) {  console.log(`안녕, ${이름}!`);  return 이름;}인사하기(이름); // 안녕, danpacho, 장준성

Case3: eval 이라는 환경에 속함

실행 컨텍스트의 동작과 Execution Stack

Execution Stack은 LIFO 구조

Execution Stack에 EC를 쌓아가는 과정

1. script 태그를 만남

2. script 태그를 만난 순간, Global EC 생성

3. 인사하기(내이름) 에서 인사하기 함수 호출

4. 인사하기가 호출된 순간 해당 함수의 Functional EC 생성

5. 인사하기 속에서, 인사시작(인사성_합격) 이 실행됨과 동시에 인사시작 함수 호출

6. 인사시작이 호출된 순간 해당 함수의 Functional EC 생성

1. script 태그를 만남

2. script 태그를 만난 순간, Global EC 생성

3. script 속 자바스크립트 구문 만남

4. 함수가 정의된 이후 실행되는 순간, 해당 함수의 Functional EC 생성

5. 함수 속에 또 함수가 있다면, 해당 함수가 실행되는 시점에 또 다른 Functional EC 생성
(함수 안에 함수도 그 함수에 속한 환경이 있습니다! 마치 자신의 집과 집 속의 방의 환경이 다른것처럼요)

Execution Stack에 EC를 실행하는 과정

실행 컨텍스트가 만들어지는 과정

Creation 단계(Phase)

A. Lexical Environment

B. Variable Environment

• 현재 컨텍스트 내의 식별자(변수 및 함수)들에 대한 정보

• 외부 환경 정보

• This Binding
자바스크립트 엔진은 this를 이 순간 결정짓습니다.
그리고 this는 크게 2가지 EC에서 결정이 됩니다.
1. Global EC
this = 전역객체(window)
2. Functional EC, 함수 호출 방식에 따라 다릅니다.
• 객체 참조에 의해서 호출되는 경우

해당 객체를 this 설정

• 함수가 어떠한 참조없이 호출되는 경우

전역 객체(window)

strict mode에서는 undefined로 설정

• 예제) 객체 참조에 의해서 호출되는 경우

const 사람 = {  이름: "danpacho",  멋짐: 100,  멋짐get: function() {    return `멋짐 수준: ${this.멋짐}`;  }};

사람 객체를 직접 참조하는 경우, this = 사람

사람.멋짐get(); // 멋짐 수준: 100

객체 참조가 없는 경우, this = undefined

const 사람_멋짐_가져오기 = 사람.멋짐get();사람_멋짐_가져오기(); // 멋짐 수준: undefined

1. Lexical Environment 란 무엇인가?

✅ lexical nesting structure에 따른 variable과 function의 identifier 연결을 정의

A Lexical Environment is a specification type used to define the association of Identifiers to specific variables and functions based upon the lexical nesting structure of ECMAScript code.

2. Lexical Environment(LE) 의 구성 알아보기

A. Environment Record

A.1. Declarative environment record

🤔 Hoisting 형이 여기서 왜 나와?

차근차근 생각해봅시다!

우선 식별자를 알아낸다는 과정을 곱씹어 봅시다.

성공적으로 식별자(이름)를 알아내기 위해서는, 각 변수와 함수의 이름을 수집하는 과정이 필수적일 것입니다.

이것이 어떤 의미일까요?

자바스크립트 엔진은 코드의 실행 전에 Environment Record 를 생성하고, 그 과정에서 Declarative environment record 를 만듭니다.

또 앞서 살펴보았듯이 위 과정에서는 미리 식별자를 알아냅니다.

즉 코드의 실행 전에, 변수 혹은 함수가 사용되기 전에 이름을 알아내는 과정이 있다는 이야기이죠.

이는 자바스크립트 엔진이 코드의 실행전에 사용될 함수와 변수를 미리 알 수 있으며, 이들을 사전에 선언할 수 있다는 이야기입니다.

이것이 바로 Hoisting 이 일어나는 근본적인 이유입니다.

🚫 그러나 조심하세요!

각 변수와 함수의 이름을 미리 알아내는 과정이 만든 효과가, 호이스팅을 이해하는 개념인 선언부를 최상단으로 끌어올린다는 생각과 개념적으로 동일하기에, 실제로 자바스크립트 엔진이 선언부를 최상단으로 끌어올린다고 착각하면 안됩니다!

선언부를 최상단으로 끌어올린다는 이해의 방식과 Declarative environment record가 변수와 함수의 식별자를 미리알고 메모리에 할당하는 과정은 엄연히 다른 것입니다.

(호이스팅의 자세한 개념은 공식문서를 참고하세요)

A.2. Object environment record

B. Outer Environment Reference

Reference to the outer environment

🤔 scope란?

모든 프로그래밍 언어에서 식별자의 유효범위를 구분하기 위해 scope라는 개념을 사용합니다. 그리고 scope의 개념은 다음과 같습니다.

✅ scope A 와 변수

A의 밖에서 선언된 변수

= A의 내부/외부 모두 접근이 가능합니다.

A의 내부 에서 선언된 변수

= A의 내부에서만 접근이 가능합니다.

C. This Binding

3. Lexical Environment의 생성

✅ 반드시 기억하세요!

Lexical Environment의 생성은 해당 함수의 선언 위치에서 일어납니다.

또한 EC의 실행과는 독립적으로 생각해야 합니다.

var apple = "apple";function isApple() {  console.log(apple);}function isBanana() {  var apple = "banana";  isApple();}isBanana(); // 어떤 값이 출력이 될까요?

1. isApple의 생성위치는 Global Context이며, 그 결과 scope는 global EC로 결정

2. isApple이 실행되는 순간, apple이라는 변수는 해당 함수 내부에서 선언되지 않았음

3. 즉 isApple에서 참조하는 apple을 자기 자신의 variable environment에서 찾을 수 없음

4. 이 순간 자바스크립트 엔진은 isApple의 Lexical environment의 outer scope를 통해서 혹시 있을지도 모르는 apple을 탐색.

5. 탐색결과 [[Scope]]의 global scope에서 선언한 var apple = “apple" 자바스크립트 엔진이 발견.

6. 결과, “apple”

🤔 isBanana 함수 속의 var apple = “banana” 는 어디로 갔나요?

해당 banana는 isBanana의 variable environment에 고이 저장되어 있습니다.

그리고 isBanana의 실행 컨텍스트가 실행된 후 제거되는 시점까지 아무것도 하지 못하고 가비지 컬렉터에 의해 사라져버리는 것이죠… (변수도 비루한 삶이 있을 수 있습니다)

isApple의 variable environment에 새로 apple생성해주기

var apple = "apple";function isApple() {  var apple = "이게 진짜 사과지";  console.log(apple);}function isBanana() {  var apple = "banana";  isApple();}isBanana(); //결과는?

apple 변수 재할당하기

let apple = "apple";

function isApple() {
  console.log(apple);
}

function isBanana() {
  apple = "banana";
  isApple();
}

isBanana(); // 어떤 값이 나올까요?

apple의 재할당 없이 직접 전달하고 싶습니다!

var apple = "apple";function isBanana() {  var apple = "banana";  function isApple() {    console.log(apple);  }  console.dir(isApple);  isApple();}isBanana();

1. isApple의 생성위치는 isBanana 함수 내부이며, 그 결과 첫째로 isBanana Closure scope, 둘째로는 global EC scope로 결정

2. isApple이 실행되는 순간, apple이라는 변수는 해당 함수 내부에서 선언되지 않았음

3. 즉 isApple에서 참조하는 apple을 자기 자신의 variable environment에서 찾을 수 없게됨

4. 이 순간 자바스크립트 엔진이 isApple의 Lexical environment outer scope를 통해 apple을 탐색

5. 탐색결과 [[Scope]]의 첫번째 scope인 Closure(isBanana)속에서 apple: “banana” 발견

6. 결과, “banana”

Scope Chain ⛓️

클로져, scope chain을 통해 자신의 스코프 외부 변수를 탐색하는 과정