js 실행 원리, 순서

김한솔·2022년 9월 24일
0

동기/비동기 => 블로킹/논블로킹으로 이해하니 편했다.
자바스크립트가 사용하는 방식인 동기방식은 블로킹 즉 한번에 하나의 함수를 처리한다.

하지만 자바스크립트에서도 비동기 방식을 사용할 수 있는데 이 때 사용되는 것이 콜스텍, 큐, 브라우저에서 제공하는 api등이다.

내가 이해한대로 간단하게 정리해보자면 자바스크립트는 코드를 순서대로 읽어가며 콜스텍에서 하나씩 처리를 하다가 비동기로 처리되는 함수(ex:settimeout)가 콜스텍에 올라오면 api를 호출하고 콜스텍에서 백그라운드로 이동시킨다. api를 사용해서 처리 된 함수는 큐로 이동하고 콜스텍에서 다른 함수들을 처리하고 콜스텍이 비게되면 큐에서 콜스텍으로 하나씩 이동한다.

function run() {
  console.log('동작');
}
console.log('시작');
setTimeout(run, 0);
console.log('끝');

이러한 원리때문에 setTimeout이 0초로 설정되어있는 위의 코드는 시작->동작->끝이 아니라 시작->끝->동작이 찍히게 된다.
0초로 설정되어 있다고 setTimeout함수를 바로 실행시키는 것이 아니라 스텍에서 백그라운드 큐로 이동했다가 다시 콜스텍이 비었을때 스텍으로 올라오는 과정이 있기 때문이다.

스텍이랑 큐라는 것의 개념을 몰랐을 때는 자바스크립트가 왜이렇게 비효율적으로 작동하는지 이해가 안됐는데 어떤 과정으로 처리되는 지 알게되니까 실행순서랑 원리가 이해가 되었다.

profile
개린이입니다.

0개의 댓글

Powered by GraphCDN, the GraphQL CDN