Callback(콜백) 함수란?

---

콜백 함수의 정의

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.
자바스크립트에서 콜백 함수(callback function)는 함수의 인자로 전달되어 실행되는 함수를 의미합니다. 콜백 함수는 특정 이벤트가 발생하거나 작업이 완료되었을 때 호출됩니다. 이를 통해 비동기 작업이나 이벤트 기반 프로그래밍을 구현할 수 있습니다.

---

콜백 함수의 예시

function greeting(name) {
  alert(`Hello, ${name}`);
}

function processUserInput(callback) {
  const name = prompt("Please enter your name.");
  callback(name);
}

processUserInput(greeting);

콜백 함수는 일반적으로 익명 함수(anonymous function)로 전달되기도 합니다. (아래 코드 참조.)

setTimeout(function() { console.log('2 seconds have passed'); }, 2000); // 2초 후에 익명 함수를 실행

---

콜백 함수의 활용

이벤트 리스너

DOM 요소에 이벤트가 발생할 때 호출되는 함수를 콜백 함수로 사용

 

비동기 작업 처리

AJAX 요청이나 파일 읽기와 같은 비동기 작업이 완료되면 콜백 함수를 호출하여 결과를 처리

 

배열의 고차 함수

Array.prototype.map, Array.prototype.filter 등의 고차 함수는 콜백 함수를 인자로 받아 배열 요소에 대한 작업 수행

---

콜백 함수의 장점

비동기 작업 처리

콜백 함수를 사용하면 서버와의 통신이나 파일 입출력 등의 비동기 작업을 쉽게 구현 가능

 

이벤트 기반 프로그래밍

콜백 함수를 이용하여 이벤트가 발생했을 때 필요한 작업을 처리 가능

---

콜백 함수의 단점

콜백 지옥(Callback Hell)

콜백 함수가 중첩되어 사용될 경우 코드의 가독성이 저하되며, 복잡한 로직을 처리하기 어렵게 됨

 

에러 처리의 어려움

중첩된 콜백 함수에서 에러 처리를 할 때, 각 콜백 함수마다 에러 처리를 해주어야 하므로 코드가 길어지고 복잡해짐

---

해결 방안

Promise

비동기 작업의 결과를 나타내는 객체로, 성공한 경우와 실패한 경우에 대한 처리를 간결하게 작성할 수 있게 해줍니다.

또한, then과 catch 메서드를 사용하여 비동기 작업을 연결할 수 있어 코드의 가독성이 향상됩니다.

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data received');
    }, 2000);
  });
}

getData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

 

 

async/await

자바스크립트의 비동기 처리를 더 간결하게 작성할 수 있는 문법

async 함수 내부에서 await 키워드를 사용하면 Promise가 처리될 때까지 기다린 후에 결과를 반환받을 수 있습니다.

이를 통해 동기적인 코드처럼 간결하게 비동기 작업을 처리할 수 있습니다.

async function getDataAsync() {
  const data = await getData();
  console.log(data);
}

getDataAsync();