JavaScript의 콜백

JavaScript의 콜백

2022-10-19 last update

4 minutes reading tutorial javascript beginners webdev
콜백이란 무엇입니까?
함수를 다른 함수에 인수로 전달하고 해당 함수가 외부 또는 상위 함수 내에서 호출되면 콜백을 생성합니다. JavaScript에서 내장 메서드를 사용한 적이 있다면 이미 콜백을 사용했을 가능성이 큽니다. 기본적인 예를 살펴보겠습니다.

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



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

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

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


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

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

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


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

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