Callback Function

콜백 함수

콜백함수: 파라미터로 함수를 전달하는 함수

→ 파라미터로 함수를 전달 받아 함수의 내부에서 실행하는 함수이다.

button.addEventListener('click', function () {
  console.log('Button clicked!');
});

콜백함수를 사용하는 대표적인 이유는, 동기와 비동기를 함께 썼을 때 순서를 보장할 수 있기 때문이다. 콜백을 중첩해서 원하는 순서대로 실행하도록 코드를 짤 수도 있다. 콜백이 대표적으로 쓰이는 곳은 데이터 통신이다.

getPost(
  postNum,
  (postId) => {
    console.log('Post', postId);
    getComments(
      postId,
      (result) => {
        console.log('Comments:', result);
      },
      (message) => {
        console.log(message);
      },
    );
  },
  (message) => {
    console.log(message);
  },
);

사용 원칙

익명 함수 사용

함수의 이름이 없는 익명 함수를 사용한다. 함수의 내부에서 실행되기 때문에 이름을 붙이지 않아도 된다.

let number = [1, 2, 3, 4, 5];

number.forEach(function (x) {
  console.log(x * 2);
});

함수 이름 전달

자바스크립트는 함수 자체를 객체로서 전달이 가능한 특징이 있기에, 정의해둔 함수를 ()를 붙이지 않고 함수 이름만 호출 함수의 인자로 전달하는 방식으로 사용한다.

function greet(name) {
  console.log('Hello, ' + name);
}

function sayHello(callback) {
  var name = 'SeoHyeon';
  callback(name); // 콜백 함수 호출
}

sayHello(greet);
// sayHello(greet()); X
// sayHello(greet); O

콜백 지옥

콜백지옥 장풍

콜백지옥: 콜백 함수가 중첩되어 가독성이 떨어지는 형태

비동기 호출이 자주 일어나는 경우 콜백 지옥이 발생하기 쉽다. 콜백지옥이 있다면 가독성이 좋지 않고 유지보수 및 수정이 어려워진다. 이를 해결하기 위한 방법으로 promise와 async&await이 있다.