1. 컨텍스트

컨텍스트에는 execution 컨텍스트와 lexical 컨텍스트 이렇게 2가지가 존재한다.

[ 실행 컨텍스트 ]

실행 맥락

실행 컨텍스트는 코드를 실행할 때 정의되는 환경, 즉 실행 가능한 코드가 실행되기 위한 필요한 환경이라 정의할 수 있다.

※ 실행 컨텍스트 = 전역 컨텍스트(함수를 제외한 환경) + 함수 컨텍스트(함수 호출시 함수 환경)

실행 컨텍스트를 통해 함수 인자의 parameter, argument 나 this 정의, Scope Chain 에 대한 정의가 이루어 진다.

실행 컨텍스트의 처리과정

• 먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생깁니다.
• 컨텍스트 생성 시 컨텍스트 안에 변수객체(arguments, variable), scope chain, this가 생성됩니다.
• 컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 값을 찾고, 없다면 스코프 체인을 따라 올라가며 찾습니다.
• 함수 실행이 마무리되면 해당 컨텍스트는 사라집니다.(클로저 제외) 페이지가 종료되면 전역 컨텍스트가 사라집니다.

[ 렉시컬 컨텍스트(정적 컨텍스트) ]

어휘 맥락

렉시컬 컨텍스트는 코드를 작성하는 시점에 정의되는 환경

그냥 우리가 코드로 보는 그 자체의 시점

• 일반 객체에서 실행 컨텍스트

const person = {
  name: 'kim hee tae',
  age: 20,
  getAge() {
    return this.age;
  }
};

person.age; // 20
person.getAge(); // 20

const age = person.getAge;
age(); // undefined
// 전역 컨텍스트에 age에 할당된 값은 없다.

age.call(person); // 20

• 클래스에서 실행 컨텍스트

// 
class Persons {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
    this.getAge = this.getAge.bind(this); // (D)
  }
  
  getAge() {
    return this.age;
  }

  getName = () => { // (F)
    return this.name;
  }
}

const p2 = new Persons('heetae', 25);

// (A)
p2.getAge(); // 20

// (B)
const myAge = p2.getAge;
//myAge(); // undefined

// (C)
// execution 컨텍스트의 특성 활용
// - call(p2)
const myAge2 = p2.getAge;
myAge2.call(p2); // 25

// (D)
// execution 컨텍스트의 특성 활용
// - bind(this)
const myAge3 = p2.getAge;
myAge3(); // 25

// (E)
// (D 의 bind(this) 를 제외한 상태에서)
// execution 컨텍스트의 특성 활용
// - bind(p2)
const myAge4 = p2.getAge;
myAge4.bind(p2);   // ƒ getAge() { return this.age; }
myAge4.bind(p2)(); // 25

// (F)
// lexical 컨텍스트의 특성 활용
// - arrow function
const myName = p2.getName;
myName(); // heetae

💡JavaScript의 성격

• 동적 바인딩 (런타임 환경에서 this 및 타입 정의)
• 정적 스코프 (코드 작성 시 유효 범위)
• 실행 컨텍스트 (코드 실행 시 실행 환경) & 렉시컬 컨텍스트