[JavaScript] 콜백 함수(Callback) 정리

콜백 함수(Callback)란?

콜백 함수란 다른 함수의 인수로 사용하는 함수는 가리킨다. 함수에 파라미터로 들어가는 함수이며, 순차적으로 실행하고 싶을 때 사용한다.

---

함수 이름 사용해 콜백 함수 실행

const btn = document.querySelector('button');

function display () {
	alert('click!');
}

btn.addEventListener('click', display); // 버튼을 클릭하면 display 함수 실행

addEventListener() 함수 안에 display() 함수를 넣을 때 소괄호는 없다는 것에 주의해야 한다.

 

addEventListener() 함수에서 미리 선언한 display() 함수를 인수로 사용하고 있다.

이렇게 다른 함수의 인수가 되는 함수를 콜백 함수라고 한다.

---

함수에 직접 작성해서 콜백 함수 실행

const btn = document.querySelector('button');

btn.addEventListener('click', function () { // 버튼을 클릭하여 alert 실행
	alert('click!');
});

 

함수 이름은 필요할 때마다 여러  번 사용해서 실행하거나 콜백 함수로 사용할 수 있습니다.

하지만 딱 한 번만 함수를 실행한다면 따로 함수를 선언하지 않고 함수에 직접 콜백 함수를 작성하는 방법도 있다.

---

콜백 함수 간단한 예시

function clickFunc(callback) {
    const message = 'click!';
    callback(message); // 메시지를 콜백 함수로 전달
}

function showMessage(msg) { // 콜백 함수로부터 메시지를 받음
    console.log(msg); // 'click!' 출력
}

clickFunc(showMessage); // clickFunc가 메시지를 전달하고 showMessage가 처리

1. clickFunc(showMessage)를 호출하면, clickFunc 함수가 실행
2. clickFunc 함수 내부에서 'click!'이라는 메시지를 준비하고, showMessage 함수에 이 메시지를 전달
3. showMessage 함수는 전달받은 'click!' 메시지를 콘솔에 출력