Callback

Callback 함수 : 다른 함수(A)의 전달인자(arguments)로 넘겨주는 함수(B)

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

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

A(B);

// callback in action : 반복 실행하는 함수(iterator)
// [1,2,3].map(function(element, index){ return element * element;
// });

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

ex) 비동기가 아닐 경우

const printNumber = (number) => {
  setTimeout(() => {
     console.log(number);
  }, Math.floor(Math.random() * 1000));
};

const print = () => {
  printNumber(1)
  printNumber(2)
  printNumber(3)
}

print(); // 1,2,3이 순서대로 나오지 않고 랜덤하게 나옴

ex) callback을 사용해서 비동기로 만든 경우

const printNumber = (number,callback) => {
  setTimeout(() => {
     console.log(number);
     callback();
  }, Math.floor(Math.random() * 1000));
};

const print = () => {
  printNumber(1,() => {
    printNumber(2,() => {
      printNumber(3.() => {})
    })
  })
}

print(); // 1,2,3이 순서대로 나오게 된다 

// callback 함수는 함수의 매개변수인 함수로, 
// 주로 비동기 처리에서 동기 처리를 할 때 callback 패턴을 사용

callback도 한계가 있으니 callback의 수가 많을 수록 코드를 관리하기 힘들고 가독성이 떨어지는 callback Hell이 만들어진다