자바스크립트 콜백 (Javascript Callback) - 기술

문서의 이전 판을 선택했습니다! 저장하면 이 자료로 새 판을 만듭니다.

{{tag>javascript callback}}
======자바스크립트 콜백 (Javascript Callback) ======

Callback이란?

모든 명령의 실행을 마친 후에 넘겨받은 함수(객체)를 실행 하는 것을 Callback 이라고 함.
([[tech:javascript|]]에서는 함수도 객체이기 때문에 파라미터로 넘길 수 있다. 또한, 넘겨 받은 함수(객체)를 언제 실행할지 결정할 수 있다.)
자바스크립트는 자바와 다르게 비동기적으로 처리되기 때문에, Callback을 구현하여 사용 함.  [[http://ithub.tistory.com/67|출처]]

특정 함수의 동작이 끝남과 동시에, 다른 여러 가지 함수를 호출해야 할 경우에 사용된다.[[http://lovestudycom.tistory.com/entry/콜백함수를-왜-사용하나|출처]]

callback 함수는 어떻게 사용하는 것일까 ?
간단한 코드를 들어서 이해해보자. [[http://dalkomit.tistory.com/65|출처]]

<file javascript>
plus = function(a, b, callback){
 var result = a+b
 callback(result);
}

plus(5,10, function(res){
 console.log(res);
})
</file>

처음에 plus라는 함수를 선언하는데 인자는 a와 b와 callback이다. 여기서 callback은 함수 이름이며, 아무거나 해도 상관은 없다.

이제 아랫쪽에서 plus를 호출하면서 5와 10을 집어넣으면, 위쪽에서 정의된 plus함수가 실행되면서 5와 10을 더하고 이것을 result에 넣는다.
callback의 첫번째 변수로 result를 넣어서 보낸다.
그렇게되면 마지막 인자인 function(res)는 받은 res 값을 출력하는 함수이다.

자바스크립트에서 함수는 객체(object) 임. 자바스크립트에서 함수는 프로퍼티와 메소드를 가질 수 있기 때문에 1급객체 임. [[http://beomy.tistory.com/10|출처]]
콜백함수는 함수형 프로그래밍에서부터 발생한 패러다임임. 간단히 말해 함수형 프로그래밍은 함수를 인자처럼 사용을 하는 것. 더 간략하게 설명하면 ''함수를 인자로 넘겨 사용하겠다''

[[http://yubylab.tistory.com/entry/자바스크립트의-콜백함수-이해하기|출처]]

콜백함수는 포함하고 있는 함수의 변수에 접근이 가능하고 심지어 전역변수에도 접근이 가능함. 즉, 클로저(closure)이다. 클로저는 함수와 함수가 선언될 때의 환경을 기억하고 있다. [[http://victorydntmd.tistory.com/48|출처]]

콜백함수가 인자로 전달되어 함수의 내부에서 실행이 될 때 전달받은 인자가 함수인지를 명확하게 정의 하고 실행하는 것이 좋은 습관이다
 
<file javascript>
function getInput(options, callback) { 
allUserData.push(options); // callback 이 함수 인지를 확인함. 
if (typeof callback === "function") { // callback 이 함수인지를 확인 했으니까 함수호출함. 
callback(options); 
} }
</file>

만약에 이러한 확인 작업이 없다면 callback파라메터를 넘기지 않거나 혹은 함수가 아닌 값을 넘기게 되는 경우에는 실행중에 에러가 발생하는 문제가 일어난다.

<file >
  function get(url, callback) {
    var xmlDoc = new XMLHttpRequest();

xmlDoc.open('GET', url, true);
    xmlDoc.onload = function() {
      callback(JSON.parse(xmlDoc.response));
    };

xmlDoc.send(null);
  } //https://gitlab.com/commento/commento-ce/blob/master/frontend/js/commento.js
</file>

2+1? 이 필드는 비어 있도록 유지하세요:

편집 요약

참고: 이 문서를 편집하면 내용은 다음 라이선스에 따라 배포하는 데 동의하는 것으로 간주합니다: CC Attribution-Noncommercial-Share Alike 4.0 International