실행 컨텍스트란?

Stack, Queue

• Stack : FILO(First In Last Out), LIFO(Last In First Out)
• Queue : FIFO(First In First Out), LILO(Last In Last Out)

실행 컨텍스트

• 실행할 코드에 제공할 정보들을 모아 놓은 객체

실행 컨텍스트의 동작

• 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트 구성
• 컨텍스트들을 순서대로 Call Stack에 쌓아 올림
• 최상위 컨텍스트와 관련 있는 코드들을 실행
• 전체 코드의 환경과 순서를 보장

실행 컨텍스트의 구성 방법

• 전역 공간 → 자동 실행
• eval() 함수 → 사용을 권장하지 않음
• 함수 → 가장 흔한 실행 컨텍스트 구성 방법
• 블록 → { } 로 둘러 쌓인 코드 내부. ES6 부터 지원

실행 컨텍스트와 콜스택

예제 코드

// ------------------- (1)
var a = 1;
function outer() {
  function inner() {
    console.log(a);
    var a = 3;
    // --------------- (2)
  }
  inner(); // -------- (3)
  console.log(a);
  // ----------------- (4)
}
outer(); // ---------- (5)
console.log(a);
// ------------------- (6)

• 실행 순서 : (1) → (5) → (3) → (2) → (4) → (6)

콜스택 변화

활성화 된 실행 컨텍스트의 수집 정보

• VariableEnvironment
  • environmentRecord (snapshot)
  • outerEnvironmentReference (snapshot)
• LexicalEnvironment
  • environmentRecord
  • outerEnvironmentReference
• ThisBinding

VariableEnvironment

• 담기는 내용은 LexicalEnvironment와 같지만 최초 실행 시의 스냅샷을 유지
• 실행 컨텍스트 생성 시 VariableEnvironment에 먼저 정보를 담고, 그대로 LexicalEnvironment에 복사 한 후 주로 LexicalEnvironment를 활용
• 내부 구성 요소 : 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보가 선언 시점의 스냅샷으로 저장
  • environmentRecord (snapshot)
  • outerEnvironmentReference (snapshot)

LexicalEnvironment

• 정의
  • 한국어로 번역 시 '어휘적 환경', '정적 환경'을 사용하는데 모두 적절치 않음
  • 현재 컨텍스트 내부에는 a, b, c와 같은 식별자들이 있고, 그 외부 정보는 D를 참조하도록 구성
  • 위와 같은 구성이 마치 사전과 비슷하여 '사전적 환경'이 더 적합한 표현
  • 하지만 그냥 의미만 이해하고 지칭할 때는 LexicalEnvironment로 사용하는 것이 가장 좋음
• 내부 구성 요소 : VariableEnvironment와 동일하지만 변경 사항이 실시간으로 반영 됨
  • environmentRecord
  • outerEnvironmentReference

environmentRecord와 호이스팅(hoisting)

environmentRecord

• 현재 컨텍스트와 관련 된 코드의 식별자 정보들이 저장
  • 컨텍스트를 구성하는 함수에 지정된 매개변수 식별자
  • 선언한 함수가 있을 경우 그 함수 자체
  • var로 선언 된 변수의 식별자
• 컨텍스트 내부 전체를 처음부터 끝까지 쭉 훑어나가며 순서대로 수집
• 전역 실행 컨텍스트
  • 변수 객체 생성 대신 자바스크립트 구동 환경이 별도로 제공하는 전역 객체를 활용
  • 브라우저의 window, Node.js의 global 객체 등
  • 이들은 내장(native) 객체가 아닌 호스트(host) 객체로 분류

호이스팅의 등장

• 변수 정보를 수집하는 과정을 마쳤다면, 코드가 실행되기 전임에도 불구하고 자바스크립트 엔진은 이미 해당 환경에 속한 코드의 변수명들을 모두 알고 있게 됨
• '자바스크립트 엔진은 식별자들을 최상단으로 끌어 올려 놓은 다음 실제 코드를 실행하라'라고 생각해도 코드 해석에 문제가 없음
• 이러한 과정에서 호이스팅이라는 개념이 등장

호이스팅의 개념

• 호이스팅(hoisting) : hoist (끌어 올리다) + ~ing → 식별자들을 최상단으로 끌어 올려 놓자
• 변수 정보를 수집하는 과정을 더욱 이해하기 쉬운 방법으로 대체한 가상의 개념
• 자바스크립트 엔진이 실제로 끌어 올리지는 않지만 편의상 끌어 올리는 것으로 간주하자는 것

호이스팅 규칙 - 매개 변수와 변수 선언에 대한 호이스팅

• environmentRecord는 현재 실행 될 컨텍스트 대상 코드 내에 어떤 식별자들이 있는지에만 관심이 있지, 각 식별자들이 어떤 값이 할당 될지에는 관심이 없음
• 예제 - 원본

function a (x) { // 수집 대상 1 (매개 변수)
  console.log(x); // (1)
  var x; // ------- 수집 대상 2 (변수 선언)
  console.log(x); // (2)
  var x = 2; // --- 수집 대상 3 (변수 선언)
  console.log(x); // (3)
}

a(1);

• 호이스팅이라는 개념을 모른다고 했을 때, 위의 코드를 보고 (1) ~ (3)의 값을 예상해 보자

  • (1) : 매개변수로 전달 된 1
  • (2) : 지역변수로 x가 선언되었지만 값이 없으므로 undefined
  • (3) : 지역변수 x에 할당 된 2

• 하지만 실제 결과는 1, 1, 2 가 나오게 됨. 결과 확인

• 매개 변수, 변수 선언이 어떻게 호이스팅 되는지 개념적으로 확인하기 위해 아래의 예제 코드 확인

• 예제 - 매개 변수 호이스팅

function a () {
  var x = 1; // --- 수집 대상 1 (매개 변수)
  console.log(x); // (1)
  var x; // ------- 수집 대상 2 (변수 선언)
  console.log(x); // (2)
  var x = 2; // --- 수집 대상 3 (변수 선언)
  console.log(x); // (3)
}

a();

• 매개변수를 변수 선언 및 할당과 같다고 간주하여 변환한 상태

• 결과는 동일. 결과 확인

• 예제 - 변수 선언 부분과 할당 부분을 나눠 호이스팅

function a () {
  var x; // -------- 수집 대상 1(매개 변수)의 변수 선언 부분
  var x; // -------- 수집 대상 2의 변수 선언 부분
  var x; // -------- 수집 대상 3의 변수 선언 부분
  x = 1; // -------- 수집 대상 1의 할당 부분
  console.log(x); // (1)
  console.log(x); // (2)
  x = 2; // -------- 수집 대상 3의 할당 부분
  console.log(x); // (3)
}

a();

• environmentRecord는 현재 실행 될 컨텍스트 대상 코드 내에 어떤 식별자들이 있는지에만 관심이 있기 때문에 변수 선언 부분만 최상단으로 올라가게 됨
• 결과는 동일. 결과 확인

호이스팅 규칙 - 함수 선언에 대한 호이스팅

• 예제 - 원본

function a() {
  console.log(b); // (1)
  var b = 'bbb'; // 수집 대상 1 (변수 선언)
  console.log(b); // (2)
  function b() {} // 수집 대상 2 (함수 선언)
  console.log(b); // (3)
}
a();

• 지금까지의 지식을 동원해 (1) ~ (3)을 예상해 보자

  • (1) : 변수, 함수의 선언부가 호이스팅 되어 b가 선언은 되어 있으나 값이 없으니 undefined
  • (2) : 바로 위에서 b에 'bbb'를 할당 받았으니 bbb
  • (3) : 바로 위에 b를 함수로 선언 했으니 function b() {}

• 하지만 결과는 function b() {}, bbb, bbb 가 나오게 됨. 결과 확인

• 예제 - 변수 선언, 함수 선언 호이스팅

function a() {
  var b; // ------------------- 수집 대상 1(변수 선언) 의 선언 부분
  function b() {} // ---------- 수집 대상 2(함수 선언) 의 전체
  // var b = function b() {} // (*) 위의 코드를 이렇게 표현도 가능
  console.log(b); // ---------- (1)
  b = 'bbb'; // --------------- 수집 대상 1의 할당 부분
  console.log(b); // ---------- (2)
  console.log(b); // ---------- (3)
}
a();

• 변수는 선언부와 할당부를 나눠 선언부만 끌어올리지만, 함수는 함수 전체를 끌어 올림
• 호이스팅이 끝난 상태에서의 함수 선언문은 (*)과 같이 함수명으로 선언한 변수에 함수를 할당한 것처럼 여길 수 있음
• 결과는 동일. 결과 확인

함수 선언문과 함수 표현식

• 함수 선언문 : 함수 정의부만 존재하고 별도의 할당 명령이 없는 것
  • 호이스팅 시 함수 전체를 끌어 올림
• 함수 표현식 : 정의한 함수를 별도의 변수에 할당하는 것
  • 익명 함수 표현식 : 함수명을 정의하지 않음
  • 기명 함수 표현식 : 함수명을 정의함
    • 외부에서 함수명으로 호출 불가능
    • 내부에서 재귀함수를 호출하는 용도로 사용. 하지만 변수명으로도 호출 가능하여 굳이 쓸 필요는 없어 보임
    • 호이스팅 시 변수로 취급되어 선언 부분만 끌어 올림

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

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

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

함수 선언문의 위험성

• 함수 선언문이 코드 상단에 선언되어 있는 상태에서 동일한 이름의 함수 선언문이 코드 하단에 중복해서 선언 될 경우.
• 호이스팅 과정에서 두 함수 선언문이 모두 끌어 올려지고, 상대적으로 하단에 있는 함수 선언문이 코드 전체에 영향을 미치게 됨.
• 함수 표현식으로 함수를 사용한다면 하단의 함수가 나오기 전까지는 상단에 선언 된 함수로 사용 되다가 하단의 함수가 나오면 그때 부터 하단의 함수로 적용 됨.
• 예제 - 함수 선언문

console.log(sum(3, 4)); // (1) : 7을 기대하지만, 3 + 4 = 7이 출력

function sum(x, y) { // -- 상단 함수
  return x + y;
}

var a = sum(1, 2);
console.log(a); // ------- (2) : 3을 기대하지만, 1 + 2 = 3이 출력

function sum(x, y) { // -- 하단 함수
  return `${x} + ${y} = ${x + y}`;
}

var c = sum(1, 2);
console.log(c); // ------- (3) : 1 + 2 = 3이 출력

• 결과 확인

• 예제 - 함수 표현식

// console.log(sum(3, 4)); // (1) : sum의 값이 없어서 undefined를 반환하기 때문에 에러! 

var sum = function (x, y) { // -- 상단 함수
  return x + y;
}

var a = sum(1, 2);
console.log(a); // ------- (2) : 3 출력

var sum = function (x, y) { // -- 하단 함수
  return `${x} + ${y} = ${x + y}`;
}

var c = sum(1, 2);
console.log(c); // ------- (3) : 1 + 2 = 3이 출력

• 결과 확인

스코프, 스코프 체인, outerEnvironmentReference

• 스코프 (Scope) : 식별자에 대한 유효 범위
  • ES5까지는 전역 공간 외의 오직 함수에 의해서만 스코프가 생성
• 스코프 체인 (Scope chain) : 식별자에 대한 유효 범위를 안에서 부터 바깥으로 차례로 검색해 나가는 것
  • 스코프 체인을 가능케 하는 것이 outerEnvironmentReference

스코프 체인

• 현재 스코프에 선언 된 식별자이 없으면 상위 스코프로 이동하여 검색
• 여러 스코프에서 동일한 식별자를 선언한 경우에는 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근 가능
• 변수 은닉화 (Variable shadowing) : 상위 스코프에 선언되어 있지만, 현재 스코프에 이미 선언된 경우에는 값이 할당되어 있지 않다고 하더라도 현재 스코프의 변수를 우선으로 함
• 예제

var a = 1;
var outer = function() {
  var inner = function() {
    console.log(a); // (1)
    var a = 3;
  };
  inner();
  console.log(a); // - (2)
}
outer();
console.log(a); // --- (3)

• (1) inner 함수 컨텍스트에는 a 식별자가 존재하지만 아직 값이 할당되지 않았기 때문에 undefined 을 출력
• (2) outer 함수 컨텍스트에는 a 식별자가 존재하지 않으므로, outerEnvironmentReference를 따라가서 전역 컨텍스트의 a에 들어 있는 1을 출력
• (3) 전역 컨텍스트에는 a 식별자가 존재하고 값이 존재하므로 1 을 출력
• 결과 확인

스코프 체인 확인 - 크롬 전용

var a = 1;
var outer = function() {
  var b = 2;
  var inner = function() {
    // console.log(b); // 
    console.dir(inner);
  };
  inner();
}
outer();

• 함수 내부에서 실제로 호출할 외부 변수들의 정보만 보여줌
• b 제외 결과 확인

• b 포함 결과 확인

전역변수와 지역변수

• 전역변수 : 전역 공간에서 선언한 변수
• 지역변수 : 함수 내부에서 선언한 변수

this

• 실행 컨텍스트의 thisBinding에는 this로 지정 된 객체가 저장됨
• 실행 컨텍스트 활성화 당시에 this가 지정되지 않은 경우, this에는 전역 객체가 저장 됨
• 그 밖에는 함수를 호출하는 방법에 따라 this에 저장되는 대상이 다름