✔ '비동기적'(Asynchronous) 이란?

일반적으로, 프로그램의 코드는 한번에 한가지 사건만 발생하면서 순차적으로 진행된다. 만약 어떤 함수가 다른 함수에 영향을 받는다면, 그 함수는 다른 함수가 끝나고 값을 산출할 때까지 기다려야 한다. 그 과정이 끝날 때 까지, 유저의 입장에서는 전체 프로그램이 모두 멈춘 것처럼 보인다. 이렇게 기다리기만 하는 것은 컴퓨터 성능을 효율적으로 쓰지 못하는 처사다. 그 동안 다른 작업을 수행할 수 있게 하는 것이 바로 비동기 프로그램의 기본이다.

1. 동기 Synchronous와 비동기 Asynchronous

JavqScript는 동기적(Synchronous)이다.
-> 즉, hoisting된 순간부터 동기적으로 하나씩 코드가 실행된다(hoisting: var 변수와 함수 선언들이 자동으로 제일 위로 올라간 상태).

예제

1. 동기적(Synchronous): 순서대로 실행

console.log('1');
console.log('2');
console.log('3');
//순서대로 1 2 3이 각각 출력된다.

2. 비동기적(Asynchronous): 언제 코드가 실행될지 예측할 수 없음

console.log('1');
setTimeout(function(){console.log('2');}, 1000);
console.log('3');
//1 3이 순서대로 출력되고 2는 1초뒤 출력된다.

2. 콜백 마지막 정리

위 2번예제에서
function(){console.log('2');}는 인자로서 우리가 만든 함수를 전달해준다 = Callback

참고로, arrow function이용하면 더 간단하게 아래와 같이 작성된다.

console.log('1');
setTimeout(() => console.log('2'), 1000);
console.log('3');

콜백도 비동기일 때와 동기일 때에 따라 다르게 사용된다.

😏 동기적 콜백 Synchronous Callback

즉각적으로 처리하여 순서대로 실행되는 Synchronous Callback

function printImmediately(print){
    print(); //print라는 Callback을 받아 바로 실행
}
printImmediately(() => console.log('hello')); //그냥 출력

🤨 비동기적 콜백 Asynchronous Callback

나중에, 언제 실행될지 예측이 안되는 Asynchronous Callback

function printWithDelay(print, timeout){
    setTimeout(print, timeout);
}
printWithDelay(() => console.log('async callback'), 2000); //2초뒤 출력

참고 자료: 드림코딩 by앨리 자바스크립트 기초 강의 11 (https://www.youtube.com/watch?v=s1vpVCrT8f4&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=11)