노드 콜스택과 비동기 이해

function 아반테() {
    console.log('아반테 ㄱㄱ');
}

function 소나타() {
    console.log('소나타 ㄱㄱ');
}

function 제네시스() {
    console.log('제네시스 ㄱㄱ');   
}

setTimeout(아반테, 1000);
setTimeout(소나타, 2000);
setTimeout(제네시스, 3000);

setTimeout은 비동기 함수로 콜스택이 아닌 백그라운드에서 실행된다.
그렇다면 비동기이기 때문에 3초안에 세개의 함수가 모두 실행된다.

function 아반테(callback) {
    console.log('아반테 ㄱㄱ');
    callback();
}

function 소나타(callback) {
    console.log('소나타 ㄱㄱ');
    callback();
}

function 제네시스() {
    console.log('제네시스 ㄱㄱ');   
}

function 자동차경주() {

        아반테(()=>{
            소나타(()=>{
                제네시스();
            })
        })
    }


자동차경주();

자동차 경주 함수를 보면 아반테 -> 소나타-> 제네시스 순으로 실행되도록 화살표 함수를 구현하였음.

1. 아반테함수의 콜백이 백그라운드에서 실행
2. 그 콜백은 소나타 함수이다. 소나타 함수 역시 콜백이 실행되는데 이때 소나타의 콜백은 제네시스이다.
3. 따라서 콘솔에 아반테 소나타 제네시스 순으로 찍히게 된다.

자 그럼 조금 바꿔서 만약

function 아반테(callback) {
	callback();
    console.log('아반테 ㄱㄱ');
    
}

이렇게 콜백이 먼저 실행되게 한다면 어떻게 될까?
아반테의 콜백 함수인 소나타가 먼저 실행된다. 콜백이 끝나기 전까지는 콜스택에 콘솔이 쌓이지 않게 된다.
따라서 콘솔에는 소나타 제네시스 아반테 순으로 찍히게 됩니다.

function 아반떼(callback) {
    setTimeout(()=>{
        console.log('아반떼')
        callback()
    }, 1000)
}

function 소나타(callback) {
    setTimeout(()=>{
        console.log('소나타')
        callback()
    }, 2000)
}

function 제네시스() {
    setTimeout(()=>{
        console.log('제네시스')
        // callback()
    }, 3000)
}

아반떼(()=>{소나타(제네시스)});

아반떼는 콜백으로 소나타를 받고 소나타는 제네시스를 받는다.

궁금한점, setTimeout이 비동기라 백그라운드에서 실행되는데 콘솔은 함수니까 콜스택에 찍혀서 return값없으니까 바로 찍힌다 치는데 setTimeout이 마무리되기 전에 callback인 소나타가 마무리되어야 하는거아닌가?

대답. 콜백과 콘솔의 순서를 바꿔도 콘솔찍히는 순서가 같다.
즉 셋타임아웃이 백그라운드에서 실행될때 시간까지 계산한 값이 바로 실행된다.

프로미스 (promise 객체)

function 아반테() {
    return new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve('아반테');
        }, 1000)
    })
}

function 소나타() {
    return new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve('소나타');
        }, 2000)
    })
}

function 제네시스() {
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            resolve('제네시스');
        }, 3000)
    })
}

아반테().then((data)=>{
    console.log(data);
    return 소나타();
}).then((data)=>{
    console.log(data);
    return 제네시스();
}).then((data)=>{
    console.log(data);
})

promise는 디폴트가 백그라운드 실행
구현시 콜백 안받고 개별로 진행// 호출할때 신경써주면 된다.