[javascpript] 실행 컨텍스트 (execution context)

실행 컨텍스트

자바스크립트 코드가 실행되는 환경을 의미하며, 자바스크립트의 여러 개념을 깊게 이해하기 위해 중요한 개념.

실행 컨텍스트를 이해하면 자바스크립트의 동작을 스펙 레벨에서 이해하고 활용할 수 있음!

Global(전역)에서 시작해서, 함수가 호출될 때 코드에서 참조하는 변수, 객체, this 등은 스택에 쌓이게 된다.

따라서 1) 전역에 존재하는 코드, 2) 함수에 존재하는 코드를 잘 구별해야 한다.

 

실행 컨텍스트 Stack

전역에 존재하는 코드는 함수나 클래스 내부의 코드를 무시하고 컨텍스트를 가진다.
함수에 존재하는 코드는 함수 내부에서만 컨텍스트를 가진다.

그리고 호출되는 순서에 따라 스택에 쌓이고, 나중에 쌓여진 함수부터 실행된다.

 

컨텍스트 연산함수

// mul 함수는 숫자 num을 입력받아 내부에 정의된 a, b와 함께 곱한 결과를 리턴합니다.
function mul(num) {
  let a = 10;
  let b = 20;
  // 코드가 동작하도록 mul30 함수를 만드세요.
  function mul30(num){
      return a*b*num
  }
  return mul30(num);
}


// add30 함수는 숫자 num을 입력받아 내부에 정의된 a, b와 함께 더한 결과를 리턴합니다.
function add30(num) {
  let a = 10;
  return (function () {
    let b = 20;
    // 코드가 동작하도록 add 함수를 만드세요.
    function add(){
        return a+b+num
    }
    return add();
  })();
}

const myModule = { mul, add30 };

export default myModule;

 

 

 

 

 

렉시컬 환경

렉시컬 환경은 식별자와 식별자에 연결된 값을 저장하는 자료구조이다.

const myName = "Elice";

function Coder() {
  const title = "Coder Land";
  return title;
}

전역으로 생성되는 렉시컬 환경에서는 myName, Coder 이렇게 2개의 식별자와 식별자에 연결된 값이 저장된다.
myName에는 Elice가 들어있지만, Coder에는 스코프 체인으로 Coder와 연결되어 있다.

스코프 체인은 스코프가 연결된 구조를 말한다.
그리고 Coder 함수의 렉시컬 환경에서는 title이라는 1개의 식별자와 식별자에 연결된 값이 저장된다.
또한, 전역 렉시컬 환경에 스코프 체인으로 연결되어 있습니다. 전역에서는 Coder라는 정보를 갖고 있기 때문이다.

 

 

---

자바스크립트 실행

인터프리터 언어로, 자바스크립트의 컴파일은여러단계로 구성되며 각 단계별로 코드를 처리하는 목적이 다르다.

이를 알아야, 코드가 선언되고 실행될 때 생기는 버그나 메모리 누수(Memory Leak)을 이해하고 고칠 수 있다.

 

자바스크립트가 실행되면 초기화 되는 항목

• this 포인터 : 글로벌 스콮에서는 window를 가리킨다.
• variable Object : 접근할 수 있는 변수들 {  }
• Scope Chain : [   ] global이나 함수스콥프 등으로 제한적

함수 호출 종류

• 직접 호출
• 메서드 호출
• 생성자 호출
• 간접 호출( call, apply 등)
• 콜백 함수 호출

dynamic binding

환경에 따라 this가 가리키는 것이 달라지는 것을 의미한다.

bind, apply, call 등으로 this가 가리키는 것을 조작할 수 있다.

 

주의) 화살표 함수일 때 this

만약 화살표함수를 이용해 호출을 하면, this는 함수가 생성된 환경을 가리킨다. 

일반 함수를 이용해 호출하면 this는 호출된 환경을 가리킨다. 

 

 

---

자바스크립트 비동기

자바스크립트는 다른 프로그래밍 언어와 달리 싱글 스레드 환경에서 비동기 동작을 처리한다.

이벤트 루프에 대해 이해하면, 자바스크립트 엔진 레벨에서의 비동기 코드 동작을 이해할 수 있다.

복잡한 비동기 동작을 이해하고 높은 수준의 비동기 코드를 작성하며, 버그의 원인을 파악할 수 있게 된다.