자바스크립트의 콜백 함수란 무엇인가요?

JavaScript에서 콜백 함수는 매개변수로 전달되는 함수입니다. 함수 A는 다른 함수 B에 매개변수(함수 참조)로 전달되고, 이 함수 B는 함수 A를 실행합니다. 함수 A를 콜백 함수라고 하며, 이름(함수 표현식)이 없으면 익명 콜백 함수라고 합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

콜백 함수란 무엇인가요?

JavaScript에서 함수는 객체입니다. 따라서 함수는 함수를 매개변수로 사용할 수 있으며 다른 함수에 의해 반환될 수 있습니다. 이를 수행하는 함수를 고차 함수라고 합니다. 매개변수로 전달된 모든 함수를 콜백 함수라고 합니다.

콜백 함수의 구체적인 정의는 다음과 같습니다. 함수 A는 매개변수(함수 참조)로 다른 함수 B에 전달되고 이 함수 B는 함수 A를 실행합니다. 함수 A가 콜백 함수라고 가정해 보겠습니다. 이름(함수 표현식)이 없으면 익명 콜백 함수라고 합니다.

콜백이 왜 필요한가요?

매우 중요한 이유 중 하나는 JavaScript가 이벤트 중심 언어라는 것입니다. 이는 JavaScript가 응답을 계속 기다리지 않고 다른 이벤트를 수신하면서 계속 실행된다는 것을 의미합니다. 기본 예를 살펴보겠습니다.

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

예상한 대로 함수가 먼저 실행된 다음 두 번째 함수가 실행되어 콘솔에 다음 내용이 기록됩니다.

// 1
// 2

지금까지는 괜찮습니다.

하지만 함수에 즉시 실행할 수 없는 일부 코드가 포함되어 있으면 어떻게 되나요? 예를 들어, 먼저 요청을 보낸 다음 응답을 기다려야 하는 API 요청이 있나요? 이 작업을 시뮬레이션하기 위해 설정된 시간 후에 호출되는 JavaScript 함수인 setTimeout이 사용됩니다. API 요청을 시뮬레이션하기 위해 함수를 500밀리초 지연합니다. 새로운 코드는 다음과 같습니다:

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

이제 setTimeout()이 어떻게 작동하는지 이해하는 것은 중요하지 않습니다. 중요한 점은 console.log(1)을 500ms 지연 내로 이동했다는 것입니다. 그렇다면 함수를 호출하면 어떻게 될까요?

first();
second();
// 2
// 1

first() 함수를 먼저 호출했지만 결과는 second() 함수 다음에 인쇄되었습니다.

JavaScript가 우리가 원하는 순서대로 함수를 실행하지 않는 것이 아니라, JavaScript가 second()를 계속하기 전에 first()의 응답을 기다리지 않는다는 것입니다.

그럼 이걸 왜 보여주는 걸까요? 왜냐하면 함수를 하나씩 호출하면서 올바른 순서로 실행되기를 기대할 수 없기 때문입니다. 콜백은 다른 코드의 실행이 완료될 때까지 특정 코드가 실행되지 않도록 하는 방법입니다.

콜백 함수 만들기

자, 더 이상 고민하지 말고 콜백을 만들어 보겠습니다!

먼저 Chrome 개발자 콘솔(Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J)을 열고 콘솔에 다음 함수 선언을 입력합니다.

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

이제 콜백을 마지막 매개변수로 추가해 보겠습니다. doHomework() 함수에서 콜백을 전달할 수 있습니다. 그런 다음 doHomework() 호출의 두 번째 매개변수에 콜백 함수를 정의합니다.

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

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

보시다시피 콘솔에 위의 코드를 입력하면 "숙제 시작" 알림과 "숙제 완료" 알림이라는 두 가지 알림을 받게 됩니다.

그러나 함수 호출에서 콜백 함수를 정의하는 것이 항상 필요한 것은 아닙니다. 다음과 같이 코드의 다른 곳에서 정의할 수 있습니다.

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

이 예제의 결과는 이전 예제와 정확히 동일하지만 설정이 약간 다릅니다. doHomework() 함수 호출 중에 AlertFinished 함수 정의를 매개변수로 전달한 것을 볼 수 있습니다.

실제 예시

트위터의 API를 호출해보겠습니다. API에 요청할 때 해당 응답에 대한 조치를 취하려면 먼저 응답을 기다려야 합니다. 이는 실제 콜백의 좋은 예입니다. 요청은 다음과 같습니다.

T.get('search/tweets', params, function(err, data, response) {
  if(!err){
    // This is where the magic will happen
  } else {
    console.log(err);
  }
})

T.get은 Twitter에 get 요청을 보내는 것을 의미합니다.

이 요청에는 세 가지 매개변수가 있습니다: "search/tweets"(요청 경로), params(이것은 검색 매개변수) 및 익명 함수(예: 콜백).

코드 실행을 계속하려면 서버의 응답을 기다려야 하기 때문에 여기서 콜백이 중요합니다. API 요청이 성공할지는 알 수 없으므로 get 요청을 통해 검색/트윗에 매개변수를 보낸 후 기다립니다. Twitter가 응답하면 콜백 함수가 호출됩니다. 트위터는 우리에게 오류(error) 객체나 응답 객체를 보낼 것입니다. 콜백 함수 내에서 if() 문을 사용하여 요청이 성공했는지 확인한 다음 그에 따라 새 데이터에 대해 조치를 취할 수 있습니다.

【관련 권장 사항: javascript 학습 튜토리얼】

위 내용은 자바스크립트의 콜백 함수란 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!