Javascript - Closure(클로저)

Big Jay·2022년 9월 5일
0

JavaScript

목록 보기
8/8
post-thumbnail

Closure(클로저)

함수와 lexical 환경의 조합으로 함수가 생성될 당시의 외부 변수를 기억하여 생성 이후에도 계속 접근 가능한 것

코드를 통하여 실행 컨텍스트 확인

먼저 자바스크립트의 실행 컨텍스트를 먼저 알고 보면 좋다.
아래 소스코드를 자바스크립트 엔진이 어떻게 동작 시키는지 확인해보면 아래와 같다.

예제

function sum(initial){
  return funtion(num){
    return initial + num
  }
}

const sumFn = sum(3);
console.log(sumFn(1)); // 4

  1. 전역 소스코드를 평가하기 시작한다.
    함수와 변수 선언을 렉시컬 환경에 등록한다.

    ❗️ 변수 sumFn은 선언만 되었을 뿐 초기화 되지 않은 상태로 참조 불가능 상태이다.

  1. 전역 소스 코드를 실행하면서 변수 sumFn에 sum()함수가 호출되면서 sum 함수 렉시컬 환경이 생성된다. 이 때 인자로 3이 등록되고 전역 렉시컬 환경에서의 변수 sumFn에 함수가 할당 되면서 참조가 가능해 진다.

  1. sum함수 소스 코드 실행이 끝나고 중지 된 전역 소스 코드 실행을 다시 시작하게 된다.
    여기서 sumFn 함수가 실행 되면서 sum 함수내 익명 함수의 소스코드가 실행된다. 여기서 인자로 받은 1이 num으로 할당 된다.

  2. 익명 함수 스코프에 없는 initial은 한 단계 위 스코프에서 찾는다. 찾을 떄까지 상위 스코프를 참조하게 된다.

예제에서 보인것과 같이 sum 함수 렉시컬 환경에서는 이미 initial을 3으로 지정해 놓은 상태이고 이를 익명 함수가 계속 참조하는 것을 바로 Closure(클로저)이다.

개발자 도구에서 디버깅을 해보면 아래와 같이 scope 확인이 가능하다.

참조

profile
안녕하세요.

0개의 댓글