JavaScript의 콜백

콜백이란 무엇입니까?
함수를 다른 함수의 인수로 전달하고 해당 함수가 외부 또는 상위 함수 내에서 호출되면 콜백을 생성합니다. JavaScript에 내장된 메서드를 사용했다면 이미 콜백을 사용했을 가능성이 높습니다. 기본 예제를 살펴보겠습니다.

function greet(cbFunc) {
  cbFunc();
  cbFunc();
}
function sayHello() {
  console.log("Hello");
}
greet(sayHello);
//Returns --->
'Hello'
'Hello'

위의 예에서 우리는 cbFunc 매개변수를 받아들이는 greeting이라는 함수 선언을 생성합니다. 함수 본문 내에서 cbFunc는 두 번 호출됩니다. 그런 다음 sayHello라는 또 다른 함수 선언을 만들고 이 함수의 본문 내부에 console.log Hello를 만듭니다. 이것은 우리의 콜백 함수가 될 것입니다. 그런 다음 welcome 함수를 호출하고 sayHello를 인수로 전달하여 콜백 함수가 됩니다.

콜백 함수를 사용할 때 기존 함수가 아닌 익명 함수를 사용하는 경우가 많습니다. 그 이유는 콜백 함수가 다른 곳에서 사용되지 않을 경우 콜백 코드 내에 명명된 함수를 저장할 필요가 없기 때문입니다. 다음 예제에서는 익명 함수를 사용하도록 코드를 업데이트합니다.

function greet(cbFunc) {
  cbFunc()
  cbFunc()
}
greet(function() {
  console.log("Hello");
})
//Returns --->
'Hello'
'Hello'

우리는 cbFunc라는 매개변수를 받아들이는 greet이라는 함수 선언을 선언합니다. 이것은 콜백 함수가 될 것이며 함수 본문 내에서 두 번 호출됩니다. 그런 다음 welcome 함수를 호출하고 익명 함수를 인수로 직접 전달합니다. 함수가 실행될 때 동일한 출력을 얻습니다.

JavaScript에서 setTimeout을 사용했다면 이미 콜백을 사용하고 있는 것입니다. setTimeout 함수는 콜백을 받아 일정 시간이 지난 후에 실행합니다. 예를 살펴보겠습니다.

setTimeout(() => {
  console.log("Hello");
}, 1000);
//Returns ---> 'Hello'

위의 예에서는 익명 함수를 setTimeout에 대한 콜백으로 전달합니다. 콜백은 문자열 Hello를 인쇄하는 콘솔 로그를 반환합니다. 1초 후 화면에 출력됩니다.

이 기사를 즐겼기를 바랍니다. 댓글, 질문 또는 피드백을 자유롭게 게시하고 더 많은 콘텐츠를 보려면 저를 팔로우하세요!