[TIL]JavaScript 실행컨텍스트

DevelSopher·2021년 8월 13일

✏️자바스크립트 실행컨텍스트란?

일단 여기서 컨텍스트를 직역해보면 문맥이라는 뜻이다.
자바스크립의 실행문맥이라..?

JS 엔진이 코드를 실행(동작)시키는 원리 정도로 이해하면 좋을 것 같다.

🤔 그럼 이걸 왜 알아야 하는가?

코드가 동작되는 원리 및 순서를 알아야지 코드 독해 및 디버깅이 가능하기 때문이다.

자바스크립트의 코드를 생각해보자

일반적으로 실행가능한 코드는 전역코드와 함수 내 코드이다.
코드들을 실행하기 위해서는 엔진은 해당 코드들의 정보가 필요하다.

Arguments(매개변수) = 해당 함수가 받는 인자들
Variables(변수) = 해당 스코프내의 변수들
Scope Chain = 자신과 상위 스코프들의 변수객체
This

위와 같은 정보들을 엔진은 물리적 객체의 형태로 관리한다.
전역 컨텍스트, 함수 컨텍스트(함수 각각의) 생긴다고 이해하자.
컨텍스트는 코드가 실행되면 스택을 생성하고 실행이 마무리되면 소멸되는 구조이다.

만약 코드가 실행된다면?

전역 컨텍스트 생성 -> 내부 함수 컨텍스트 생성 -> 내부 함수 컨텍스트 소멸 -> 전역 컨텍스트 소멸
과 같은 매우 논리적인 구조이다.

예시

var name = 'jun';//(1)
function test1(word){//(2)
  console.log(word + ' ' + name);//(3)
}
function test2(){//(4)
  var name='joo';//(5)
  console.log(name);//(6)
  test1('hello');//(7)
}
test2();//(8)

1️⃣ 처음 코드가 실행될때 전역 컨텍스트가 생성된다.

Arguments : 없음
Variables : ['name', 'test1', 'test2']
Scope Chain : 전역 변수객체
this: window(따로 설정 되어 있지 않으면 window이다.)

실행순서는 다음과 같다.
(1)변수 선언 -> (2)변수 선언 & 변수 대입 ->(4)변수 선언 & 변수 대입 ->(1)변수 대입
(Why? HOISTING !!)

2️⃣-1️⃣ test2 함수컨텍스트가 생성된다.

(8)번에서 test2()를 하는 순간 생성된다.

Arguments : 없음
Variables : name
Scope Chain: test2 변수객체, 전역 변수객체
This : window

(5),(6),(7)이 순서대로 실행이 된다.
여기서 (6) console.log(name)에서 변수 name은 test2() 컨텍스트에서 찾으면 된다. -> joo
그다음 (7) test1('hello')에서 변수 test1은 test() 컨텍스트안에서 찾을 수 없다.
그래서 Scope Chain을 따라 상위 변수객체(여기선 전역 변수객체)에서 찾는다.

전역 컨텍스트의 Variables중에 test1이 있다. --> 호출한다.

2️⃣-2️⃣test1 함수컨텍스트가 생성된다.

Arguments : [{word: 'hello'}]
Variables : 없음
Scope Chain: tes1 변수객체, 전역 변수객체
This: window
(3)이 실행이 된다.
(3)에서 word는 test1 변수객체에 값이 있으며, name은 test1 변수객체에 없어
Scope Chain을 따라 상위 변수객체(여기선 전역 변수객체)에서 찾는다. -> june