[Javascript] 자바스크립트 실행문맥 (Execution context)

자바스크립트 실행문맥 (Execution context)

1. 정의

- 자바스크립트 코드 블럭이 실행되는 환경

1) 전역코드(global code)  :  가장 기본적인 환경으로 소스 코드가 처음으로 실행될 때

2) 함수코드(function code) :  처리 흐름이 함수 바디 안으로 들어갈 때(호출될때)

3) eval() 코드(Eval code) : eval() 안에서 실행 될 때

- 세 가지 환경 중에 무조건 하나가 실행 컨텍스트가 되는 것이다.

- 대부분은 함수 코드를 이용한다

- 함수가 호출되면 하나의 실행문맥(실행환경)이 생성된다. 그리고 이 실행 문맥은 실행문맥 스택(Execution Context stack)에 쌓인다

- 실행 문맥(실행환경) 안에는 변수, 함수, 객체 등이 존재한다

- 문제 : 내부함수에서 외부 함수 변수에 접근하면 오류가 없지만, 밖에 있는 함수가 안에 정의한 함수의 변수에 접근하면 어떻게 될까?

var name = 'Hee'; function simple(){ var car = 'Audi'; function demo1(){ var nickName = 'kyle'; console.log(car); } demo1(); console.log(nickName); } simple();

- 실행결과: nickName is not defined(…)

2. Execution Context stack(실행 컨텍스트 스택)

- 브라우저안의 자바스크립트 번역기(interpreter)는 싱글 스레드 환경으로 실행된다. 이 말은 무슨일이 든지 하나씩 처리 된다는 뜻이다

- 그렇기 때문에 스택 구조를 이용하여 실행 컨텍스트가 생성된다.

var name = 'Hee'; function simple(){ var car = 'Audi'; demo1(); function demo1(){ console.log(car); demo2(); } function demo2(){ console.log(name); } } simple();

- 위 소스는 이렇게 스택으로 쌓이게 되고 위에서 부터 실행된다

- 또한 실행 문맥 중 다른 함수(문맥과 상관없는)가 호출되면, 새로운 실행 문맥이 생성되어 쌓이고 이전 문맥의 제어권은 모두 새로운 문맥으로 이전된다. 그렇므로 내부함수가 외부 함수의 변수접근은 가능하지만 외부 함수는 내부 함수의 변수의 접근 할 수 없는 것이다 

3. 실행문맥 생성 과정

- 실행문맥(Exection context)은 두 과정으로 나뉜다

a. 생성과정(creation Stage) - 활성객체 생성

- Scope chain을 만든다

- 변수, 함수, 매개변수(arguments) 를 만든다

- 'this'를 결정한다

b. 코드실행과정(Activation/ Code Execution Stage)

- 변수를 할당한다

- 함수와 실행 코드를 참조한다

1). 실행문맥 생성 과정

a. 함수를 실행할 코드를 찾는다

b. 함수를 실행하기전에 실행문맥(execution context)를 만든다

c. 생성과정(creation stage)를 시작한다 -  활성객체(activation object)

1. Scope chain을 초기화 한다

2. 변수 객체을 만든다

- arguments 객체를 생성한다. 파라미터들을 확인과 이름과 값을 초기화하고 참초 값들을 복사한다

- 문맥의 정의된 함수를 검색

- variable object(변수객체)안에 함수의 이름과 같은 프로퍼티를 만든다

- 만약 함수 이름이 이미 존재한다면 덮어 씌운다

- 문맥의 정의된 변수 검색

- variable object(변수객체)안에 변수이름과 같은 프로퍼티를 생성하고 undefined 로 초기화한다

- 만약 변수명이 이미 존재한다면 아무 것도 안하고 그냥 검색을 마저 진행한다

3. 문맥안에 'this' 값을 결정한다

d. 코드 실행과정(Activation/ Code Execution Stage) 실행

     1. 줄 마다 문맥안의 함수 코드를 실행하고 변수의 값을 할당한다

4. 호이스팅(hoisting)의 원리

  function simple(){ console.log(name); //undefined console.log(car); //undefined var name='Hee'; var car = function(){ return 'Boo'; } }

1) 어떻게 name 변수가 선언 되기 전에 접근할 수 있는가?

- 생성과정(creation stage) 에서 변수를 undefined로 초기화 한다. 그렇기 때문에 에러 없이 undefined를 반환

- name은 이미  활성객체(activation object)에서 선언되어 있다

2) car 변수가 undefined인 이유?

-  car 안에는 함수이지만 변수로 선언되어 있다. 변수는 생성과정(creation stage)에서 선언된다

  function simple(){ console.log(name); //name show the function, not undefined var name='Hee'; function name(){ return 'Tom'; } }

1) name은 두번 선언되었다. name을 출력하면 undefined이 아니라 함수를 출력하는 이유는?

- 생성과정(creation stage) 에서 보면 함수가 활성객체(activation object)먼저 생성되고 이후에 변수가 생성된다. 그리고 프로퍼티이름이 이미 존재 한다면 선언을 통과한다

- 그러므로 위에서 name()를 먼저 선언하고 변수를 선언하는데 name 이름이 이미 있으므로 그냥 통과한다