Execution Context

[hwinkr]

Questions

1. 실행 컨텍스트란 무엇인가요?

• 매일메일 - 실행컨텍스트에 대해서 설명해 주세요
• https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-4/execution-context.md
• https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/javascript/execution-context.md
• https://github.com/ssi02014/Front-Interview/blob/master/documents/JavaScript/execution-context.md

2. 호이스팅 현상이란 무엇이고 실행 컨텍스트와 어떤 관계가 있을까요?

• 꼬리질문: var, let, const의 차이를 알고 계신가요?
• 꼬리질문: TDZ(Temporal Dead Zone)에 대해서 알고 계신가요?
• https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-5/hoisting.md

3. 스코프란 무엇인가요?

• 꼬리질문: 자바스크립트에서 스코프는 어떻게 결정되나요?
• 꼬리질문: 스코프 체인은 뭔가요?
• 꼬리질문: 함수 레벨 스코프, 블록 레벨 스코프, 렉시컬 스코프의 차이?
• https://github.com/ssi02014/Front-Interview/blob/master/documents/JavaScript/scope.md

5. this 바인딩이란 무엇이며, 실행 컨텍스트에서 this는 어떻게 결정될까요?

[hwinkr]

1. 실행 컨텍스트란 무엇인가요?

• 우테코 4기 선배님들 - Scope, 실행 컨텍스트
• 슬링키 블로그 - 실행 컨텍스트
• 버건디 블로그 - 실행 컨텍스트 정리
• Front-Interview 실행 컨텍스트
• Must-Know-About-Frontend 실행 컨텍스트

Execution Context = {
  ThisBinding: {},
  LexicalEnvironment: {
      EnvironmentRecord: {
          DeclarativeEnvironmentRecord: {},
          ObjectEnvironmentRecord :{},
      },
      OuterEnvironmentReference: {},
  },
  VariableEnvironment: {
      EnvironmentRecord: {
          DeclarativeEnvironmentRecord: {},
          ObjectEnvironmentRecord :{},
      },
      OuterEnvironmentReference: {},
  }
}

실행 컨텍스트란 자바스크립트 코드가 실행되기 위한 환경 정보들이 담긴 객체입니다. 실행 컨텍스트는 코드들을 실행할 때, 필요한 정보들을 모아서 객체를 구성하고 콜 스택에 쌓아 올렸다가 가장 위에 있는 현재 실행되고 있는 컨텍스트와 관련 있는 코드들을 실행하는 방식으로 전체 코드의 환경, 실행 순서를 보장해 줍니다.

특정 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행합니다.

실행 컨텍스트는 변수 환경, 렉시컬 환경, this 바인딩으로 구성됩니다. 변수 환경은 var로 선언된 변수의 초기화를 위해서 사용되고, var 변수에 undefined 값을 할당하고 기록합니다. 렉시컬 환경에는 let, const 로 선언된 변수와 함수 선언 및 표현식 저장됩니다. var 변수도 평가 단계 후, 렉시컬 환경에서 관리됩니다. 렉시컬 환경으로 인해서 자바스립트 엔진이 어떤 변수를 참조할지 결정할 수 있게 됩니다.

this 바인딩은 실행 컨텍스트에서 참조할 this를 결정하는 것을 말합니다. 어떤 환경에서 실행 컨텍스트가 생성되었는지에 따라 동적으로 결정됩니다.

[hwinkr]

2. 호이스팅 현상이란 무엇이고 실행 컨텍스트와 어떤 관계가 있을까요?

호이스팅 현상은 변수, 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 현상을 말합니다. 선언부가 실제 작성된 위치와 관계없이 스코프의 최상단에서 선언된 것 처럼 동작합니다. 따라서, 값을 할당하기 전에도 접근할 수 있습니다.

자바스크립트는 평가, 실행 두 단계로 나누어 코드를 실행합니다. 평가 단계에서 실행 컨텍스트를 생성하고 해당 컨텍스트에서 사용할 변수, 함수 선언을 미리 확인하여 렉시컬 환경에 저장합니다. 이 때, 변수 선언과 함수 선언문이 호이스팅되기 때문에 값을 할당하기 전에도 접근할 수 있게 됩니다.

2 - 1. var, let, const의 차이점을 알고 계신가요?

var, let, const 모두 변수나 함수 선언문을 위해 사용될 수 있다는 점에서 같습니다. 하지만, 선언 및 초기화가 되는 시점에는 차이가 있습니다. var는 평가 단계에서 undefined로 초기화됩니다. 이 때, var는 변수 환경에 저장됩니다.

let, const도 평가 단계에서 초기화되는 것은 맞지만 undefined가 아닌 uninitialized로 설정됩니다. var와는 다르게 초기화 되지 않은 상태로 설정됩니다.

let, const 사이에도 차이점이 있습니다. let은 선언과 초기화가 분리되어 있지만 const는 선언과 동시에 초기화가 이루어져야 하기 때문에 const 키워드로 변수 선언만 하고 값을 할당하지 않으면 에러가 발생합니다.

2 - 2. TDZ(Temporal Dead Zone)에 대해서 알고 계신가요?

TDZ는 let, const 키워드로 선언된 변수가 값이 초기화되지 않았을 때 접근하려고 하는 영역입니다. let, const는 평가 단계에서 undefined로 값이 초기화는 것이 아닌, <uninitialized>로 값이 초기화되지 않았음을 표시합니다. <uninitialized>로 표시되어 있을 때, 변수에 접근해서 값을 참조하려고 하면 ReferenceError가 발생합니다.

[hwinkr]

3. 스코프란 무엇인가요?

스코프는 변수와 함수에 접근할 수 있는 유효 범위를 말합니다. 실행 컨텍스트가 생성될 때, 코드가 실행되는 환경에 대한 정보를 담으며 이를 통해 현재 스코프와 변수 참조를 관리할 수 있습니다. 실행 컨텍스트의 렉시컬 환경에는 환경 레코드가 있습니다. 이 환경 레코드에 현재 스코프에 선언된 변수, 함수를 기록합니다.

3 - 1. 자바스크립트에서 스코프는 어떻게 결정되나요?

자바스크립트에서 스코프는 코드가 작성된 위치에 의해 결정됩니다. 이를 렉시컬 스코프라고 합니다. 특정 함수 내부에서 참조할 변수를 함수가 호출될 때 결정하지 않고, 선언된 위치에 의해서 결정됩니다. 평가 단계에서 환경 레코드 내부의 정보를 통해서 스코프가 결정된다고 할 수 있습니다.

var x = 1; 

function first() {
  var x = 10;
  second();
}

function second() {
  console.log(x);
}

first(); // 1
second(); // 1

3 - 2. 스코프 체인은 뭔가요?

스코프 체인은 현재 실행 컨텍스트에서 참조하는 변수, 함수의 선언에 접근할 수 없을 때 상위 렉시컬 환경으로 이동하여 찾는 과정을 말합니다. 실행 컨텍스트의 렉시컬 환경에는 현재 스코프를 관리할 수 있는 환경 레코드, 상위 렉시컬 환경을 참조할 수 있는 외부 렉시컬 환경 참조가 있습니다. 외부 렉시컬 환경 참조 필드를 따라 상위 렉시컬 환경으로 이동하면서 참조하려는 식별자를 찾아가는 과정입니다.