콜백 함수

• 콜백 함수란 이름 그대로 나중에 호출되는 함수입니다.

  • 이벤트 핸들러처럼, 일단 등록해놓고 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 예로 들 수 있습니다.
  • 즉, 콜백 함수란 어떤 함수의 인자로 넘겨져서, 특정 조건이 만족되면, 호출되는 함수라고 볼 수 있습니다.

• 비동기적 처리를 통해 어떤 동작을 수행할 때, 콜백 함수는 동작에 필요한 데이터가 준비된 상태에서만 동작을 수행하도록 합니다.

  • 즉, 콜백 함수를 통해 비동기 함수의 처리 결과를 정상적으로 반환할 수 있게 됩니다.

동기적 콜백 함수

• 동기적 콜백 함수는, 코드가 순차적으로 진행되는 특성을 그대로 가집니다.

  • 즉, 현재 콜백 함수의 작업이 끝날 때까지, 다음 작업은 진행될 수 없습니다.

    function sync(callback,delay){
        callback();
    }
    
    console.log(0); 
    sync(()=>console.log('hello'), 0);
    console.log(1); 
    
    // 출력순서: 0 -> hello -> 1
    

비동기적 콜백 함수

• 비동기적 콜백 함수는, 현재 작업의 종료 여부와 상관 없이, 다음 작업이 진행될 수 있도록 하는특성을 가집니다.

  • 즉, 현재 콜백 함수의 작업이 진행되고 있더라도, 다음 작업은 진행될 수 있습니다.

  function sync(callback,delay){
      callback();
  }
  
  console.log(0);
  setTimeout(function(){console.log('hello')},0);
  console.log(1);
  
  // 출력순서: 0 -> 1 -> hello
  

• 위 예제와 같은 setTimeout은 브라우저에서 제공하는 Web API에 의해 동작합니다.

  • setTimeout의 2번째 인자로 전달한 시간이 지나면, 콜백 함수는 Task Queue로 이동합니다.
    • 2번째 인자로 전달한 time은 Task Queue로 콜백 함수가 이동하기 위한 최소 요구 시간
  • 그리고 Task Queue에 있는 콜백 함수는, Call Stack이 비어야 이벤트 루프에 의해 Call Stack으로 이동할 수 있기 때문에 위와 같은 결과를 낳게 됩니다.