자바스크립트(JavaScript) - 실행 컨텍스트 이해와 구성요소

자바스크립트 튜토리얼

자바스크립트 튜토리얼

실행 컨텍스트의 이해

실행 컨텍스트의 정의

실행 컨텍스트는 코드의 동작 환경을 나타나며 변수, 함수, 스코프 정보, this 값과 같은 실행 흐름을 결정하는 요소들을 포함하는 자바스크립트 코드 실행에 관한 상자입니다. 즉 코드가 실행되는 동안 필요한 정보를 담은 객체로서 중요한 역할을 합니다. 

프로그램을 실행 하기 위한 정보 저장 하는 곳이 실행 컨텍스트 입니다.

 

실행컨텍스트

실행 컨텍스트의 역할

• 변수 객체 생성(VO) 관리
  각 실행 컨텍스트는 해당 컨텍스트에서 사용되는 변수 및 함수 선언을 저장 하는 VO(Variable Object) 변수객체를 생성 합니다. 변수, 매개변수, 함수선언 등이 포함됩니다.
  

  function exampleFunction(a, b) {
      var c = 10;
      function innerFunction(d) {
          return a + b + c + d;
      }
      return innerFunction(5);
  }
  
  exampleFunction(1, 2);  // 결과: 18​​

변수 객체 VO

• 스코프 체인 생성(SC) 유지
  스코프 체인은 현재 실행 컨텍스트의 변수 객체와 상위 실행 컨텍스트의 변수 객체들을 연결한 체인입니다.
  

  var x = 10;  // 전역 변수
  
  function outerFunction() {
      var y = 20;  // outerFunction의 지역 변수
  
      function innerFunction() {
          var z = 30;  // innerFunction의 지역 변수
          console.log(x + y + z);  // 결과: 60
      }
      innerFunction();
  }
  
  outerFunction();

스코프 체인 SC

 

• this 값 설정
  실행 컨텍스트는 함수 호출 패턴에 따라 lthis 키워드가 가리키는 객체를 결정합니다. 함수 호출 방식에 따라 this가 가리키는 대상이 달라집니다.
  

  // 전역 객체
  console.log(this);  // 결과: Window {...}
  
  // 일반 함수 호출
  function normalFunction() {
      console.log(this);
  }
  normalFunction();  // 결과: Window {...}
  
  // 메소드 호출
  var obj = {
      method: function() {
          console.log(this);
      }
  };
  obj.method();  // 결과: {method: ƒ}
  
  // 생성자 함수 호출
  function ConstructorFunction() {
      this.value = 10;
      console.log(this);
  }
  new ConstructorFunction();  // 결과: ConstructorFunction {value: 10}​

this 바인딩

 

참고자료

https://www.w3schools.com/js/default.asp
https://developer.mozilla.org/ko/docs/Web/JavaScript

https://www.geeksforgeeks.org/javascript/?ref=dhm
https://roadmap.sh/javascript

https://chat.openai.com/

https://wrtn.ai/