#기본기20_콜스택, 이벤트 루프, 비동기에 대하여

이벤트 루프는 비동기 함수를 태스크 큐로 보내고

콜스택이 비워지면 태스크큐에서 콜스택으로 이동한다고 한다.

 

콜스택에 먼저 스택이된 함수부터 실행이 되고 

그 이후에 비동기 함수들이 실행된다는 뜻이다.

 

함수 실행순서를 1. 비동기 함수 2. 일반 함수 3. 일반 함수 로 실행해도

2->3->1 순으로 실행이 된다.

 

// 지연시키는 함수
function delay(n){
        for (let i = 0; i < n; i++) {
            console.log('delaying...');
        }    
}

// 콜스택 함수(일반함수)
function a() {
    delay(1000)
    console.log('a is activated!');
}

// 콜스택 함수(일반함수)
function b() {
    console.log('b is activated!');
}

// 이벤트 루프에 의해 실행되는 함수, 비동기 함수
function c(){
    setTimeout(() => {
        console.log('c is activated!');
    }, 0);
}

// 동기적으로 c => a => b 순서로 실행될 것 같지만, setTimeout함수는 비동기 함수이기 때문에 a => b => c 순서로 실행된다.
// setTimeout 함수는 이벤트루프에 의해 태스크큐로 이동되고, a와 b가 콜스택에서 사라진 이후 콜스택으로 이동하여 실행된다.
c();
a();
b();

 

실행결과화면

c();

a();

b();

로 코드가 작성되었으나,  실행결과는

a();

b();

c();

로 나오게 된다.

 

문제는 a함수에서 for문이 1000번 돌고나서 다음코드가 실행된다는 점인데,

이렇게 처리를 할 경우 for문이 완료될 때까지 병목현상이 발생하게 된다. 

 

해결방법은 for문을 비동기처리하면 된다. 

c => a => b 했는데 a => b => c 나온 것과 동일한 방법으로 setTimeout으로 콜백함수로 변경한다.

 

이렇게 변경하면 for문으로 인해 다음 코드가 정체되지 않고 먼저 실행된 이후 for문은 이후에 실행되게 된다.

비동기처리 되어 태스크큐로 이동 후 콜스택이 끝난 후 실행되는 것이다.

 

// 지연시키는 함수
function delay(n){
    setTimeout(() => {
        for (let i = 0; i < n; i++) {
            console.log('delaying...');
        }    
    }, 0)
}

 

결과화면

 

 

알기 쉽게 설명이 나와있는 사이트

https://velog.io/@kcj_dev96/%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%95%A8%EC%88%98%EC%9D%98-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%ACWeb-API-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84-%ED%83%9C%EC%8A%A4%ED%81%AC-%ED%81%90#:~:text=%EC%9D%B4%EB%B2%A4%ED%8A%B8%20%EB%A3%A8%ED%94%84%EB%8A%94%20%EC%BD%9C%EC%8A%A4%ED%83%9D%EC%97%90%20%EC%8B%A4%ED%96%89%20%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8%EA%B0%80%20%EC%95%84%EB%AC%B4%EA%B2%83%EB%8F%84%20%EC%97%86%EB%8B%A4%EB%A9%B4,%EC%97%AD%ED%95%A0%EC%9D%84%20%ED%95%9C%EB%8B%A4.%20%EC%A6%89%2C%20%EC%95%84%EB%9E%98%EC%99%80%20%EA%B0%99%EC%9D%80%20%EC%97%AD%ED%95%A0%EB%93%A4%EC%9D%84%20%ED%95%9C%EB%8B%A4.

⏱ 비동기 함수의 동작 원리,Web API & 이벤트 루프 & 태스크 큐

 

그 외 참고 사이트

https://frontj.com/entry/8-Javascript%EC%9D%98-%EC%BD%9C-%EC%8A%A4%ED%83%9D%EA%B3%BC-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84

8. Javascript의 콜 스택과 이벤트 루프

 

https://meetup.nhncloud.com/posts/89

자바스크립트와 이벤트 루프 : NHN Cloud Meetup