[JavaScript] 비동기

비동기 쉽게 이해하기

• 커피숍에서 커피를 주문하려고 줄을 선다고 했을 때, 먼저 온 A가 주문해서 커피를 받을 때까지 B는 주문조차 할 수 없다고 하면 우리는 이를 blocking이라고 부른다.
  => 하나의 작업이 끝날 때까지 이어이지는 작업을 막는다!

• [B는 A가 커피를 받는 시점과 B가 주문을 시작하는 시점이 같다]
  => 이와 같은 상황을 "동기적"이다라고 한다.

callback review

• 다른 함수(A)의 전달인자로 넘겨주는 함수
• parameter를 넘겨받는 함수(A)는 callback 함수(B)를 필요에 따라 즉시 실행할 수도, 아니면 나중에 실행할 수도 있다

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

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

• callback in action: 반복 실행하는 함수 (iterator)

[1, 2, 3].map(function(ele, idx){
return ele * ele;
});

• callback in action: 이벤트에 따른 함수 (event handler)document.querySelector('#btn').addEventListener('click', function(e){
  console.log('button clicked');
  });

blocking

• 요청에 대한 결과가 동시에 일어난다
• (전화로 예로 들면) 하던 일을 멈추고 받아야 한다

non-blocking

• 요청에 대한 결과가 동시에 일어나지 않는다
• (문자로 예로 들면) 확인 후, 나중에 답장할 수도 있다