JS중급_동기/비동기2 (콜백함수)

▶️ 순차적 처리를 위한 콜백함수

  console.log(1);
  setTimeout(function(){}, 1000);
  console.log(2);

• 이전 글에서 자바스크립트는 시간이 오래걸리는 코드를 후순위로 처리하는 비동기적 처리를 한다고 배웠다. 이 코드의 경우 브라우저 콘솔로 실행시키면 setTimeout 함수가 후순위로 처리되어 1,2가 동시에 실행된다.

  console.log(1);
  setTimeout(
    function(){
      console.log(2);
    }, 1000);

• 따라서, JS를 비동기 상황에서 코드를 순차적으로 실행하고 싶을 때 콜백함수라는 구조를 이용한다. 함수 안에 들어가는 함수를 전부 콜백함수라고 지칭한다.

▶️ 콜백함수를 이용한 순차적 실행

  function func1() {
      console.log(1);
  }

  function func2() {
      console.log(2);
  }

  func1();
  func2();

• 만약 파이썬으로 코드를 짰다면 순서대로 실행이 된다.
• 그러나 JS는 비동기라는 특수성으로 인해 위와 같은 코드가 순차적으로 실행된다는 보장이 없다.(func1에 setTimeout이 들어갔을 경우)

  function func1(callbackFunc) {
      console.log(1);
      callbackFunc();
  }

  function func2() {
      console.log(2);
  }

  func1(func2);

• 이는 위와 같이 파라미터를 뚫고 인자로 다음에 실행할 함수 이름을 넣으면 순차적으로 실행이 가능하다.

  func1(function(){
    console.log(2);
  }):

또는 이렇게 함수선언문을 직접 넣어 줄 수도 있다.

  func1(function(){
    func2(function(){
      func3(function(){
        ~~~ 실행 내용 ~~~
      });
    });
  }):

• (func1 --> func2 --> func3) 차례대로 실행해주는 코드이다.
• 이 경우 함수가 길어질수록 지저분해지고 코드의 가독성이 떨어진다는 단점이 있다. 이러한 점이 신경쓰인다면 promise라는 es6문법을 활용한다.
• callback 함수는 비동기와 직접적으로 관련있는 패턴은 아니며, 단순 함수의 디자인 패턴이라는 것을 알아두자.