본문 바로가기

개인공부

[Javascript] callback 함수

반응형

자바스크립트로 interaction을 구현하는 것에 집중하면서 MDN검색을 자주 하게 되었다.

 

검색을 하면 설명에 callback이라는 단어를 자주 접했고 그 뜻이 무엇인지 몰랐기에 기록한다.

 

Callback function (출처: https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)

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 greeting(name) {
  alert('Hello ' + name);
}

function processUserInput(callback) {
  var name = prompt('Please enter your name.');
  callback(name);
}

processUserInput(greeting);

위 코드를 실행하면 processUserInput함수에 의해 'Please enter your name'라는 설명이 기재된 입력 가능한 대화 상자가 나타난다.  그리고 그곳에 어떠한 단어를 입력하면 greeting 함수에 의해 Hello 어떠한 단어가 alert된다. 

 

interaction을 구현할 때 하나의 함수에 여러 기능을 같이 나타내도 되겠지만 유지보수를 위해서라면 의미상 분리해놓는 것이 좋을 것이다. 이 의미상 분리로 사용되는 것이 callback 함수가 아닐까

 

  

+ 추가로 위 함수에서 processUserInput(callback)과 callback(name)이라는 부분의 callback은 apple로 바꾸어도 상관이없다. 

 

반응형