이때까지 학습했던 고차함수에서는 동기적으로 실행되는 방법으로 학습해왔다.
callback 함수를 사용하면 사용에 따라 동기적, 비동기적으로 모두 사용 가능하다.
const A = function () {
console.log('Hello World!');
}
const B = function (callback){
callback(); //바로 callback함수 A로 넘어가서 실행
}
B(A);- 반복 실행하는 함수 iterator
: forEach, map, reduce 등 반복적으로 함수를 호출해 실행하는 함수에서도 callback
코드
[1,2,3,4].map(function(el){
return el*2 //element를 2씩 곱해주는 함수가 callback 함수
})- 이벤트에 따른 함수 event handler
주의할점: 함수 실행을 버튼에 다는게 아니라 함수 자체를 달아야 한다.
동기 VS 비동기
동기: 하던 작업을 멈추고 실행해야한다 === 요청에 대한 결과가 동시에 일어난다
비동기: 확인 후 나중에 실행 가능하다 === 요청에 대한 결과가 동시에 일어나지 않는다
동기적으로 작업을 실행할 때 생기는 문제점
: 앞선 작업이 끝나기 전까지 그 다음 작업을 아예 시작조차 할 수 없다. 앞선 작업이 완료될 때까지 그 다음으로 올 작업들은 계속 대기열에 머물러 있게 된다.
커피 주문 예시 - callback 패턴
let request = 'latte';
orderCoffeeAsync(request, function(response){
//callback으로 주문한 커피결과 보여줌
drink(response);
}비동기의 주요 사례
- DOM element의 이벤트 핸들러
: 마우스,키보드 입력 등(click, keydown 등), 페이지 로딩(DOMContentLoaded) - 타이머
: 타이머 API (setTimeout등), 애니메이션 API - 서버에 자원 요청 및 응답
: fetch API, AJAX(XHR)
