무대 뒤에서 JavaScript가 작동하는 방식

JavaScript 코드가 실행되기 전에 스스로에게 물어보셨나요?🤔

방법을 이해하기 위해 자세히 살펴 보겠습니다.

우리 모두는 JavaScript가 단일 스레드 및 차단되지 않는 스크립팅 언어라는 것을 알고 있습니다. 그게 무슨 뜻입니까?

단일 스레드: 한 번에 한 가지만 발생할 수 있음을 의미합니다.
Non-blocking : 해당 작업 중에 30초가 걸리는 함수를 실행하고 있다고 상상해보세요. 우리는 다른 일이 일어나기 전에 30초를 기다립니다!! 물론 그런 일은 일어나지 않는다
비동기 코드의 응답을 기다리지 않는다는 의미입니다.

비동기 JavaScript를 더 잘 이해하기 위해 아래 코드를 살펴보겠습니다.

console.log("Hello 1"); 

setTimeout(function() {
  console.log("Goodbye!");    

}, 3000);

console.log("Hello 2 ");

Think with me what is the final result ..

what happen in the above code ?

JavaScript는 한 줄씩 실행되지만 비 차단 언어이므로 준비된 기능을 실행하고 기능은 나중에 실행하는 데 시간이 걸립니다.
그래서 비동기 JavaScript를 사용하면 JavaScript는 함수를 실행할 때 응답을 기다리지 않으므로 처음에는 'Hello 1'을 실행한 다음 'Hello 2'를 실행하고 3초 후에는 'Goodbye!'를 실행합니다.



실제 JavaScript 실행은 정말 간단하지만 먼저 이해해야 할 네 가지 개념과 관련이 있습니다.

호출 스택

웹 API

콜백 대기열

이벤트 루프

호출 스택:
JavaScript에는 하나의 호출 스택만 있습니다. 호출 스택은
JS 엔진, 코드를 실행할 때 함수를 호출하면
호출 스택에 추가됩니다. 이 함수가 다음과 같은 비동기식인 경우
(timeout(setTimeOut),Ajax 요청, ..) web API로 이동합니다.
이것은 한 번에 하나만 실행할 수 있음을 의미합니다.

웹 API:
비동기 함수가 존재하는 곳입니다.
실행 완료 완료 후 It simple 추가됨
콜백 대기열에

콜백 대기열:
브라우저가 시간(또는 다른 API
JS를 제공합니다), 코드를 전송하지 않습니다.
즉시 JavaScript로 다시 실행됩니다. 브라우저가
완료되면 콜백 대기열에 코드를 저장합니다. 대기열입니다
콜백되는 일부 기능 또는 코드 포함
나중에.

이벤트 루프:
하나의 간단한 작업이 있습니다. 메인 스택이 비어 있는지 확인하고
비어 있으면 콜백 대기열을 확인합니다. 만일 거기에
실행될 대기열의 코드는 하나씩 전송됩니다.
호출 스택에 하나. 코드가 실행된 후 떠납니다.
스택과 대기열의 다음 스택이
대기열이 비어 있습니다

above gif explain the idea
we can see that the first function is pushed to the call stack
and Hi is immediately executed in the console, then asynchronous
function (setTimeOut) transfer from call stack to web apis till
it finish execution then move to callback queue , when call stack
is empty event loop transfer asynchronous function to stack to
execute .

결론
우리는 누가 동기 및 비동기 코드를 실행하는지 배웠습니다.
무대 뒤에서 호출의 의미가 무엇인지 알고 있습니다.
스택, 웹 API, 콜백 큐 및 이벤트 루프.