개발뚱땅

간단한 예제를 통해 6분만에 이해해보자.

콜백이란?

간단: 다른 함수의 실행이 완료된 후 실행되는 함수입니다. - call after라고 하는 사람도 있음.

좀 더 자세히: 자바스크립트에서 함수는 객체입니다. 그렇기에, 함수는 다른 함수의 인자가 될 수 있고 반환될 수 도 있습니다. 콜백 함수를 호출하는 함수를 고차함수라고 하며, 인자로 전달된 함수를 콜백함수라 합니다.

더 자세히 알아보기 위해 예제를 살펴보겠습니다.

왜 콜백이 필요할까요?

중요한 이유중 하나 - 자바스크립트는 이벤트 중심 언어입니다. 이벤트를 수신하는동안 계속 작동합니다.

기본 예제를 봅시다:

function first(){
  console.log(1);
}
function second(){
  console.log(2);
}
first();
second();

당신이 예상하듯이 first함수가 먼저 실행되고 second가 실행되어 다음과같이 콘솔에 출력됩니다.

1
2

지금까지 잘 작동했습니다.

그런데, 함수 first에 즉시 실행할 수 없는 코드가 포함되어있다면 어떨까요? 예를 들면, 요청을 보낸뒤 응답을 기다려야하는 API 호출처럼...

이러한 상황을 시뮬레이션하기 위해 일정시간이 지난 후 함수를 호출하는 Javascript의 setTimeout을 사용합니다. API 호출을 시뮬레이션하기 위해 500ms동안 함수를 지연시킵니다. 그 코드는 다음과 같습니다:

function first(){
  // Simulate a code delay
  setTimeout( function(){
    console.log(1);
  }, 500 );
}
function second(){
  console.log(2);
}
first();
second();

setTimeout이 어떻게 작동하는지는 지금 중요하지 않습니다. 중요한 것은 우리가 500ms지연시킨 console.log(1)의 결과를 확인하는 것이죠. 이제 함수를 호출하면 어떻게 될까요?

first();
second();

2
1

first를 먼저 호출했지만 second함수 이후에 결과가 출력되었습니다.

순서대로 함수가 호출되지 않고, Javascript는 first의 응답을 기다리지 않고 second를 실행합니다.

당신은 순서대로 호출하고 싶더라도 일반적인 방법으로는 할 수 없음을 확인했습니다.

콜백은 다른 코드의 작동이 끝난 뒤 실행되도록 할 수 있습니다.

콜백 만들기

콜백을 만들어 봅시다.

먼저 크롬 개발자 콘솔을 열고(윈도우: Ctrl + Shift + J, 맥: Cmd + Option + J) 콘솔에 다음과 같이 함수를 선언하세요.

function doHomework(subject) {
  alert(`Starting my ${subject} homework.`);
}

위의 doHomework 함수는 과목이라는 하나의 변수를 가집니다. 콘솔에 다음과 같이 입력하여 함수를 호출하세요.

doHomework('math');
// Alerts: Starting my math homework.

이제 콜백함수를 추가해봅시다. doHomework 함수의 매개변수로 콜백함수를 전달할 수 있습니다.

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}

doHomework('math', function() {
  alert('Finished my homework');
});

위의 코드를 콘솔에 입력하면 볼수 있듯이, 경고창이 2회 뜨게됩니다.: starting homework 경고와 finished homework

콜백 함수는 다음과 같이 따로 정의될 수 있습니다.

function doHomework(subject, callback) {
  alert(`Starting my ${subject} homework.`);
  callback();
}
function alertFinished(){
  alert('Finished my homework');
}
doHomework('math', alertFinished);

콜백함수는 어떤 작업이 끝나고 나서 작동하길 원하는 작업이 있는 경우 사용합니다.

출처:

https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced