백그라운드에서 JavaScript가 작동하는 방식 - 실행 컨텍스트 및 호출 스택

안녕하세요 세계!

자바스크립트는 세계에서 가장 사랑받는 프로그래밍 언어일 뿐만 아니라 가장 미움받는 프로그래밍 언어입니다. 그리고 증오의 이유는 대부분의 사람들이 그것의 근본적인 아름다움을 이해하지 못하기 때문입니다.

그래서 이번 포스트에서는 자바스크립트에서 함수가 어떻게 실행되고 변수가 어떻게 정의되고 초기화되는지 알아보겠습니다.

게양이란 무엇입니까?

실행 컨텍스트

JavaScript의 모든 함수는 두 단계로 실행됩니다.

선언 단계: 이 단계는 변수 및 함수 선언만 담당합니다.

실행 단계: 이 단계는 기능 블록 실행을 담당합니다.

두 단계를 하나씩 이해합시다.

다음 스니펫을 사용하여 실행 컨텍스트를 이해합니다.

var x = 42;
var y = 21;

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

function multiply(a, b) {
  retrn a * b;
}

let sum = add(42, 21); // 68
const product = multiply(24, 20); // 480
var sumProduct = multiply(add(x, y), 0);

console.log(sum, product, sumProduct);

참고: 위 스니펫에서 일부 변수는 var로, 일부는 let으로, 일부는 const로 정의됩니다. 실행 컨텍스트에서 각각이 어떻게 다르게 작동하는지 보여주기 위해 의도적으로 그렇게 했습니다.

선언 단계

선언 단계에서 변수와 함수에 메모리가 할당됩니다. 하지만 메모리가 var와 let, const에 할당되는 위치에는 약간의 차이가 있습니다.

var: var는 전역 범위 또는 함수 범위에서 메모리가 할당되고 *로 초기화됩니다.
undefined
*.

let 및 const: let 및 const는 TDZ(Temporal Dead Zone)에서 할당된 메모리이므로 변수가 TDZ에 있는 동안 액세스하거나 정의할 수 없습니다. 값을 할당(초기화)하지 않는 한 TDZ에 남아 있습니다.

TDZ (Temporal Dead Zone) is the time between hoisting (declaration) and value assignment (initialization).

실행 단계

실행 컨텍스트에서:

기능 블록이 전역 실행 컨텍스트에서 실행됩니다.

변수에 값이 할당됩니다.

중첩된 함수가 있는 경우 GEC에서 추가 함수 실행 컨텍스트가 생성됩니다(중첩된 함수에 대해 선언 및 실행 단계가 모두 다시 실행됨).



한 가지 중요한 점은 함수가 반환되면 실행 컨텍스트에서 지워지거나 제거된다는 것입니다. 그리고 그것은 Call Stack으로 이루어집니다.

콜스택

실행 컨텍스트는 "호출 스택"을 사용하여 유지됩니다. 스택은 LIFO(후입선출) 데이터 구조입니다. 스택에서 우리는 스택의 맨 위에 있는 요소만 삽입하거나 삭제합니다. JavaScript Array.push 및 Array.pop 방법의 관점에서 생각하십시오.

한 번에 하나의 실행 컨텍스트만 실행될 수 있으므로 JavaScript가 단일 스레드 언어인 이유입니다.

실행 컨텍스트가 중단될 때마다(일부 지연 또는 데이터 가져오기로 인해 발생할 수 있음) 다른 실행 컨텍스트가 현재 실행 중인 EC가 됩니다. 정지된 EC는 나중에 떠난 지점에서 다시 선택할 수 있습니다.

게양

코드 실행 전에 변수에 메모리(선언)가 할당된다는 개념을 호이스팅이라고 합니다.

var는 전역 메모리에서 선언되기 때문에 선언 전에 액세스할 수 있습니다(값으로 정의되지 않음).

let 및 const도 호이스팅되지만(실행 전에 선언됨) TDZ(임시 데드 존)에 있으므로 코드에서 선언하기 전에는 액세스할 수 없습니다.

그렇다면 let과 const가 자바스크립트에서 호이스팅 되었나요? 대답은 예, 그들은 게양되었지만 일시적인 데드 존에 있습니다.


따라서 이 게시물은 여기까지입니다. 이 게시물이 도움이 되었으면 내8020 Newsletter에 가입하여 기술을 구축할 수 있는 장대한 주간 콘텐츠를 공유하는 것을 고려해 보십시오.

감사합니다!