[javascript] 콜백 함수(callback function)

콜백 함수 (Callback Function)

• 다른 함수의 인자로 전달되어, 특정 작업이 끝난 후 호출되는 함수
• 비동기 처리나 이벤트 처리에 많이 사용됨.
• 자바스크립트는 기본적으로 비동기 방식이 많아서, 어떤 작업이 끝난 뒤에 무언가를 하고 싶을 때 그 작업이 끝났을 때 실행할 함수를 미리 넘겨주는 것
• 호출되는 시점이 비동기 작업 완료 이후임
• 문제점: 콜백 지옥 (Callback Hell)
  • 콜백을 여러 번 중첩해서 사용하면 코드가 복잡해지고 가독성이 떨어짐
     → 이 문제를 해결하려고 프로미스(Promise)나 async/await가 등장

// [문법 - 함수를이자로 전달하는 형태]
function 함수이름(콜백함수) {
  // 작업 후 콜백 호출
  콜백함수();
}

---

기본적인 콜백 함수 구조

/* 함수A : 콜백 함수를 받을 준비가 된 함수, 괄호 안에 다른 함수(함수B)를 매개변수로 받음 */
function 함수A(콜백함수) { 
  // 1. 무언가 작업을 하고 (함수A 안에서 어떤 작업을 먼저 수행)
  console.log('함수A 실행 중...');

  // 2. 콜백함수를 "나중에" 호출함
  /*
  나중에 실행될 함수(= 콜백 함수)를 호출
   여기서 콜백함수는 실제로 함수B를 가리키고 있으니
   이 시점에서 함수B()가 실행되는 것과 같음
  */
  콜백함수();
}

/*
함수B : 콜백으로 전달할 실제 함수
나중에 함수A 안에서 호출될 예정
*/
function 함수B() {
  console.log('나는 콜백 함수야!');
}

// 함수A를 실행하면서, 함수B를 콜백으로 전달
/*
함수B를 콜백 함수로 넘겨줌

주의: 함수B()라고 쓰면 바로 실행되는 거고,
함수B라고만 쓰면 “함수 그 자체”를 넘기는 것 ←  중요!
*/
함수A(함수B);

• 함수A(함수B)는 함수B를 콜백으로 넘겨주어, 함수A가 필요할 때 함수B를 실행하도록 예약하는 행위
• 콜백함수()는 넘겨받은 함수B를 실제로 실행하는 시점

✓   함수B는 "나중에 부를 축하 공연"
      함수A(함수B)는 "축하 공연자를 행사장에 초대"
      콜백함수()는 "무대에 올라와주세요!" 라고 부르는 것

function fetchData(callback) { // callback이라는 함수를 매개변수로 받는 fetchData 함수 정의
  setTimeout(() => { // 1초(1000ms) 후에 안의 코드를 실행함 (비동기 타이머)
    console.log('데이터 받아옴'); // 	1초 후에 콘솔에 출력
    callback();  // 👉 나중에 실행됨 1초 기다린 후, 전달받은 콜백 함수를 실행
  }, 1000);
}

fetchData(function() {  // 콜백 함수를 "정의하면서 동시에 전달"
  console.log('콜백 함수 실행됨!'); 
});

//출력결과
/*
(1초 기다림...)
데이터 받아옴
콜백 함수 실행됨!
*/

---

콜백 패턴

1. 함수 A가 함수 B를 매개변수로 받음
2. 함수 A 안에서 어떤 작업을 수행하고 나서 함수 B(콜백 함수)를 호출함
3. 호출 시점은 작업이 끝났을 때 (즉, 동기든 비동기든 완료 시점에 실행)

콜백 패턴 사용 목적

 

• 비동기 처리: 비동기 작업이 끝났을 때 실행할 코드를 지정
• 유연성: 함수 실행 완료 후 동작을 호출하는 쪽에서 결정 가능
• 이벤트 처리: 특정 이벤트 발생 시 실행할 함수 지정

콜백 패턴의 종류와 변형

1. 단순 콜백

• 결과에 상관없이 호출만 하는 형태

 

function doSomething(callback){
	console.log('작업 시간');

	setTimeout(()=>{
		console.log('작업완료');
		callback();
	},1000)
}

doSomething(()=>{
	console.log('콜백함수 호출됨');

})
// ⇒ 작업 시작 (1초 뒤) 작업 완료 콜백 함수가 호출됨

2.에러 처리 콜백 (Node.js 스타일)

• 첫 번째 인자를 에러로 받고, 두 번째 인자에 결과를 넘김

function doAsyncTask(callback) {
  setTimeout(() => {
    const err = null;
    const res = 404;
    callback(err, res);
  }, 1000);
}

doAsyncTask((err, data) => {
  if (err) console.log('에러', err);
  else console.log('결과', data);
}); // ⇒ 결과 404

3. 조건별 콜백 분기

• 성공 콜백, 실패 콜백 따로 받기

/*
1. doTask가 호출되고, 콜백 함수 두 개가 매개변수로 전달됨
2. doTask 내부에서 isSuccess를 랜덤으로 정함
3. isSuccess가 true라면 -> 성공 콜백 실행
  - 전달된 메시지와 함께 successCallback 함수가 호출되고, 콘솔에 성공 메시지가 찍힘
4. isSuccess가 false라면 -> 실패 콜백 실행
  - 전달된 에러 메시지와 함께 errorCallback 함수가 호출되고, 콘솔에 에러 메시지가 찍힘
*/
function doTask(successCallback, errorCallback) {
  const isSuccess = Math.random() > 0.5; // 50% 확률로 성공/실패 가정

  if (isSuccess) {
    successCallback("작업이 성공적으로 완료되었습니다!");
  } else {
    errorCallback("작업 중 에러가 발생했습니다.");
  }
}

// 호출하는 쪽
doTask(
  (message) => {
    console.log("성공 콜백:", message);
  },
  (error) => {
    console.error("에러 콜백:", error);
  }
);

---

setTimeout, setInterval

• setTimeout, setInterval 모두 콜백 함수를 받아서 일정 시간이 지나면 호출
• 이 함수들은 실행할 작업을 콜백 함수 형태로 받아
  시간이 다 되면(혹은 반복 주기가 되면) 그 콜백 함수를 호출
  
•  

[javascript] 타이머(timer) 함수

 

---

콜백 함수 활용

1. 선언적 함수 사용

function callTimes(callback) {
  for (let i = 0; i < 3; i++) {
    callback(i);
  }
}

function print(i) {
  console.log(`${i}`);
}

callTimes(print);
// ⇒ 0 1 2

2. 익명 함수 사용

function callTimes(callback) {
  for (let i = 0; i < 3; i++) {
    callback(i);
  }
}

callTimes(function (i) {
  console.log(`${i}`);
});
// ⇒ 0 1 2

3. forEach() 메서드

• 배열이 갖고 있는 함수(메서드)로써 단순하게 배열 내부의 요소를 사용해서 콜백함수 호출

const nums = [24, 12, 20, 4, 1];
nums.forEach((val, idx) => {
  console.log(`${idx} : ${val}`);
});

4. map() 메서드

const nums = [1, 2, 4];
const res = nums.map((val) => {
  return val * val;
});
console.log(res); // ⇒ [ 1, 4, 16 ]

5. filter() 메서드

const nums = [1, 2, 4];
const res = nums.filter((val) => val >= 2);
console.log(res); // ⇒ [ 2, 4 ]

 

[Javascript] 배열 속성 및 메서드