[JavaScript] 콜백 함수 (callback function)

 

다음은 MDN에서 설명하는 콜백함수의 정의이다.

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

(콜백 함수는 다른 함수에 인수로 전달된 다음 외부 함수 내에서 호출되어 일종의 루틴이나 작업을 완료하는 함수이다.)

 

---

 

 

 

 콜백 함수 

- "인자로 들어가는 함수"가 콜백함수
- 나중에 실행되는 함수
- 함수는 값이기 때문에, 어디든 할당 될수 잇고 어디든 내보내질 수 있다.
- 따라서 인자(매개변수)안에도 할당될수 있다.

function sum (a){

a=function( ){
console.log('hit')
}

a()   // sum함수에 a 함수를 넣고 실행시킴 -> 나중에 a가 실행되니까 a는 콜백 함수

}

sum()  // hit

 

- 함수인 인수가 매개변수 a에 들어가면 a는 함수가 된다.
- 그래서 호출도 가능해진다.  a ( )
- 함수안에 함수를 넣어서 실행시킨다.

 

 

 

 콜백 함수 예시 1) 매개변수가 3개 있는 함수 

 

- question =질문
- yes = "Yes"라고 답한 경우 실행되는 함수
- no = "No"라고 답한 경우 실행되는 함수
- 함수는 반드시 question(질문)을 해야 하고, 사용자의 답변에 따라 yes()나 no()를 호출

 

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

function showOk() {
  alert( "동의하셨습니다." );
}

function showCancel() {
  alert( "취소 버튼을 누르셨습니다." );
}

// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
ask("동의하십니까?", showOk, showCancel);

 

- ask라는 이름을 가진 함수를 만들고, 그 안에 매개 변수 3개를 넣는다.
- 조건문에서, 만약 조건 confirm(question)이 true이면 yes()함수를 호출하고, false면 no()함수를 호출함
- showOk와 showCancle라는 함수를 생성한다. (이 둘을 '콜백함수'라고 부름)
- showOk와 showCancle라는 함수는 ask 함수의 인수가 되어 각각 yes와 no에 복사가 된다.
- 함수(showOK와 showCancle)를 함수(ask)의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수(showOK와 showCancle)를 "나중에 호출(called back)"하는 것이 콜백 함수의 개념
- ask ( ) 형식으로 ask 함수를 호출하면서, show, showCancle을 ( ) 안에 호출하면 나중에 alert 알람이 뜨게끔 쓸 수가 있는거임
- “동의 하십니까?” “동의하셨습니다” or “취소버튼을 누르셨습니다”

 

'확인' 버튼을 눌렀을 경우

 

'취소' 버튼을 눌렀을 경우

 

 

아래와 같이 짧게 표현도 가능하다.

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); },
  function() { alert("취소 버튼을 누르셨습니다."); }
);

 

 

 

 콜백 함수 예시 2) setTimeout 이용 

 

어떤 함수를 실행시키고, 그 뒤에 다른 함수를 실행시킨다.

 

setTimeout(( ) ⇒ {

console.log (올라가);

setTimeout(( ) ⇒ {

console.log (내려와);

}, 2000);

}, 1000); 

//2초뒤에 올라가 실행되었다가 1초 뒤에 내려와가 실행됨

 

 

 

 

 콜백 함수 예시 3) forEach 

 

forEach는 배열 매서드인데 안에 인자를 함수로 받는다.

let arr = [1 2,3,4]

arr.forEach( ( )⇒{ } )

 

forEach에 대한 자세한 내용은 https://dev-ini.tistory.com/52

 

 

 

참고 자료

https://developer.mozilla.org/en-US/docs/Glossary/Callback_function

https://ko.javascript.info/function-expressions