# 동기 / 비동기처리, 콜백함수

Q. 자바스크립트는 동기적인가 비동기적인가?

자바스크립트는 동기적으로 처리된다.(Synchronous)

• 동기식 : 한번에 코드 한줄씩 차례로 처리하는 방식
• 원인 : stack은 하나밖에 없기 때문에.
• 병렬 x

자바스크립트는 가끔 비동기적인 처리도 가능하다.(Asynchronous)

• 비동기식 : 오래 걸리는 작업이 있으면 잠시 대기시키고 다른거부터 처리하는 방식
• 원인 : 자바스크립트가 아니라 자바스크립트를 실행하는 브라우저의 Web API 덕분에 가능함.
• 비동기식 처리를 도와주는 함수 : setTimeout, 이벤트리스너, ajax
• 비동기식 처리를 도와주는 함수들은 바로 실행되지 않고 Web API(실행 대기실)로 보내진다.

정리

자바스크립트는 보통 오래 걸리는 연산을 만나면 멈춘다.(동기식 처리)
그러나 Web API와 연관된 특수한 함수들을 쓰면 작업이 오래 걸릴 때 다른거부터 실행이 가능하다.(비동기식 처리)

JS를 순차적으로 실행하려면 콜백함수를 사용한다.

비동기식 -> 동기식으로 바꿀 수 있는 방법.

콜백함수 : 함수 안에 들어가는 함수

기존 코드

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

콜백함수 이용

console.log(1);
setTimeout(function(){ console.log(2) }, 1000);
addEventListener('click', 함수); // 이렇게도 가능
console.log(3);

콜백함수를 이용한 함수 디자인

function 첫째함수(둘째){
	console.log(1);
  	둘째();
}

function 둘째함수(){
	console.log(2);
}

첫째함수(둘째함수); // 첫째함수 실행 후 둘째함수 실행됨.

콜백함수의 문제점

코드가 어렵고 복잡해진다.

첫째함수(function(){
  둘째함수(function(){
    셋째함수(function(){
      어쩌구..
    });
  });
}):

👉🏻 더 쉽게 쓰기 위한 Promise 패턴

첫째함수().then(function(){
   그 담에 실행할거
}).then(function(){
   그 담에 실행할거
});