콜백 함수(Callback) 개념 & 응용

김서영·2024년 9월 27일

CS 스터디 - JavaScript, TypeScript

목록 보기

50/50

콜백 함수(Callback)

매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것

간단하게 예를 들자면,

function sayHello(name, callback) {
    const words = '안녕하세요 내 이름은 ' + name + ' 입니다.';
    
    callback(words); // 매개변수의 함수(콜백 함수) 호출
}

sayHello("서영", function printing(name) {
	console.log(name); // 안녕하세요 내 이름은 서영 입니다.
});

위 코드를 보면 sayHello() 함수를 호출할 때 입력 매개변수로 문자열과 printing 함수 자체를 전달하는 것을 볼 수 있다.

그리고 sayHello() 함수가 실행되면 실행문 안에서 함수가 든 두번째 매개변수인 callback 을 괄호 () 를 붙여 호출한다.

즉, 콜백 함수란 파라미터로 일반적인 변수나 값을 전달하는 것이 아닌 함수 자체를 전달하는 것을 말한다고 생각하면 된다.

또한, 어차피 매개변수에 함수를 전달해 일회용으로 사용하기 때문에 굳이 함수의 이름을 명시할 필요가 없어 보통 콜백 함수 형태로 함수를 넘겨줄 때 함수의 이름이 없는 '익명 함수' 형태로 넣어주게 된다.

function sayHello(name, callback) {
    const words = '안녕하세요 내 이름은 ' + name + ' 입니다.';
    
    callback(words);
}

sayHello("서영", function (name) { // 함수의 이름이 없는 익명 함수
	console.log(name); 
});

✨ 콜백 함수 사용 원칙

🔶 익명의 함수 사용

콜백 함수는 보통 호출 함수에 일회용으로 사용하는 경우가 많기 때문에, 코드의 간결성을 위해 이름이 없는 '익명 함수'를 사용한다.

함수의 내부에서 매개변수를 통해 실행되기 때문에 이름을 붙이지 않아도 되기 때문이다.

sayHello("서영", function (name) { // 함수의 이름이 없는 익명 함수
	console.log(name); 
});

또한, 뜻하지 않은 개발자의 실수로 인한 함수 이름의 충돌 방지를 위한 이유도 있다.

콜백 함수에 이름을 붙이면, 그 이름이 함수 스코프 내에서 유효한 식별자가 되는데, 만약 같은 스코프 내에 이미 같은 이름의 식별자가 있다면, 콜백 함수의 이름이 기존의 식별자를 덮어쓰게 되어 버리기 때문이다.

let add = 10; // 변수 add

function sum(x, y, callback) {
  callback(x + y); // 콜백함수 호출
}

// 이름 있는 콜백함수 작성
sum(1, 2, function add(result) {
  console.log(result); // 3
});

// 변수 add가 함수 add가 되어버린다.
console.log(add); // function add(result) {...}

위의 코드처럼 변수 add 가 있는 상태에서, 콜백 함수의 이름을 add 로 설정하면 콜백 함수가 변수의 값을 변경해 버리게 되는 것이다.

🔶 화살표 함수 모양의 콜백

콜백 함수를 익명 함수로 정의함으로써 코드의 간결성을 얻을 수 있었지만, 한 단계 더 간결성을 위해 자바스크립트의 화살표 함수를 사용해 '익명 화살표 함수' 형태로 정의해 사용할 수도 있다.

function sayHello(callback) {
  var name = "서영";
  callback(name); // 콜백 함수 호출
}

// 익명 화살표 콜백 함수
sayHello((name) => {
  console.log("Hello, " + name);
}); // Hello, 서영

🔶 함수의 이름을 넘기기

자바스크립트는 일급 객체의 특성을 가지고 있기 때문에, 자바스크립트는 null과 undefined 타입을 제외하고 모든 것을 객체로 다룬다.

때문에 매개 변수에 일반적인 변수나 상수 값 뿐만 아니라 함수 자체를 객체로서 전달이 가능한 것이다.

만일 콜백 함수가 일회용이 아닌 여러 호출 함수에 재활용된다면, 별도로 함수를 정의하고 함수의 이름만 호출 함수의 인자에 전달하는 식으로 사용 가능하다.

// 콜백 함수를 별도의 함수로 정의
function greet(name) {
  console.log("Hello, " + name);
}

function sayHello(callback) {
  var name = "뾰롱";
  callback(name); // 콜백 함수 호출
}

function sayHello2(callback) {
  var name = "서영";
  callback(name); // 콜백 함수 호출
}

// 콜백 함수의 이름만 인자로 전달
sayHello(greet); // Hello, 뾰롱
sayHello2(greet); // Hello, 서영

이런 특징을 응용하면, 매개 변수에 전달 할 콜백 함수 종류만을 바꿔줌으로서 여러 가지 함수 형태를 다양하게 전달이 가능하다.

아래와 같이 다른 동작을 수행하는 함수 say_hello() 와 say_bye() 를 정의해두고 introduce() 함수의 입력값으로 각기 다른 콜백 함수를 전달해주면, introduce라는 함수에서 다른 동작을 수행하는 것이 가능해진다.

function introduce (lastName, firstName, callback) {
    var fullName = lastName + firstName;
    
    callback(fullName);
}

function say_hello (name) {
    console.log("안녕하세요 제 이름은 " + name + "입니다");
}

function say_bye (name) {
    console.log("지금까지 " + name + "이었습니다. 안녕히계세요");
}

introduce("김", "서영", say_hello);
// 결과 -> 안녕하세요 제 이름은 김서영입니다

introduce("홍", "길동", say_bye);
// 결과 -> 지금까지 김서영이었습니다. 안녕히계세요

✨ 콜백 함수 활용 사례

🔶 이벤트 리스너

addEventListener 는 특정 이벤트가 발생했을 때 콜백 함수를 실행하는 메서드이다.

클릭과 같은 이벤트를 처리하기 위해 등록하는 이벤트 리스너로 콜백함수가 쓰인다.

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

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

🔶 고차함수

자바스크립트에서 사용되는 forEach 메서드에 입력값으로 콜백 함수를 전달받는 형태를 가지고 있다.

// 예시 : 배열의 각 요소를 두 배로 곱해서 새로운 배열을 생성하는 콜백 함수 
let numbers = [1, 2, 3, 4, 5]; // 배열 선언 
let doubled = []; // 빈 배열 선언 

// numbers 배열의 각 요소에 대해 콜백 함수 실행 
numbers.forEach(function (num) { 
    doubled.push(num * 2); // 콜백 함수로 각 요소를 두 배로 곱해서 doubled 배열에 추가 
}); 

console.log(doubled); // [2, 4, 6, 8, 10]

🔶 Ajax 결과값

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

// fetch 메서드를 사용하여 서버로부터 JSON 데이터를 받아오고 콜백 함수로 화면에 출력
fetch("https://jsonplaceholder.typicode.com/users")
  .then(function (response) {
    // fetch 메서드가 성공하면 콜백 함수로 response 인자를 받음
    return response.json(); // response 객체의 json 메서드를 호출하여 JSON 데이터를 반환
  })
  .then(function (data) {
    // json 메서드가 성공하면 콜백 함수로 data 인자를 받음
	console.log(data);
  })

🔶 타이머 실행 함수

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

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

🔶 애니메이션 완료

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

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