Javascript #2

 

목차

 

 

콜백함수란?

콜백(Callback) 함수는 간단히 말하면 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다.

별로 간단하지 않아 보인다.

더 간단히 말하면, 다른 함수가 끝나고 실행되는 함수 (callBack 되는 함수)

앞서 Javascript#1 에서 이야기 했듯이, 자바스크립트에서 함수는 객체이다.

자바스크립트에서 콜백함수를 사용하는 이유는, 추상화를 통해, 유연성과 확장성을 위한 장치를 만들어 놓는 것이라고 생각하면 좋다.

---

콜백함수 활용 사례

addEventListener

let button = document.getElementById("button"); // 버튼 요소를 선택

// 버튼에 클릭 이벤트 리스너를 추가
button.addEventListener("click", function () { // 콜백 함수
  console.log("Button clicked!"); 
});

Ajax 결과값을 받을 때 사용

서버와 데이터를 주고받을 때 사용하는 fetch 메서드의 서버 요청의 결과값을 처리하기 위해 콜백 함수가 사용된다.

타이머 실행 함수로 사용

_setTimeout_이나 _setInterval_과 같은 타이머 함수에서 일정 시간마다 스크립트를 실행하는 용도로서 콜백 함수를 이용한다.

// 3000 밀리초(3초) 후에 콜백 함수 실행
setTimeout(function () {
  console.log("Time is up!"); // 콜백 함수로 콘솔에 메시지 출력
}, 3000);

애니메이션 완료

jQuery에서 제공하는 애니메이션 메서드들은 애니메이션이 끝난 후에 실행할 콜백 함수를 인자로 받는다.

// jQuery의 slideUp 메서드를 사용하여 #box 요소를 숨기고 콜백 함수로 콘솔에 메시지 출력
$("#box").slideUp(1000, function () {
  console.log("Animation completed!"); // 콜백 함수로 콘솔에 메시지 출력
});

---

콜백함수 사용시 주의점

this를 사용한 콜백함수

콜백 함수 내에서 this 키워드를 사용하면, 기대한 대로 작동하지 않을 수가 있다.