JavaScript 실행 컨텍스트 – JS 코드가 뒤에서 실행되는 방법

JavaScript 실행 컨텍스트가 무엇인지 이해하기 전에 JavaScript 코드를 어떤 환경에서 어떻게 실행할 수 있는지 알아야 합니다.

우선 두 가지 환경에서 JavaScript를 실행할 수 있습니다.

1. 브라우저를 통해
2. Node.js를 통해

JavaScript 코드는 컴퓨터에서 어떻게 실행됩니까?

컴퓨터에서 JavaScript 코드를 작성한 다음 실행하려고 하면 코드가 먼저 브라우저나 Node.js로 이동합니다.

그러나 우리가 작성하는 JavaScript 코드는 브라우저나 Node.js에서 직접 이해되지 않습니다. 이 시점에서 둘 다 내장된 JavaScript 엔진으로 코드를 보냅니다. 예를 들어 다음과 같은 다양한 유형의 엔진이 있습니다.

1. Google Chrome의 V8 엔진
2. Mozilla Firefox의 SpiderMonkey
3. Node.js 등의 V8 엔진

다음으로 JavaScript 엔진은 JavaScript 코드를 기계어 코드로 컴파일합니다. 그런 다음 이 기계어 코드가 컴퓨터로 전송되어 실행되고 출력이 표시됩니다.

프로그래머로서 우리는 이 중간 단계, 즉 JavaScript 엔진이 JavaScript 코드를 기계어 코드로 컴파일하는 방법을 잘 이해해야 합니다.

이제 JavaScript 엔진이 어떻게 작동하는지 이해해야 합니다. JavaScript 엔진은 코드를 기계어 코드로 변환하는 두 가지 방법으로 작동합니다. 첫째는 해석이고, 둘째는 편집이다. 그렇다면 통역과 편찬이란 무엇인가?

해석이란 무엇이며 어떻게 작동합니까?

통역이란 고급 언어로 작성된 모든 소스 코드를 한 줄씩 읽고, 읽은 후 즉시 각 줄을 기계어 코드로 변환하는 과정입니다. 코드 한 줄을 읽는 동안 오류가 발생하면 프로세스가 바로 중단되므로 프로그래머가 오류를 쉽게 식별할 수 있습니다. 이렇게 하면 디버깅이 간단해집니다. 하지만 이 과정은 코드를 한줄씩 읽어가기 때문에 상대적으로 속도가 느립니다.

컴파일이란 무엇이며 어떻게 작동합니까?

컴파일이란 고급언어로 작성된 모든 소스코드를 한번에 기계어 코드로 변환하는 과정입니다. 이 경우 코드에 오류가 있어도 여전히 컴파일되고 런타임에만 오류가 표시됩니다. 결과적으로 프로그래머가 오류를 식별하기가 더 어려워지고 디버깅이 더욱 어려워집니다. 하지만 소스코드 전체가 한번에 기계어 코드로 변환되기 때문에 이 과정이 비교적 빠르다. 이제 질문이 생깁니다. JavaScript는 컴파일된 언어인가요, 아니면 해석된 언어인가요?

JavaScript는 컴파일된 언어인가요, 아니면 해석된 언어인가요?

처음에는 JavaScript가 주로 해석된 언어로 간주되었습니다. 그러나 이 프로세스는 매우 느리기 때문에 최신 JavaScript 엔진은 해석과 컴파일을 결합한 JIT(Just-In-Time) 컴파일이라는 새로운 기술을 사용하기 시작했습니다. 이 프로세스는 해석과 컴파일을 결합하여 코드를 기계어 코드로 변환합니다. 결과적으로 이전 방법에 비해 디버깅이 훨씬 빠르고 쉽습니다.

JavaScript의 JIT(Just-In-Time) 컴파일이 어떻게 작동하는지 이해하려면 JavaScript의 실행 컨텍스트를 이해해야 합니다. 이제 JavaScript의 실행 컨텍스트를 이해해 보겠습니다.

JavaScript 실행 컨텍스트

먼저 다음 코드 예시를 살펴보세요.

코드 예

var a = 1;

function one() {
  console.log(a);

  function two() {
    console.log(b);

    var b = 2;

    function three(c) {
      console.log(a + b + c);
    }

    three(4);
  }

  two();
}

one();

산출

1
undefined
7

코드를 실행했을 때 two() 함수 내에서 선언되기 전에 b 변수를 인쇄하려고 했으나 출력이 정의되지 않았습니다. 그러나 오류는 발생하지 않았습니다. 질문이 생깁니다. 어떻게 b 변수의 값이 정의되지 않았나요? 대답은 JavaScript 실행 컨텍스트에 있습니다. 이제 JavaScript 실행 컨텍스트에 대해 좀 더 자세히 살펴보겠습니다.

JavaScript에는 두 가지 유형의 실행 컨텍스트가 있습니다.

1. 전역 실행 컨텍스트
2. 함수 실행 컨텍스트

각 실행 컨텍스트는 생성 단계와 실행 단계의 두 단계를 거칩니다.

전역 실행 컨텍스트

JavaScript 코드를 실행할 때 가장 먼저 일어나는 일은 전역 실행 컨텍스트입니다. 이 컨텍스트는 먼저 여러 가지 일이 발생하는 생성 단계를 거칩니다.

생성 단계

1. 전역 개체가 생성됩니다.
2. 이 개체가 생성되고 전역 개체의 값이 할당됩니다.
3. 모든 함수와 변수가 선언되는 Variable Object가 생성됩니다. 변수에는 해당 값이 정의되지 않은 상태로 할당되고, 함수에는 해당 함수에 대한 참조가 할당됩니다.

생성 단계가 완료되면 글로벌 실행 컨텍스트는 다음 단계인 실행 단계로 이동합니다. 여기서는 더 많은 단계가 발생합니다.

실행 단계

1. 생성 단계에서 선언되고 정의되지 않음으로 초기화된 변수에는 이제 해당 값이 할당됩니다.
2. Creation Phase에서 선언한 레퍼런스로 저장되었던 함수들이 이제 호출되어 실행됩니다.

함수 실행 컨텍스트

전역 실행 컨텍스트의 실행 단계에서 참조되는 함수가 호출되면 각 함수는 자체 함수 실행 컨텍스트를 생성합니다. 전역 실행 컨텍스트와 마찬가지로 함수 실행 컨텍스트도 여러 단계가 발생하는 생성 단계를 거칩니다.

생성 단계

1. 함수에 대한 매개변수 개체가 생성됩니다.
2. 이 개체가 생성되고 전역 개체의 값이 할당됩니다.
3. 모든 함수와 변수가 선언되는 Variable Object가 생성됩니다. 변수에는 해당 값이 정의되지 않은 상태로 할당되고, 함수에는 해당 함수에 대한 참조가 할당됩니다.

생성 단계가 완료되면 함수 실행 컨텍스트가 더 많은 단계가 발생하는 실행 단계로 이동합니다.

실행 단계

1. 생성 단계에서 선언된 undefine으로 초기화되었던 변수에는 이제 각각의 값이 할당됩니다.
2. 생성 단계에서 선언한 함수가 호출되어 실행됩니다.

중첩된 함수의 함수 실행 컨텍스트

다른 함수 내에서 함수가 호출되면 이러한 각 함수에 대해 새로운 함수 실행 컨텍스트가 생성됩니다. 그런 다음 각 함수 실행 컨텍스트는 생성 단계와 실행 단계를 모두 거칩니다. 이 프로세스는 다른 함수 내부에서 호출되는 각 함수에 대해 계속되며, 각 함수는 이러한 단계를 별도로 진행합니다.

아래 도표를 살펴보겠습니다.

우리는 전역 실행 컨텍스트와 함수 실행 컨텍스트가 모두 특정 단계를 거치는 것을 확인했습니다. 유일한 차이점은 전역 실행 컨텍스트에서는 첫 번째 단계가 전역 객체를 생성하는 반면, 함수 실행 컨텍스트에서는 첫 번째 단계가 함수에 대한 매개변수 객체를 생성한다는 것입니다.

이제 질문이 생깁니다. 전역 컨텍스트와 각 기능 모두에 대해 실행 컨텍스트가 생성될 때 JavaScript는 이러한 실행 컨텍스트를 어떻게 관리합니까?

실행 스택으로 실행 컨텍스트 관리

이러한 컨텍스트를 관리하기 위해 JavaScript는 실행 스택이라는 데이터 구조를 사용합니다. 실행 스택은 스택과 같은 방식으로 컨텍스트를 저장합니다. 먼저 전역 실행 컨텍스트와 각 함수 실행 컨텍스트가 이어집니다. 모든 실행 컨텍스트가 스택에 저장되면 JavaScript는 스택 상단부터 하나씩 처리합니다.

let 및 const를 사용한 범위 지정

전역 또는 함수 범위 내에서 let 또는 const를 사용하여 변수를 선언할 때 이러한 변수는 생성 단계에서 변수 개체에 저장되지 않으며 undef로 초기화되지 않는다는 점에 유의하는 것이 중요합니다. 대신 이러한 변수는 실행 단계에서 직접 선언되고 해당 값이 할당됩니다.

다음 코드 예제를 고려하세요.

코드 예

var a = 1;

function one() {
  console.log(a);

  function two() {
    console.log(b);

    var b = 2;

    function three(c) {
      console.log(a + b + c);
    }

    three(4);
  }

  two();
}

one();

이 코드를 실행하면 ReferenceError가 발생합니다. b 변수를 선언하기 전에 그 값을 출력하려고 하는데, const를 사용하여 b를 선언하기 때문에 일반 변수와 다르게 동작하기 때문입니다. const 또는 let으로 선언된 변수는 생성 단계에서 변수 개체에 저장되지 않으므로 값이 할당되기 전에 해당 변수에 액세스하려고 하면 오류가 발생합니다.

결론

JavaScript의 작동 방식과 실행 컨텍스트 단계에서 발생하는 일에 대한 설명을 통해 여러분이 더 명확하게 이해할 수 있기를 바랍니다. 다음 강의에서는 또 다른 JavaScript 주제를 살펴보겠습니다.

GitHub과 Linkedin에서 저와 소통하실 수 있습니다.

위 내용은 JavaScript 실행 컨텍스트 – JS 코드가 뒤에서 실행되는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!