동기와 비동기

동기(Synchronous)

한 작업이 다른 작업과 시간적으로 일치하거나 순차적으로 진행되는 것

 즉, 결과 값을 받을 때까지 기다리는 것

 

일상생활 예시)

주인이 강아지에게 간식을 줍니다.

이때, 주인은 간식을 던지지 않고 다 먹었다는 답변이 올때까지 기다립니다.

답변이 올 때까지의 시간을 BLOCKING이라고 합니다.   

 

"멍멍"이라는 먹었다는 답변을 듣고 그 때 주인은 간식을 던져줍니다.

 

답변을 듣고 줘야하기 때문에 단순하다고 생각이 들 수 있지만, 다 먹을 때까지 기다려야하기 때문에 비효율적이라는 느낌이 듭니다.

 

동기식

함수가 끝날 때까지 결과값을 기다리는 것

function syncTask() {
    console.log("동기식 작업 시작");
    console.log("동기식 작업 진행 중");
    console.log("동기식 작업 완료");
}

console.log("프로그램 시작");
syncTask();
console.log("프로그램 종료");

결과

프로그램 시작
동기식 작업 시작
동기식 작업 진행 중
동기식 작업 완료
프로그램 종료

위의 코드는 syncTask 함수가 호출되면 해당 함수의 작업이 시작되고, 완료될 때까지 다음 코드의 실행이 차단됩니다.

 

비동기(Asynchronous)

작업의 완료 여부와 상관없이 다음 작업이 바로 시작될 수 있는 방식

 즉, 결과 값을 기다리지 않는 것

 

일상생활 예시)

주인이 강아지에게 간식을 줍니다.

이때, 주인은 강아지의 답변을 듣지 않고 간식을 계속 던져줍니다.

답변이 올 때까지 기다리지 않는 것을 NON-BLOCKING이라고 합니다.

 

강아지는 답변을 하지 않고 간식을 먹을 수 있어서 효율적으로 계속 먹을 수는 있지만, 간식이 쌓기 때문에 정신없고 복잡하다는 것을 알 수 있습니다.

 

 

비동기식

 함수를 호출하고 수행여부의 상관없이 지나가도 되는 경우 

function asyncTask(callback) {
    console.log("비동기식 작업 시작");
    setTimeout(function() {
        console.log("비동기식 작업 완료");
        callback();
    }, 2000);
}

console.log("프로그램 시작");
asyncTask(function() {
    console.log("비동기식 작업의 콜백 함수 실행");
});
console.log("프로그램 종료");

결과

프로그램 시작
비동기식 작업 시작
프로그램 종료
비동기식 작업 완료
비동기식 작업의 콜백 함수 실행

위의 코드는 비동기 작업이 실행되는 동안 다음 코드의 실행이 차단되지 않으므로 프로그램이 계속 실행됩니다. 작업이 완료되면 콜백 함수가 호출되고 그 이후 로직이 실행됩니다. 

 여기서 CALLBACK이란, 작업의 완료 시점에 실행될 코드를 정의할 수 있습니다.

 

 

	장점	단점
동기식	업무 단순	자원 비효율적 사용
비동기식	자원 효율적 사용	업무 복잡