Javascript - Callback 함수

자바스크립트에서 callback(콜백) 함수는 다른 함수에 인자(parameter)로 전달되어 해당 함수 안에서 호출되는 함수입니다.

아래의 코드를 살펴봅시다.

var myArray = [1,2,3];

myArray.forEach(function(element){
  console.log(element);
});

myArray라는 배열이 있고, 이 배열의 forEach의 함수에 인자(parameter)로 변수가 아닌 함수를 작성하였습니다. 함수의 인자로 변수가 아닌 함수가 들어가는 것이 좀 이상하게 보일 수도 있습니다. 다음과 같이 풀어서 작성해봅시다.

var myArray = [1,2,3];

var myCallback = function(element){
  console.log(element);
};

myArray.forEach(myCallback);

함수를 myCallback 변수에 넣은 후, myArray.forEach 함수에 myCallback 변수를 전달하는 식입니다.

함수를 바로 전달하든 함수를 변수로 바꿔서 전달하든 forEach는 함수를 인자로 전달받게 되어 있는데 이렇게 함수에 인자로 전달되는 함수를 콜백 함수라고 합니다. 콜백(callback) 함수라고 불리는 이유는, 한 함수에 인자로 함수가 전달되면 전달되는 즉시 해당 함수가 실행되는 것이 아니라, 상위 함수의 코드에서 불려질 때(callback할 때) 함수가 실행되기 때문입니다.

위 예제는 Call back 의 구조를 서명하기 위해 예를 든 것이고, 콜백 함수의 정말 중요한 의미는 비동기(asynchronous) 처리를 담당한다는 것입니다. 아래 예제를 살펴봅시다.

$("#myButton").on("click", function() {
  console.log("clicked");
});

jQuery로 #myButton이 click되었을때 "clicked"라는 문구를 출력하는 함수인데 $("selector").on("event",callback_함수)의 형태로 callback함수가 들어가 있습니다.

** jQuery를 모르는 사람을 위해 간단히 설명하면 $()함수는 html의 tag를 선택하는 함수로, $("#myButton")는 html의 id항목의 값이 myButton인 tag를 선택합니다. $()함수로 선택된 tag는 jQuery의 함수들을 사용할 수 있습니다. on함수는 이벤트이름(문자열)과 callback함수를 인자로 받으며 이벤트가 발생(triggered)하면 콜백함수를 실행하게 됩니다.

이처럼 비동기함수에서 callback함수로 작성된 코드는 인자로 전달되는 즉시 실행되는 것이 아니라 특정한 조건이 갖추어 지는 경우 실행됩니다.

댓글

H
Hyunjung Ji 2018.03.27
이해하기 쉽게 설명해주셔서 감사합니다. 담아갈께요!!! ^_____^
I
Ian H 2018.03.27
@Hyunjung Ji,
격려의 말씀 감사드립니다!
이수혁 2018.07.19
콜백에 대해 확실히 개념 짚어진것같습니다 감사합니다
I
Ian H 2018.07.23
@이수혁,
감사합니다^^
상은 2019.07.01
포스팅 보면서 도움 많이 받고 있습니다 !!
I
Ian H 2019.07.01
@상은,
댓글 남겨 주셔서 감사합니다^^ 질문있으시면 언제든지 또 댓글 남겨주세요!
댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP