비동기(Asynchronous)

동시에 일어나지 않는다. 요청과 결과가 동시에 일어나지 않는다.

코드 작동이 비동기로 이루어지는 경우

• 클라이언트와 서버간의 자원 요청 및 응답
  fetch API, AJAX(XHR)
• 이벤트 핸들링
  ex) 사용자가 클릭을 했을 '때', do something~
• 타이머
  애니메이션 API, 타이머 API
  시간의 흐름에 따라 모양이 움직이고 화면이 바뀜

blocking /non-blocking

blocking

동기처리를 하느라 다음작업을 못해서 막힌 것

non-blocking

다음작업도 할 수 있도록 병렬처리 한 것

동기 /비동기

동기

요청에 대한 결과가 동시에 일어난다.

한사람의 주문을 받고 음료가 다 만들어질 때까지 다른 작업을 아무것도 수행하지 못한다면 아주 비효율적이고 시간이 오래 걸린다. (blocking)

console.log("1");  // 가정: 1h 걸리는 작업 
console.log("2");  // 가정: 1s 걸리는 작업
console.log("3");  // 가정: 1m 걸리는 작업

출력 순서 : 1, 2, 3

비동기

요청에 대한 결과가 동시에 일어나지 않는다.

주문을 받고 음료를 만들고 등등 여러가지 작업을 하다가 주문한 음료가 완성되면, 손님에게 응답을 준다.(callback)
효율적으로 일을 할 수 있다. (non-blocking)

console.log("1");  // 가정: 1h 걸리는 작업 
console.log("2");  // 가정: 1s 걸리는 작업
console.log("3");  // 가정: 1m 걸리는 작업

출력 순서 : 2, 3, 1

이렇게 비동기 작업을 가능하게 해주는 방법이 CallBack 이다.

callback

CASE1. 다른 함수의 인자로 들어가는 함수

function B() {
  console.log('called at the back!');
}

function A(callback) {
  callback();  //callback === B
}

A(B);
// 전달인자로 함수B를 넘겨준다.
// A는 B를 필요에 따라 즉시실행(동기)할 수도 있고,
// 아니면 나중에 실행(비동기)할 수도 있다.

CASE2. 반복실행하는 함수(iterator)

[1,2,3].map(function(ele,idx){
  ele * ele;
});
// 내부함수가 3번 실행된다.

CASE3. 이벤트 핸들러

document.querySelector('#btn').addEventListner('click', function(e){
  console.log('button clicked');
})