동기 (Synchronous)와 비동기 (Asynchronous) 코드 실행 방식

동기는 '직렬적'으로 작동하는 방식이고 비동기는 '병렬적'으로 작동하는 방식이다. 즉, 비동기란 특정 코드가 끝날때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미한다.

이미지 출처: What every programmer should know about Synchronous vs. Asynchronous Code

동기(Synchronous)

요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식이다. 어떠한 태스크를 처리할 동안 나머지 태스크는 대기한다.

function func1() {
    console.log('첫번째 펑션!');
    func2();
}

function func2(){
    console.log('두번째 펑션!');
    func3();
}

function func3() {
    console.log('세번째 펑션');
}

func1();
// 출력값은 아래와 같다.
// 첫번째 펑션!
// 두번째 펑션!
// 세번째 펑션! 을 띄우게 된다.

비동기(Asynchronous)

요청을 보낸 후 응답의 수락 여부와는 상관없이 다음 태스크가 동작하는 방식이다. a 태스크가 실행되는 시간 동안 b 태스크를 할 수 있으므로 자원을 효율적으로 사용할 수 있다.
이때, 비동기 요청시 응답 후 처리할 '콜백 함수'를 함께 알려준다. 따라서 해당 태스크가 완료되었을 때, '콜백 함수'가 호출된다.

• 비동기 처리의 예로 Web API, Ajax, setTimeout 등이 있다

function func1(){
    console.log('func1');
    func2();
}

function func2(){
    setTimeout(function(){
        console.log('func2');
    }, 0);
    func3();
}

function func3(){
    console.log('func3');
}

func1();
/*
실행결과
func1
func3
func2
*/