JS async

README.md

해설

sync.js를 제외한 코드는 모두 실행하면 5초 후 “5sec”을 출력하고, 이어서 4초 후 “4sec”을 출력하고, …, 이어서 1초 후 “1sec”을 출력하고 종료하는 코드입니다. 다만 sync.js는 실행해보시면 알겠지만 시작하면 1초후 “1sec” 출력, 이어서 1초 후 “2sec” 출력, …, 이어서 1초후 “5sec”을 출력하고 종료하는 코드입니다. 해당 글 아래로 이어지는 순으로 코드를 읽으시면 이해하시기 편하실 겁니다.

sync.js

sync.js 는 동기/비동기에 대한 이해가 전혀 없는 경우 일반적으로 작성하게 되는 방식의 코드입니다.

callback.js

Promise가 생기기 전, CallBack을 이용해 비동기적으로 실행되는 코드입니다. CallBack을 이용하다보니 이른바 CallBack 지옥에 갖혀 5중으로 들여 쓴 모습을 볼 수 있습니다.

promise.js

Promise를 적용한 모습입니다. wait 라는 Promise 생성 함수를 이용하여 비동기적으로 처리했습니다. 이 코드에서는 가독성이 좋아졌는진 잘 몰?르겠으나 실제로는 꽤 많이 도움이 된다고 합니다. 하지만 여전히 5중 들여 쓰기의 then 지옥에 빠져 있는 것을 볼 수 있습니다.

async.js

async/await 문법이 생기고 나서 이를 Promise 와 함께 적용한 모습입니다. await는 async함수 내에서만 사용할 수 있기 때문에 이를 위해 한 번 감싸준 것을 제외하면 훨씬 보기 좋아졌습니다.

async.js

const wait = (delay) => {
    return new Promise((resolve) => setTimeout(resolve, delay * 1000));
};
(async () => {
    console.log("Asynchronous with async, await");
    await wait(5);
    console.log("5sec");
    await wait(4);
    console.log("4sec");
    await wait(3);
    console.log("3sec");
    await wait(2);
    console.log("2sec");
    await wait(1);
    console.log("1sec");
})();

callback.js

console.log("Asynchronous with CallBack");
setTimeout(() => {
    console.log("5sec");
    setTimeout(() => {
        console.log("4sec");
        setTimeout(() => {
            console.log("3sec");
            setTimeout(() => {
                console.log("2sec");
                setTimeout(() => {
                    console.log("1sec");
                }, 1000);
            }, 2000);
        }, 3000);
    }, 4000);
}, 5000);

promise.js

const wait = (delay) => {
    return new Promise((resolve) => setTimeout(resolve, delay * 1000));
};
console.log("Asynchronous with Promise");
wait(5).then(() => {
    console.log("5sec");
    wait(4).then(() => {
        console.log("4sec");
        wait(3).then(() => {
            console.log("3sec");
            wait(2).then(() => {
                console.log("2sec");
                wait(1).then(() => {
                    console.log("1sec");
                });
            });
        });
    });
});

sync.js

// Doesn't work what I want!
console.log("Synchronous");
setTimeout(() => {
    console.log("5sec");
}, 5000);
setTimeout(() => {
    console.log("4sec");
}, 4000);
setTimeout(() => {
    console.log("3sec");
}, 3000);
setTimeout(() => {
    console.log("2sec");
}, 2000);
setTimeout(() => {
    console.log("1sec");
}, 1000);

promise.then(func)에서 콜백함수의 리턴값으로 promise를 반환하면 반환된 promise를 실행한 뒤 then으로 해당 promise의 결과값을 받아 체이닝을 할 수 있습니다.
promise.js는 다음과 같이 개선이 가능하겠네요. 아래를 보시면 wait(5).then()에서 리턴값으로 wait(4)를 반환했습니다. 다음 then은 wait(4)가 모두 끝난 뒤 실행됩니다.

wait(5).then( ()=>{
    console.log("5sec");
    return wait(4);
} ).then( ()=>{
    console.log("4sec");
    return wait(3);
} ).then( ()=>{
    console.log("3sec");
    return wait(2);
} ).then( ()=>{
    console.log("2sec");
    return wait(1);
} ).then( ()=>{
    console.log("1sec");
} );

promise.then(func)에서 콜백함수의 리턴값으로 promise를 반환하면 반환된 promise를 실행한 뒤 then으로 해당 promise의 결과값을 받아 체이닝을 할 수 있습니다. promise.js는 다음과 같이 개선이 가능하겠네요. 아래를 보시면 wait(5).then()에서 리턴값으로 wait(4)를 반환했습니다. 다음 then은 wait(4)가 모두 끝난 뒤 실행됩니다.

wait(5).then( ()=>{
    console.log("5sec");
    return wait(4);
} ).then( ()=>{
    console.log("4sec");
    return wait(3);
} ).then( ()=>{
    console.log("3sec");
    return wait(2);
} ).then( ()=>{
    console.log("2sec");
    return wait(1);
} ).then( ()=>{
    console.log("1sec");
} );

이 방법이 훨씬 보기 좋네요! 시간 날 때 수정하도록 하겠습니다 감사합니다!!!