🤷🏻‍♀️ 동기? 비동기?

자바스크립트는 동기식 처리 (Synchronous)

• 한번에 코드 한줄씩 차례로 실행

비동기식처리(Asynchronous)
오래걸리는 작업이 있으면 제껴주고 다른거부터 처리하는 방식
(자바스크립트가 아니라 자바스크립트를 실행하는 브라우저 덕분에 가능한 것 = 웹브라우저의 특수성)

파이썬에서는

print(1)
time.sleep(1) // 1초 쉬어라 => 1초 멈췄다가 2실행됨(블로킹)
print(2)

자바스크립트에서는

console.log(1);
setTimeout(()=> {console.log(2)},1000); //멈추지 않고 3이 실행됨
console.log(3);

//setTimeout(()=> {console.log(2)},1000); 비동기식으로 처리 도와주는 함수

setTimeout, eventListener, ajax 코드같이 실행되는데 오래 걸리는 코드들은
Web API라는 공간(실행 대기실)으로 보내서 해결이 되길(시간이 지나길) 기다림.
Web API 덕분에 오래걸리는 작업이 있으면 제껴두고(블로킹이라는 멈추는 과정없이) 다른거부터 처리하는 비동기식 처리가 가능.

자바스크립트는 오래걸리는 연산을 만나면 멈춤 ( = 동기식 처리, synchronous )
Web API와 연관된 특수한 함수들을 쓰면 작업이 오래걸릴 때 정지 없이 다른거부터 실행이 가능( = 비동기식 처리, asynchronous )

하지만, 자바스크립트를 보류했다가 순차적으로 실행하려면? = 콜백함수를 사용함

console.log(1);
setTimeout(()=> {console.log(2)},1000); //멈추지 않고 3이 실행됨

//()=> {console.log(2)} 콜백함수임

콜백함수란?
함수안에 함수가 들어간 것.
순차적으로 실행하고 싶을 때, 왼쪽에 있는거 실행하고 나서 실행해줘라는 뜻으로 씀
콜백함수 자체가 동기/비동기처리를 해주는 건 아니고, 함수 디자인 패턴일 뿐