콜백 함수

콜백 함수란?

자바스크립트에서 함수는 객체이다.
그럼 함수의 파라미터로서 함수 객체를 전달할 수 있을까? 할 수 있다.

코드로 예를들면

function print(callback) {
  callback();
}

print 함수는 다른 함수를 파라미터로 받아 내부에서 그 함수를 호출하고 있다.
이걸 우리는 "콜백"이라 하기로 했다.

즉, 콜백함수는 특정 함수에 매개변수로 전달된 함수를 의미한다.
그리고 그 콜백함수는 함수를 전달받은 함수 안에서 호출된다.

콜백 함수를 왜 사용하는가?

콜백함수는 함수의 인자로 전달되는 함수이며, 전달받은 함수내에서 실행된다는 것은 위 내용을 통해 알았다. 그럼 왜 사용하는지 알아보자.

자바스크립트는 코드를 위에서 아래로 순차적으로 실행한다. => 동기적 프로그래밍
하지만, 다른 행위가 일어난 뒤에 실행될 수도 있고 순차적으로 실행되지 않을 때도 있다.
이걸 우리는 비동기 프로그래밍이라 한다.

콜백은 태스크가 끝나기 전에 함수가 실행되지 않는 것을 보장하는데
다시 말해, 콜백은 그 태스크가 끝난 직후에 실행될 것이다.

콜백은 비동기 자바스크립트 코드를 작성할 수 있도록 해주고 여러 문제와 에러들로부터
안전하게 지켜준다.

콜백 함수 사용 원칙

1. 익명의 함수 사용
매개변수에 함수를 전달해 일회용으로 사용하기 때문에 굳이 함수의 이름을 명시할 필요가 없어 콜백 함수 형태로 함수를 넘겨줄때 함수의 이름은 없는 '익명 함수'형태로 넣어주게 된다.

sayHello("이름",function (name) {
  console.log(name);
});

2. 화살표 함수 모양의 콜백

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

// 익명 화살표 콜백 함수
sayHello((name) => {
  console.log("Hello, " + name);
}); // Hello, Alice

3. 함수의 이름을 넘기기
자바스크립트는 일급 객체의 특성을 가지고 있기 때문에, null과 undefined 타입을 제외하고 모든 것을 객체로 다룬다. 따라서 매개변수에 함수 자체를 객체로서 전달이 가능한 것이다.
만일 콜백 함수가 일회용이 아닌 여러 호출 함수에 재활용으로 자주 이용될 경우, 별도로 함수를 정의하고 함수의 이름만 호출 함수의 인자에 전달하는 식으로 사용이 가능하다.

// 콜백 함수를 별도의 함수로 정의
function greet(name) {
  console.log("Hello, " + name);
}

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

function sayHello2(callback) {
  var name = "Inpa";
  callback(name); // 콜백 함수 호출
}

// 콜백 함수의 이름만 인자로 전달
sayHello(greet); // Hello, Alice
sayHello2(greet); // Hello, Inpa

📚Reference
자바스크립의 콜백 함수 – 자바스크립트에서 콜백 함수가 무엇이고 어떻게 사용하는지 알아봅시다
콜백 함수(Callback) 개념 & 응용 - 완벽 정리