실행컨텍스트 작동원리

📢 동작원리

1. 함수 할당(선언)시에 스코프체인은 이미 정해진다
2. 함수가 호출(실행)될때마다 함수 컨텍스트가 생성
3. 실행컨텍스트가 실행될 때 관련 변수 함수들을 수집한다

• 해당 3가지 원칙을 기준으로 실행컨텍스트를 동작시킨다 생각하자.

---

🟥 첫번째 실행컨텍스트 코드

var name = 'zero'; // (1)변수 선언 (6)변수 대입
function wow(word) { // (2)변수 선언 (3)변수 대입
  console.log(word + ' ' + name); // (11)
}
function say () { // (4)변수 선언 (5)변수 대입
  var name = 'nero'; // (8)
  console.log(name); // (9)
  wow('hello'); // (10)
}
say(); // (7)

---

🥇 전역컨텍스트

1. 변수 객체
   1) argument => null
   2) variable => name(실행 컨텍스트 생성 후 코드 진행하면서 zero값 추가) , wow함수 , say함수
2. 스코프체인
   1) 전역변수 객체
3. this
   1) window

---

🥈 say 함수

1. 변수 객체
   1) argument => null
   2) variable => name(실행 컨텍스트 생성 후 코드 진행하면서 nero값 추가)
2. 스코프체인
   1) say 변수 객체 , 전역변수 객체
3. this
   1) window

---

🥉 wow 함수

1. 변수 객체
   1) argumnet => word(hello값)
   2) variable => null
2. 스코프체인
   1) wow 변수 객체 , 전역 객체
3. this
   1) window

• 선언시 스코프체인은 이미 정해져있어 say함수와 wow함수는 전역컨텍스트가 실행되면서 선언되어 해당 함수들이 스코프로 전역객체와 각각 연결되어있다.

• 첫번째 console.log(name);은 say함수안에 있으므로 가장 가까운 값인 nero가 나온다.

• 두번째 console.log(word + ' ' + name);는 wow함수안에 word 값이 있고 variable은 없으므로 스코프체인을 통해 전역 객체로 가서 name 값을 넣어 hello zero가 나온다.

nero
hello zero

---

🟦 두번째 실행 컨텍스트 코드

var name1 = 'zero'; // (1)변수 선언 (6)변수 대입

function say1 () { // (4)변수 선언 (5)변수 대입
  var name1 = 'nero'; // (8)
  console.log(name1); // (9)
  function wow1(word){ // (2)변수 선언 (3)변수 대입
    console.log(word + ' ' + name1); // (11)
  }
  wow1('hello'); // (10)
}
say1(); // (7)

---

🥇 전역컨텍스트

1. 변수 객체
   1) argument => null
   2) variable => name1(실행 컨텍스트 생성 후 코드 진행하면서 zero값 추가) , say1 함수
2. 스코프체인
   1) 전역변수 객체
3. this
   1) window

---

🥈 say1 함수

1. 변수 객체
   1) argument => null
   2) variable => name1( 실행 컨텍스트 생성 후 코드 진행하면서 nero값 추가) , wow1함수
2. 스코프체인
   1) say1 변수 객체 , 전역변수 객체
3. this
   1) window

---

🥉 wow1 함수

1. 변수 객체
   1) argumnet => word(hello값)
   2) variable => null
2. 스코프체인
   1) wow1 변수 객체 , say1 변수 객체
3. this
   1) window

• 선언시 스코프체인은 이미 정해져있어 say1함수는 전역컨텍스트가 실행되면서 선언되어 해당 함수가 스코프로 전역객체와 각각 연결되어있다.

• 첫번째 console.log(name);은 say함수안에 있으므로 가장 가까운 값인 nero가 나온다.

• 두번째 console.log(word + ' ' + name);는 wow함수안에 word 값이 있고 variable은 없으므로 스코프체인을 통해 say1 변수 객체로 가서 name 값을 넣어 hello nero가 나온다.

nero
hello nero

---

🤔 var name1 = 'nero'가 없다면 결과는?

기존에 name1을 say1 변수객체에서 찾았지만 못찾아 둘다 스코프체인을 하여 전역객체로 가서 zero를 찾고 결과를 표현한다.

zero
hello zero

---

🤔 var name1 = 'nero'가 없고 var name1 = 'zero'가 say1 선언과 실행 사이에 있다면 결과는?

전역컨텍스트 생성시 name1이 값이 없이 존재하다가 say1실행 전 zero라는 값을 넣고 say1이 실행하면서 name1을 찾아 스코프체인을 통해 전역 변수객체에 있는 name1을 찾는다.

zero
hello zero

---

📁 정리

1. 실행컨텍스트는 선언시 스코프체인은 결정되고
   호출 시 함수컨텍스트가 생성된다.
2. 실행컨텍스트 생성시 해당 필요한 변수객체, 스코프체인, this를 수집한다.
3. 자신에게 없는 값은 스코프체인을 통해 변수값을 찾아간다.

---

출처

실행컨텍스트