[JavaScript] 실행 컨텍스트, 렉시컬 환경, 클로저

실행 컨텍스트(execution context)

- 코드 실행 순서(세부 정보)를 스택으로 관리하는 것

- 선언된 변수, 함수, 스코프, this에 바인딩 된 값 관리

- 종류

1. global execution Context : 스크립트가 처음으로 실행될 때 생성 -> 스택의 가장 밑

2. function execution Context : 함수가 호출될 때 생성

 

 

렉시컬 환경(Lexical Environment)

- 식별자, 식별자에 바인딩된 값, 상위 스코프에 대한 참조를 담고 있는 자료구조

- 코드를 실행하는데 필요한 정보를 담고 있다.

• 렉시컬 환경은 언제 가비지 컬렉터의 대상이 되는지?
  • 어떤 식별자도 참조하고 있지 않는 상황에서 메모리를 동적으로 해제한다.

 

 

클로저(Closure) 

- 두 개의 함수(중첩함수)로 만들어진 환경으로 이루어진 특별한 객체의 한 종류

- inner function이 outer function의 scope으로 접근할 수 있게 해준다.

- 클로저는 함수 생성 시간에 함수가 생성될 때마다 만들어진다.

- 중첩함수가 외부 함수의 결과값으로 return

- return 되는 함수가 외부 함수의 식별자를 참조(중첩함수의 lifecycle(생명주기)가 외부 함수보다 길어야 한다.)

- 이때 중첩함수에서 외부 함수에 대한 참조가 남아있기 때문에 외부 함수의 실행을 execution context stack(실행 컨텍스트)에서 제거되지만, 렉시컬 환경은 메모리에 남아있기 때문에 중첩함수에 의해 사용될 수 있는 현상이다.

- 아래 코드의 클로저 : innerFunc

const x = 1;

function outer(){
    const x = 10;

    const inner = function(){
        console.log(x);
    }
    return inner;
}

const innerFunc = outer();
innerFunc();

 

클로저 생성 조건

1. 내부 함수가 익명 함수로 되어 외부 함수의 반환 값으로 사용

2. 내부 함수는 외부 함수의 실행 환경에서 실행

3. 내부 함수에서 사용되는 변수는 외부 함수의 변수 스코프에 있다.

 

 

클로저 활용 예시

const increase = (function(){
    let num = 0;
    return function(){
        return ++num;
    }
}());

console.log(increase());
console.log(increase());
console.log(increase());
// 1 2 3