Javascript - Closure 개념 정리

코드 실행 process

0. 함수 실행
1. 실행 컨텍스트 생성
2. 컨텍스트 내부 > 활성(변수) 객체 생성
3. 변수 객체 내부 > arguments (함수의 매개변수) 객체 생성
4. 스코프 정보 생성
5. 변수(지역 변수) 생성 - 초기화 X / 호이스팅 원인
6. this 바인딩
7. 코드 실행 - 변수 초기화 및 연산, 또 다른 함수 실행

실행 컨텍스트

• 실행 가능한 자바스크립트 코드 블록이 실행되는 환경
• 콜 스택에 들어가는 실행 정보 단위

• 거의 함수로 실행 컨텍스트가 생성됨
• ECMAScript 설명
  현재 실행되는 컨텍스트에서 이 컨텍스트와 관련 없는 실행 코드가 실행되면, 새로운 컨텍스트가 생성돼 스택에 들어가고 제어권이 그 컨텍스트로 이동
  

참고 : 인사이드 자바스크립트

활성 객체 (변수 객체)

• 자바스크립트 엔진이 각 실행 컨텍스트에 실행에 필요한 여러가지 정보(매개변수, 정의한 변수 및 객체) 를 담는 객체
• 새로 만들어진 컨텍스트에서 접근 가능함
  

스코프 체인

• 생성된 현재 컨텍스트의 유효 범위를 나타내는 변수 객체 정보와 상위 실행 컨텍스트의 변수 객체 정보를 포함하는 체인
• 각 실행 컨텍스트의 변수 객체가 원소인 연결 리스트 형식
• 각 함수는 활성 객체 내부에서 [[scope]] 프로퍼티로 스코프 체인을 참조함

👉 스코프 체인으로 외부 실행 컨텍스트의 변수 객체에 대한 접근이 가능해지는 것

스코프 체인 생성 및 수정 프로세스

0. 전역 실행 컨텍스트의 전역 객체가 첫번째 원소로 체인에 들어가 있음
1. 각 변수 객체 내부의 함수 객체는 [[scope]] 프로퍼티로 현재 컨텍스트의 스코프 체인을 참조 중
2. 특정 함수 객체에 해당하는 함수 실행
   👉 새로운 실행 컨텍스트 생성
   👉 현 함수 객체의 [[scope]] 프로퍼티 복사
   👉 새로 생성되는 변수 객체를 체인 맨 앞에 추가

✅ 스코프 체인
현 실행 컨텍스트의 변수 객체 + 상위 컨텍스트의 스코프 체인

Closure

• 생명주기가 끝난 외부 함수의 변수를 참조하는 함수
• 스코프 체인 개념 적용으로 Lexical Scoping (어휘적 유효 범위 지정)의 개념 적용이 가능해짐 (MDN 참고)
  • 변수의 값을 기억하는게 아닌 변수의 이름을 기억해서 판단함
• 실행 컨텍스트가 사라져도 스코프 체인으로 연결된 변수 객체는 여전히 남게 되며 참조가 가능함

✅ 자유 변수(free variable)
클로저로 참조되는 외부 변수 (myName)

클로저 활용 case

for(var i=0; i<5; i++) {
  setTimeout(function(){
    console.log(i);
  },500);
}

위는 var 로 선언한 i는 상위 컨텍스트의 변수 객체에서 값이 계속 변하기 때문에 5만 찍힐것임

for(var i=0; i<5; i++) {
  (function() {setTimeout(function(){
    var j = i;
    console.log(j);
  },500);
  })();
}

클로저 개념 사용해 즉시 실행 함수를 활용하면 실행되는 함수별로 실행 컨텍스트가 생성되고 해당 시점에 생성된 j 값을 사용하기 때문에 0..4 얻을 수 있음

let 활용한 방법

for(let i=0; i<5; i++) {
  setTimeout(function(){
    console.log(i);
  },500);
}

let은 block scope 이기 때문에 실행되는 블록마다 새로 변수를 생성 후 사용하게 되므로 0..4 정상적으로 찍힘