콜백 함수는 함수 안에서 어떤 특정한 시점에 호출되는 함수를 말합니다. 보통 콜백 함수는 함수의 매개변수로 전달하여 특정 시점에서 콜백 함수를 호출합니다. 그럼 콜백 함수가 어떻게 사용되는지 알아보겠습니다.
함수 정의
// 콜백 함수가 될 매개변수 설정
function plus(a, b, callback) {
var sum = a + b;
callback(sum);
}
plus 함수를 보면 callback라는 매개변수를 넣어주고 plus 함수 내부에서 callback 매개변수를 함수 형태로 실행하고 있는 모습입니다.
정의한 함수 호출
// plus 함수에 익명 함수를 인자로 전달
plus(1, 2, function(result) {
console.log(result);
});
익명 함수를 전달하고 plus 함수를 호출하고 있는 모습입니다. 함수에서 정의하고 있는 로직을 보면 a + b 가 변수 sum에 저장되고 sum이 익명 함수로 전달되어 콘솔에 출력하고 있다는 것을 알 수 있습니다. 콜백 함수가 맨 뒤에 있기 때문에 모든 로직이 처리되고 난 시점에서 콜백 함수가 호출되는 것을 알 수 있습니다.
결과
3
정의한 함수를 인자로 전달
function plus(a, b, callback) {
var sum = a + b;
callback(sum);
}
function print(result) { // 콜백 함수로 사용할 함수 정의
console.log(result);
}
plus(1, 2, print);
익명 함수를 전달하는 것 대신 미리 정의한 함수 print를 전달하고 있습니다. print 함수 역시 callback 매개변수가 호출되고 있는 시점에 호출되고 있습니다.
결과
3
특정 이벤트가 발생할 때마다 함수를 실행하고 싶을 때 콜백 함수를 사용합니다.
예시
$("button").click(function() {
alert(1);
});
위와 같이 클릭 이벤트가 발생할 때마다 콜백 함수가 실행되어 버튼을 누를 때마다 경고창이 뜨게 할 수 있습니다.
어떤 동작이 끝나고 함수를 호출하는 거라면 그냥 순차적으로 함수를 호출하면 되지 않을까?라는 의문을 가지게 됩니다. 그럼 예시들을 통해서 한번 비교해보겠습니다.
일반적인 경우
function plus(a, b) {
var sum = a + b;
return sum;
}
function print(result) {
console.log(result);
}
print(plus(1,2));
다음은 plus 함수의 리턴 값을 print 함수로 전달하여 출력하는 예제입니다. print함수가 실행되기 위해서는 plus함수의 실행이 전부 완료가 돼야 됩니다. 즉, print함수는 plus함수의 동작이 모두 끝날 때까지 계속 기다려야 합니다.
만약 위 코드가 웹사이트의 동작에 해당하는 코드이고 plus함수가 로직이 복잡해서 처리속도가 늦어지게 된다면 실행이 계속 지연되기 때문에 자바스크립트로 이루어진 웹사이트의 모든 동작이 멈춰버리게 됩니다.
콜백 함수를 사용한 경우
function plus(a, b, callback) { // plus 함수 정의
var sum = a + b;
callback(sum);
}
반면에 콜백 함수를 이용하여 동작을 구현하면 처리가 끝날 때까지 기다리는 것이 아니라 처리가 끝나는 시점에서 함수를 호출합니다. 즉, 정말로 필요할 때만 함수를 호출해서 효율이 좋고 웹사이트에서도 여러 가지 동작을 동시에 할 수 있습니다.
이와 같은 방법을 비동기식 처리방법이라고 합니다. 현재 웹사이트들은 비동기식 처리방법인 ajax를 활용하여 더 활발하게 동작할 수 있게 되었습니다. 따라서 콜백 함수는 비동기식 처리방법에 있어서 정말 중요한 개념이라고 할 수 있습니다.
[JavaScript] 자바스크립트 이벤트의 정의와 이벤트 등록 방법 (0) | 2020.10.24 |
---|---|
[JavaScript] 자바스크립트로 DOM 접근하기 (2) | 2020.10.23 |
[JavaScript] 자바스크립트 클로저의 의미와 사용하는 이유 (0) | 2020.10.22 |
[JavaScript] 자바스크립트 객체 생성 방법 (1) | 2020.10.09 |
[JavaScript] 자바스크립트 JSON의 정의와 메서드 (0) | 2020.10.02 |