하나의 예제로 시작한 다음 해당 코드가 배후에서 작동하는 방식을 분석합니다.

var x = 10;
var y = 20;

function add(a,b){
  return a+b;
}

var result = add(x,y);

console.log(result) //30

먼저 x & y 변수를 선언하고 각각의 vlaue 10 & 20으로 초기화합니다.

둘째, 인수를 받아들이고 인수의 합을 반환하는 추가 함수를 선언합니다. 즉, 10 + 20 = 30입니다.

셋째, 인수를 x & y 변수의 값으로 사용하여 add 함수를 호출하고 결과를 변수 result에 저장합니다.

마지막으로 변수 결과를 콘솔로 출력합니다.

위의 코드를 실행하는 동안 JavaScript는 많은 일을 합니다.

JavaScript 엔진은 해당 시점에 JavaScript 코드를 실행할 때 실행 컨텍스트를 생성합니다.

각 실행 컨텍스트에는 두 단계가 있습니다.

1. 생성 단계.
2. 실행 단계.

JavaScript 엔진이 처음으로 코드를 실행할 때 전역 실행 컨텍스트를 생성합니다. 이 단계에서 JavaScript는 몇 가지 작업을 수행합니다.

1. 전역 개체 즉, 웹 브라우저에서 창을 만들거나 Node.js에서 전역을 만듭니다.
2. this 객체(this 키워드)를 생성하고 전역 객체에 바인딩합니다. 웹 브라우저의 경우 이 키워드는 window 객체와 연결되고 Node js에서는 이 키워드가 전역 객체와 연결됩니다.
3. 변수 및 함수 참조를 저장하기 위한 메모리 힙을 설정합니다.
4. 초기 값이 정의되지 않은 전역 실행 컨텍스트 내의 메모리 힙 및 변수에 함수 선언을 저장합니다.

1. 전역 실행 컨텍스트에 변수 x, y & 결과 및 함수 선언 add()를 저장합니다.
2. 정의되지 않은 값, 즉 x = 정의되지 않음, y = 정의되지 않음 및 결과 = 정의되지 않음으로 변수를 초기화합니다.

실행 단계

실행 단계에서 JavaScript 엔진은 코드를 한 줄씩 실행하고 값을 변수에 할당하고 함수 호출을 실행합니다.

각 함수 호출에 대해 JavaScript 엔진은 새로운 함수 실행 호출을 생성합니다.

함수 실행 컨텍스트는 전역 실행 컨텍스트와 비슷합니다. 그러나 전역 개체를 만드는 대신 JavaScript 엔진은 함수의 모든 매개 변수에 대한 참조인 인수 개체를 만듭니다.

이 예에서 JavaScript 엔진은 함수에 전달된 모든 매개변수를 참조하는 인수 객체를 생성하고 웹 브라우저의 경우 이 값을 전역 객체로 설정합니다. 이 값은 window 객체에 연결되고 Node js에서는 이 값이 전역 객체에 연결됩니다. 개체이며 또한 정의되지 않은 값으로 & b 매개변수를 초기화합니다.

함수 실행 컨텍스트의 실행 단계에서 JavaScript 엔진은 매개변수 a & b에 10 & 20 값을 할당하고 결과(30)를 전역 실행 컨텍스트에 반환합니다.

전역 실행 컨텍스트 및 함수 실행 컨텍스트를 포함한 모든 실행 컨텍스트를 추적하기 위해 JavaScript 엔진은 호출 스택을 사용합니다.

계속 연락하자

이 기사가 당신에게 가치가 있기를 바랍니다. 다음 기사에서 만나요!