[240427 WIL] 실행컨텍스트

이번 주는 개인학습 주차였습니다.
그동안 안다고 생각했지만 다시 생각해보니 정확히 모르고있었던
실행컨텍스트, this바인딩, 클로저 등의 개념에 대해 공부하였고, 이해할 수 있었습니다.
이번 주차에 공부한 내용을 정리해보려고 합니다.

실행 컨텍스트

JavaScript에서 "실행 컨텍스트(Execution Context)"는 코드가 실행되기 위한 환경이나 상태를 말합니다. 실행 컨텍스트는 JavaScript 엔진이 코드를 실행할 때 관련 정보를 담고 있는 내부 데이터 구조입니다. 실행 컨텍스트에는 변수, 객체, 함수 호출 등 코드의 실행에 필요한 모든 정보가 포함되어 있습니다.

실행 컨텍스트의 구성 요소

실행 컨텍스트는 크게 세 가지 주요 구성 요소를 가지고 있습니다:

1. 변수 환경(Variable Environment): 현재 컨텍스트 내의 변수, 선언, 함수 선언 등을 저장합니다.
2. 외부 환경 참조(Outer Environment Reference): 외부 렉시컬 환경에 대한 참조로, 현재 컨텍스트 외부의 코드와 관련된 스코프 체인을 결정합니다.
3. this 바인딩: 함수가 호출될 때 결정되는 this의 값입니다.

실행 컨텍스트의 종류

JavaScript에서는 크게 세 가지 타입의 실행 컨텍스트가 있습니다:

1. 전역 실행 컨텍스트(Global Execution Context): 코드가 처음 실행될 때 생성되는 기본, 기초적인 실행 컨텍스트입니다. 전역 변수와 함수는 여기에 저장됩니다.
2. 함수 실행 컨텍스트(Function Execution Context): 함수가 호출될 때마다 생성됩니다. 각 함수 호출마다 고유한 실행 컨텍스트가 있으며, 함수의 매개변수, 지역 변수 등이 이 안에서 관리됩니다.
3. eval 실행 컨텍스트(Eval Execution Context): eval 함수가 호출될 때 생성됩니다.

실행 컨텍스트 스택(Call Stack)

JavaScript는 싱글 스레드 언어로, 한 번에 하나의 실행 컨텍스트만 처리할 수 있습니다. 실행 컨텍스트 스택(또는 콜 스택)은 코드의 실행 순서를 관리하는 스택 구조로, 현재 실행 중인 컨텍스트를 추적합니다. 새로운 함수가 호출되면 새로운 함수 실행 컨텍스트가 스택에 푸시(push)되고, 함수 실행이 끝나면 해당 실행 컨텍스트는 스택에서 팝(pop)됩니다.

예시

let globalVar = "global";

function outerFunc(param) {
    function innerFunc() {
        console.log(globalVar, param);
    }
    innerFunc();
}

outerFunc("outer");

위 예시에서, outerFunc을 호출하면 outerFunc에 대한 새로운 실행 컨텍스트가 생성되고, outerFunc 내에서 innerFunc을 호출하면 innerFunc에 대한 실행 컨텍스트가 그 위에 쌓입니다. innerFunc의 실행이 끝나면, 그 실행 컨텍스트는 스택에서 제거되고, outerFunc의 실행이 끝나면 outerFunc의 실행 컨텍스트도 스택에서 제거됩니다.

this 바인딩

일반 function 함수의 경우

함수가 호출되는 방식에 따라 달라집니다.

• 전역에서 호출될 때 : 전역객체
• 메소드로 호출될 때 : 호출한 객체
• 생성자 함수로 호출될 때 : 컨스트럭터
• apply, call, bind 시 : 명시적으로 지정된 객체

화살표 함수의 경우

함수 자체의 this 바인딩 과정이 없습니다
상위 스코프의 this와 같습니다

function normalFunction() {
    console.log(this);
}

const arrowFunction = () => {
    console.log(this);
};

normalFunction();  // 전역 객체 (브라우저에서는 window)
arrowFunction();  // 전역 객체 (브라우저에서는 window)

const obj = {
    normalMethod: normalFunction,
    arrowMethod: arrowFunction,
};

obj.normalMethod();  // obj
obj.arrowMethod();  // 전역 객체 (브라우저에서는 window)

이 예에서 볼 수 있듯이, 일반 함수는 호출 방식에 따라 this가 달라지지만,
화살표 함수는 항상 선언된 컨텍스트의 this를 따릅니다. 따라서 화살표 함수는
주로 그 특성 때문에 콜백 함수나 클로저에서 유용하게 사용됩니다,
특히 내부 함수에서 외부 함수의 this에 접근해야 할 때 매우 유용합니다.

클로저

함수가 중첩된 상황, 외부 함수가 실행되고 종료했음에도 내부 함수에서
외부 함수 스코프의 변수에 계속 접근할 수 있는 상태
상태를 안전하게 변경하고 유지하기 위해 사용

// 1번 예시
function outer(){
  let x = 'hello';
  function inner(){
    console.log(x);
  }
  return inner
}

const innerFunction = outer();
innerFuction(); //hellow

// 2번 예시
const closure = (() => {
    let x = 'hello';
      return (){
          console.log(x)
    }
})()