콜백(callback)

function 키워드로 선언한 함수를 콜백으로 사용(콜백 파라미터 없음)

function sayHello() {
  console.log('Hello World!');
};

function printMessage(func) {
  console.log('Printing message...');
  func();
};

printMessage(sayHello);

여기서 [ printMessage(sayHello); ]  sayHello 뒤에 괄호를 쓰지 않는 것이 중요하다. sayHello를 호출하는게 아니라 그냥 아규먼트로 전달하는 것이기 때문이다. sayHello 처럼 다른 함수의 아규먼트로 전달되는 함수를 콜백이라고 부른다.

Printing message...
Hello World!

Arrow Function을 콜백으로 사용(콜백 파라미터 없음)

//function sayHello() {
//  console.log('Hello World!');
//};

function printMessage(func) {
  console.log('Printing message...');
  func();
};

printMessage(() => console.log('Hello World!'));

위 코드 처럼 간단한 함수는 화살표 함수로 변환할수도 있다. sayHello 함수를 화살표 함수로 바꿔보면, printMessage(() => console.log('Hello World!')); 이렇게 작성할 수 있다.

Printing message...
Hello World!

function 키워드로 선언한 함수를 콜백으로 사용(콜백 파라미터 있음)

function sayHello(name) {
  console.log(`Hello ${name}!`);
};

function printMessage(func, name) {
  console.log('Printing message...');
  func(name);
};

printMessage(sayHello, 'Bob');

sayHello 함수는 name 파라미터를 받아서 name에게 인사를 하도록 코드를 변경했다. 그리고 printMessage 함수도 name 파라미터를 받는데 안에서 func 콜백을 호출할 때 name을 넘겨준다. 그렇게 되면 func 파라미터는 printMessage 에 첫 아규먼트로 적은 sayHello, name 파라미터는 'Bob'을 받아 실행을 한다. 이렇게 콜백은 파라미터를 받을 수도 있다.

파라미터를 받는 경우 바깥 함수 안에서 파라미터를 채워서 콜백을 실행해 준다.

Printing message...
Hello Bob!

Arrow Function을 콜백으로 사용(콜백 파라미터 있음)

function printMessageWithParams(func, name) {
  console.log('Printing message...');
  func(name);
}

printMessageWithParams((name) => console.log(`Hello ${name}!`), 'Bob');

바로 직전에 사용 했던 코드를 화살표 함수로 바꿔서 사용하면 이렇게 된다.

간단한 콜백에는 화살표 함수를 많이 사용한다.

Printing message...
Hello Bob!