JS 코드는 어떻게 실행됩니까?

JS 코드를 실행하면 어떻게 되나요?

1단계: 메모리 생성 단계
먼저 전역 실행 컨텍스트가 생성됩니다. 둘째, JS는 모든 변수와 함수에 메모리를 할당합니다. 변수는 초기에 정의되지 않은 값을 할당받는 반면 함수는 변수와 같이 정의되지 않은 값을 할당하는 대신 전체적으로 복사됩니다. 이는 호이스팅이 가능한 이유이기도 하지만 나중에 설명하겠습니다.
2단계: 코드 실행 단계(코드가 위에서 아래로 실행됨)
변수의 실제 값이 할당되고 함수가 호출됩니다.
3단계: 코드 실행이 완료되면 전역 실행 컨텍스트를 포함한 모든 실행 컨텍스트가 제거됩니다.

함수가 호출되면 어떻게 됩니까?

함수가 호출되면 메모리 및 코드 실행 구성 요소와 함께 새로운 실행 컨텍스트가 생성됩니다. 앞에서 언급한 것과 동일한 두 단계를 거칩니다. 먼저 변수와 함수에 메모리를 할당한 다음 코드를 실행합니다.

return 문을 실행하는 동안 어떤 일이 발생합니까?

호출된 위치로 함수를 반환합니다.

다음 코드를 사용하여 전체 프로세스를 살펴보겠습니다.

var a = 3;
function aMultiply (num) {
  var result = num * num;
  return result
}
var aMultiply1 = aMultiply(a);
var aMultiply2 = aMultiply(4);

먼저 전역 실행 컨텍스트가 정의되지 않은 값으로 변수 a, aMultiply1 및 aMultiply2를 할당하여 생성됩니다. 기능은 메모리 구성 요소에 복사됩니다. 이것이 실제로 브라우저에서 어떻게 작동하는지 봅시다. 다음 이미지에서 라인 2에 디버거를 넣었습니다. 범위 섹션에서 볼 수 있듯이 변수에는 정의되지 않은 값이 있고 함수에는 전체 함수가 메모리에 복사됩니다.



둘째, 코드가 하나씩 실행됩니다. 변수가 있는 경우 실제 값이 할당되며 이 경우 var a에 대해 3이 됩니다. 함수는 메모리 구성 요소에 이미 복사되어 있으므로 값을 할당할 필요가 없습니다.
var aMultiply1에서와 같이 함수가 호출되면 또 다른 실행 컨텍스트가 생성됩니다. 함수가 반환될 때까지 메모리를 할당하고 코드를 실행하는 동일한 프로세스가 반복됩니다. 함수가 반환되면 호출된 위치로 되돌아갑니다(또는 반환). 이 경우 var multiply1이 됩니다. 그런 다음 계속해서 aMultiply2를 호출합니다.

아래 스냅샷에서 볼 수 있듯이 aMultiply1이 호출되면 호출 스택에 또 다른 실행 컨텍스트가 생성됩니다.

호출 스택이란 무엇입니까?

JS는 호출 스택을 사용하여 위에서 언급한 이 전체 프로세스를 관리합니다. 먼저 코드가 실행되기 전에 전역 실행이 스택으로 푸시됩니다. 그런 다음 함수가 호출되면 새 실행 컨텍스트가 스택으로 푸시됩니다. 함수가 반환되면 스택에서 제거됩니다. JS는 전역 실행 컨텍스트가 제거되고 호출 스택이 비워질 때까지 계속 실행됩니다.