Javascript - Callback 함수

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

예를 들어,

var myArray = [1,2,3];

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

를 살펴보면, 이를 아래와 같이 표현할수 있는데,

var myArray = [1,2,3];

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

myArray.forEach(myCallback);

myCallback 함수를 myArray.forEach 함수에 parameter로 전달한 형태입니다.

이때 myCallback 함수가 콜백 함수에 해당되는데, 이는 myCallback 함수가 바로 실행되는 것이 아니라 myArray.forEach 함수안에서 이 함수를 호출받아(callback) 실행되기 때문입니다.

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

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

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

여기서 callback함수는 function () { console.log("clicked"); } 이며 자바스크립트가 처음 실행될 때 작동하는 것이 아니라, click 이벤트가 발생하면 jQuery가 이를 호출하여(callback) "clicked"가 출력됩니다. 

댓글

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