1. 2일 전

    Date, JSON 객체

    Date, JSON 객체의 이모저모

  2. 19일 전

    ES6 - Generator

    Generation 함수 사용하기

  3. 26일 전

    ES6 - iteration & for ... of

    iteration과 활용

  4. 1달 전

    ES6 - Symbol

    왜 Symbol이 필요할까?

  5. 1달 전

    ES6 - Rest/Spread 연산자

    코드를 더 간결하게

  6. 2달 전

    ES6 - Promise

    콜백 지옥을 벗어나자

  7. 2달 전

    Webpack(3) - Plugin

    Plugin으로 더 강력한 Webpack

  8. 2달 전

    ES6 화살표 함수

    화살표 함수에 대해 깊게 이해하기

  9. 2달 전

    32. 이벤트

    이벤트 루프

  10. 2달 전

    JS가 객체지향언어라 할 수 있는 이유

    대체가능성, 내적동질성

  11. 3달 전

    Webpack(2) - Loader

    Loader로 다양한 파일 다루기

  12. 3달 전

    비동기 처리

    JavaScript에서 비동기 처리

  13. 3달 전

    19. 클로져

    JavaScript에서 클로저란?

  14. 3달 전

    18. 실행컨텍스트

    JavaScript에서 실행컨텍스트

  15. 3달 전

    17. this

    JavaScript에서 this

  16. 3달 전

    Webpack(1) - 기본편

    Webpack 대한 기본 이해

  17. 4달 전

    Babel(4) - polyfill

    더 많은 브라우저 지원하기

  18. 5달 전

    Babel(3) - 설정편

    설정하는 다양한 방법

  19. 5달 전

    Babel(2) - 실행편

    실습을 통한 더 깊은 이해

  20. 5달 전

    Babel(1) - 기본편

    babel에 대한 기본 이해

Tamm자바스크립트 웹 개발 환경을 좋아하고 사람들에게 재미를 주는 것에 관심이 많은 개발자 입니다.

18. 실행컨텍스트

JavaScript에서 실행컨텍스트

featured image thumbnail for post 18. 실행컨텍스트

실행가능한 코드를 형상화하고 구분하는 추상적인 개념 자바의 스택영역의 역할과 유사하다.

스코프 - 어떤 변수의 대한 유효범위 자바스크립트에서 스코프는 함수단위로 가졌는데, 보통의 언어들이 블락 스코프를 가지기 때문에 처음 자바스크립트를 배울 때 헷갈리는 요인이다. 자바스크립트에서 함수를 실행할 때 실행컨텍스트를 사용하는데, 이때 실행컨텍스트 별로 스코프를 가지기 때문이다.

6부터는 블락 스코프를 지원하는 변수들이 추가됐다. let, const

'인사이드 자바스크립트' 책과 등 실행컨텍스트를 설명하는 많은 곳에서 기준이 되는 버전은 es3 버전이라고 합니다. es5, 그리고 그 이후에도 몇가지 개념이 추가되었다고 합니다. 큰 틀에서는 벗어나지 않기 때문에 이 정도로 학습하여도 무방하다고 생각합니다.

실행 컨텍스트가 생성되어 코드가 실행되는 과정

1. 함수가 실행되면, 실행 컨텍스트를 생성한다.

18%20aa75de10af5e455fb203706d069e0181/_2020-06-15__6.42.04.png

2. 컨텍스트가 생성된 후, 이 컨텍스트에서 실행에 필요한 정보들을 담을 객체인 활성 객체를 생성한다. 활성 객체가 형상화한 대상을 가지는 객체다.

18%20aa75de10af5e455fb203706d069e0181/_2020-06-15__6.42.10.png

3. 활성 객체 내에, 매개변수의 정보를 갖는 arguments 객체를 생성하고, 함수가 호출될 때 사용된 인자들을 넣는다. arguments 객체는 유사배열 객체이다.

18%20aa75de10af5e455fb203706d069e0181/_2020-06-15__6.42.14.png

4. 활성 객체 내에, 이 실행 컨텍스트의 스코프 체인을 생성한다. 스코프 체인은 리스트의 형태이며, 현재 함수를 호출한 함수의 스코프체인에 현재 활성객체를 마지막에 추가한 리스트를 현재 활성객체에 추가한다. 세바의 코딩교실 / 스코프 체인에 대한 설명

18%20aa75de10af5e455fb203706d069e0181/_2020-06-15__6.42.19.png

5. 변수 객체가 생성되고, 함수가 가지고 있는 변수 및 객체 정보를 생성한다. 변수객체는 새로 생성되지만, 변수 객체와 활성 객체는 같다. 함수내에서 선언된 모든 변수를 생성한다. (코드가 실행되기 전에 변수에는 값이 할당되지 않기 때문에 생성한 변수, 함수들 모두 undefined가 된다.

18%20aa75de10af5e455fb203706d069e0181/_2020-06-15__6.42.24.png

6. this에 대한 정보를 저장하며, 이 객체에 바인딩한다. this에 바인딩할 대상이 없을 수도 있는데, 그때는 window로 바인딩한다.

18%20aa75de10af5e455fb203706d069e0181/_2020-06-15__6.42.28.png

7. 활성 객체(변수 객체)가 생성되면 코드를 실행할 준비를 마침. 코드를 실행시킨다.

코드를 실행하면 할당하지 실제로 foo, var, func에 값이 할당된다.

8. 실행컨텍스트 파기. 코드를 실행 후 실행컨텍스트를 파기한다.

(추가 2019.01.27) wonmin님께서 댓글로 실행컨텍스트를 시각적으로 확인할 수 있는 링크를 알려주셨습니다. tylermcginnis / 실행컨텍스트를 시각적으로 확인