함수의 실행 순서

• 일반적인 전제로서는 순차적으로 실행된다.
• 함수가 끝나면 다른 함수 실행되고… 이런 식으로…

→ 문제상황 가정 : b 함수가 오래 걸리는 함수라면…? (막 3초씩 오래 걸리는 함수라면…)

→ 순차적으로 실행될줄 알았으나… a / c / b 순서대로 실행된다.

비동기 처리

• 바로 답을 내놓을 수 없는 상황이 아니라면 기다리고만 있지 않는다!
• 실행 순서가 보장이 안된다!

동기 vs 비동기

• 동기 : 앞의 함수가 끝날때까지 기다린다…
• 비동기 : 앞의 함수가 끝날때까지만 기다리지는 않는다!!

비동기 처리가 발전한 이유?

→ Web 상에서의 동기적인 처리는 비효율적

그럼에도 실행순서가 보장되어야 하는 경우는 존재함!

ex) 결제처리 함수가 완료되면 → B 함수를 실행시킨다.

ex) 오래 걸리는 C함수의 리턴값으로 → D함수가 처리된다.

→ 이때 사용하는 함수 Callback 함수

: 부르면 타이밍 맞춰 오는 함수

: 나중에 부를 함수를 인자로 일단 받아와서 함수 안에서 호출함으로서 실행 순서를 보장한다.

• callback 함수 실행 않했을 경우

  function a(){
  	console.log("2초가 걸리는 함수");
  }
  function b(){
  	console.log("a다음에 실행되어야하는 b함수");
  }
  setTimeout(a,2000);
  b();
  

  

• callback 함수를 실행했을 경우

  function a(callback){
  	setTimeout(function(){
  		console.log("2초가 걸리는 a함수");
  		callback();
  	},2000);
  }
  
  function b(){
  	console.log("a다음에 실행되어야하는 b함수");
  }
  
  a(b);
  

  

callback 지옥…

• 예시) 5초 걸리는 a / 4초 걸리는 b / 3초 걸리는 c / 2초 걸리는 d 가 순차적으로 실행되어야 한다면…?

  

→ 가독성이 떨어짐 → 해결법 : ES6 : promise-async