스코프 체인과 클로저

스코프 체인(Scope Chain)

• 스코프 : 유효범위

• for() {}, if{}와 같은 구문은 유효 범위가 없음. 함수만이 한 단위가 됨.

• 스코프 체인 : [[scope]]프로퍼티로 각 함수 객체 내에서 연결 리스트 형식으로 관리됨

⚠️ 새롭게 정의된 스코프는 상위의 스코프에 접근할 수 있다. 스코프 체인은 scope의 가장 내부에서 scope chain을 따라 바깥쪽으로 검색을 하게 된다.

스코프 체인

참조 : https://velog.io/@bathingape/스코프Scope와-클로저Closure-이해

var var1 = 1;
var var2 = 2;

• 전역 실행 컨텍스트의 스코프 체인

  1. 전역 실행 컨텍스트 생성

  2. 변수 객체 생성

💡 참조할 상위 컨텍스트가 없어, 자신이 최상위에 위치하는 변수 객체

---

var var1 = 1;
var var2 = 2;
function func() {
  var var1 = 10;
  var var2 = 20;
}

func();

• 함수 호출한 경우의 실행 컨텍스트의 스코프 체인

  1. 전역 실행 컨텍스트 생성

  2. 변수객체 생성

  3. func() 함수객체 생성

  4. func() 함수 실행

---

• 함수 실행에 따라 새로운 실행 컨텍스트가 생성됨.

  1. 함수 실행 컨텍스트 생성

  2. 실행된 함수의 [[scope]]프로퍼티를 복사

  3. 현재 생성된 변수 객체를 복사한 스코프 체인의 맨 앞에 추가

  4. func 변수 객체 - 전역객체

요약

💡 각 함수 객체는 [[scope]]프로퍼티로 현재 컨텍스트의 스코프 체인을 참조한다.💡 함수가 실행시 실행컨텍스트는 자신이 사용할 스코프 체인을 현재 실행되는 함수 객체의 [[scope]]프로퍼티를 복사하고, 새롭게 생성된 변수객체를 해당 체인의 제일 앞에 추가한다.📌 스코프 체인 = 현재 실행 컨텍스트의 변수 객체 + 상위 컨텍스트의 스코프 체인

---

클로저

📌 이미 생명주기가 끝난 외부 함수의 변수를 참조하는 함수

function outerFunc() {
  var x = 10;
  var innerFunc = function () {
    console.log(x);
  };
  return innerFunc();
}

var inner = outerFunc();
inner();

1. 전역 실행 컨텍스트가 생성된다.

2. 변수객체의 inner, outerFunc가 생성되고, scope는 전역객체가 된다.

3. inner() - outerFunc()가 실행됨에 따라, outerFunc()실행 컨텍스트가 생성된다.

---

1. outerFunc() 안의 변수 x, innerFunc가 생성되고, scope는 outerFunc 변수객체가 된다.

2. outerFunc()가 innerFunc를 실행하며 리턴한다.

---

1. innerFunc() 실행 컨텍스트가 생성된다.

2. innerFunc()의 scope는 innerFunc안에 변수객체가 없음에 따라, outerFunc의 변수를 가르킨다.

   이에따라, innerFunc()의 scope는 outerFunc()가 된다.

👉 outerFunc() 함수는 종료됐지만, innerFunc()의 실행컨텍스트는 유지되고 있다.📌 JavaScript의 문구를 실행컨텍스트로 그려보는 연습을 해보는 것이 좋아보임.