Skip to main content

Command Palette

Search for a command to run...

실행 컨텍스트

Updated
•View as Markdown
실행 컨텍스트

실행 컨텍스트

실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(호이스팅), 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행합니다.

하나의 실행 컨텍스트를 구성할 수 있는 방법

전역 공간, eval() 함수, 함수 등이 있습니다. 자동으로 생성되는 전역공간과 eval을 제외하면 우리가 흔히 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것입니다. (ES6에서는 블록에 의해서도 새로운 실행 컨텍스트가 생성됩니다)

실행 컨텍스트는 어떻게 구성되어 있을까?

  • VariableEnvironment

    • environmentRecord(snapshot)

    • outerEnvironmentReference(snapshot)

  • LexicalEnvironment

    • environmentRecord

    • outerEnvironmentReference

  • ThisBinding

VariableEnvironment와 LexicalEnvironment의 차이점

VariableEnvironment에 담기는 내용은 LexicalEnvironment와 같지만 최초 실행 시의 스냅샷을 유지한다는 점이 다릅니다. 실행 컨텍스트를 생성할 때 VariableEnvironment에 정보를 먼저 담은 다음, 이를 그대로 복사해서 LexicalEnvironment를 만들고, 이후에는 LexicalEnvironment를 주로 활용하게 됩니다.

environmentRecord

environmentRecord에는 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장됩니다. 컨텍스트를 구성하는 함수에 지정된 매개변수 식별자, 선언한 함수가 있을 경우 그 함수 자체, var로 선언된 변수의 식별자 등이 식별자에 해당합니다. 컨텍스트 내부 전체를 처음부터 끝까지 쭉 훑어나가며 순서대로 수집합니다.

호이스팅

코드를 실행하기 전 변수의 식별자와 함수 선언문을 스코프의 최상단으로 끌어 올리는 것과 같은 현상입니다. environmentRecord에서 변수 정보를 모두 수집했더라도 아직 실행 컨텍스트가 관여할 코드들은 실행되기 전의 상태입니다. 코드가 실행되기 전부터 이미 해당 환경에 속한 코드의 변수명들을 모두 알고 있게 되는 셈인데, 이는 식별자들이 코드의 최상단으로 끌어 올려진 상태와 비슷하게 해석할 수도 있습니다. 이를 호이스팅이라 하는데 변수 정보를 수집하는 과정을 이해하기 쉬운 방법으로 대체한 가상의 개념입니다.

함수 선언문과 함수 표현식

둘 모두 함수를 새롭게 정의할 때 쓰이는 방식입니다. 함수 선언문은 function 정의부만 존재하고 별도의 할당 명령이 없는 것을 의미하고, 반대로 함수 표현식은 정의한 function을 별도의 변수에 할당하는 것을 말합니다. 함수명을 정의한 함수 표현식을 ‘기명 함수 표현식’, 정의하지 않은 것을 ‘익명 함수 표현식’이라고 부르기도 하는데 일반적으로 함수 표현식은 익명 함수 표현식을 말합니다.

// 함수 선언문. 함수명 a가 곧 변수명.
function a () { /* ... */ } 
a(); // 실행 OK.

// (익명) 함수 표현식. 변수명 b가 곧 함수명.
var b = function () { /* ... */ } 
b(); // 실행 OK.

// 기명 함수 표현식. 변수명은 c, 함수명은 d.
var c = function d () { /* ... */ } 
c(); // 실행 OK.
d(); // 에러!

함수 선언문과 함수 표현식의 차이점

함수 선언문은 전체를 호이스팅하고 함수 표현식은 변수 선언부만 끌어올립니다.

스코프, 스코프 체인

스코프란 식별자에 대한 유효범위입니다. 자바스크립트의 경우 ES5까지는 전역공간을 제외하면 오직 함수에 의해서만 스코프가 생성됩니다. 이러한 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것을 스코프체인이라 합니다. 그리고 이를 가능케 하는 것이 바로 outerEnvironmentReference입니다.

스코프체인과 실행 컨텍스트

outerEnvironmentReference는 현재 호출된 함수가 선언될 당시의 LexicalEnvironment를 참조합니다. 선언 시점의 LexicalEnvironment를 계속 찾아 올라가면 마지막엔 전역 컨텍스트의 LexicalEnvironment가 있을 것입니다. 또한 각 outerEnvironmentReference는 오직 자신이 선언된 시점의 LexicalEnvironment만 참조하고 있으므로 가장 가까운 요소부터 차례대로만 접근할 수 있고 다른 순서로 접근하는 것은 불가능할 것입니다. 이런 구조적 특성 덕분에 여러 스코프에서 동일한 식별자를 선언한 경우에는 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근 가능하게 됩니다.

More from this blog

이터레이션/이터러블/이터레이터

이터레이션 프로토콜 (Iteration protocols) 순회할 수 있는 데이터 컬렉션(배열, 문자열, 유사 배열 객체, DOM 컬렉션 등)을 만들기 위해 ES6에서 도입한 규칙입니다. ES6 이전에도 순회 가능한 데이터 컬렉션들은 통일된 규약 없이 각자 나름의 구조를 가지고 for 문, for...in 문, forEach 메서드 등 다양한 방법으로 순회할 수 있었습니다. 하지만 ES6에서 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준...

Apr 3, 2023
이터레이션/이터러블/이터레이터

자바스크립트의 함수는 일급 객체

일급 객체란 일급 객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체입니다. 다음과 같은 조건을 만족하는 객체를 일급 객체라 합니다. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다 변수나 자료구조(객체, 배열 등)에 저장할 수 있다 함수의 매개변수에 전달할 수 있다 함수의 반환값으로 사용할 수 있다 자바스크립트의 함수는 위의 조건을 모두 만족하므로 일급 객체입니다. // 1. 함수는 무명의 리터럴...

Feb 21, 2023
자바스크립트의 함수는 일급 객체

클로저 Closure

클로저 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상을 말합니다. 다른 표현들 함수를 선언할 때 만들어지는 유효범위가 사라진 후에도 호출할 수 있는 함수 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수 자신이 생성될 때의 스코프에서 알 수 있었던 변수들 중 언젠가 자신이 실행될 때 사용할 변수들만을 기억하여 유지시키는 함수 va...

Dec 12, 2022
클로저 Closure

콜백 함수 Callback function

콜백함수 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수입니다. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행할 것입니다. 콜백 함수 내부에서 this가 가리키는 대상 콜백 함수도 함수이기 때문에 기본적으로는 this가 전역객체를 참조하지만, 제어권을 넘겨받을 코드에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조하게 됩니다. setTim...

Dec 12, 2022
콜백 함수 Callback function

EuiJin's blog

10 posts

프론트엔드 개발자