[JavaScript 문법] 22일차: 콜백 함수

콜백 함수란?

콜백 함수(Callback Function)는 다른 함수에 인수로 전달되어 나중에 호출되는 함수입니다. 비동기 작업을 처리하거나, 특정 이벤트가 발생할 때 실행되는 코드를 정의하는 데 유용합니다.

콜백 함수의 기본 개념

콜백 함수는 특정 작업이 완료되었을 때 호출되는 함수입니다. JavaScript에서는 주로 비동기 작업에서 콜백 함수를 사용합니다.

예제: 콜백 함수 사용

function fetchData(callback) {
  setTimeout(() => {
    let data = 'Fetched Data';
    callback(data);
  }, 1000);
}

function displayData(data) {
  console.log(data);
}

fetchData(displayData); // 'Fetched Data' (1초 후 출력)

비동기 작업과 콜백 함수

JavaScript는 싱글 스레드로 동작하지만, 비동기 작업을 통해 블로킹을 방지하고, 효율적으로 작업을 처리할 수 있습니다. 콜백 함수는 이러한 비동기 작업을 처리하는 데 사용됩니다.

예제: 비동기 작업 처리

function getUserData(userId, callback) {
  setTimeout(() => {
    let userData = { id: userId, name: 'John Doe' };
    callback(userData);
  }, 2000);
}

function displayUserData(user) {
  console.log(`User ID: ${user.id}, User Name: ${user.name}`);
}

getUserData(1, displayUserData); // 'User ID: 1, User Name: John Doe' (2초 후 출력)

콜백 지옥

콜백 지옥(Callback Hell)은 중첩된 콜백 함수로 인해 코드의 가독성이 떨어지고, 유지보수가 어려워지는 문제를 말합니다. 이를 해결하기 위해 Promises나 async/await를 사용할 수 있습니다.

예제: 콜백 지옥

function step1(callback) {
  setTimeout(() => {
    console.log('Step 1 completed');
    callback();
  }, 1000);
}

function step2(callback) {
  setTimeout(() => {
    console.log('Step 2 completed');
    callback();
  }, 1000);
}

function step3(callback) {
  setTimeout(() => {
    console.log('Step 3 completed');
    callback();
  }, 1000);
}

step1(() => {
  step2(() => {
    step3(() => {
      console.log('All steps completed');
    });
  });
});

콜백 함수의 장점과 단점

장점

1. 비동기 작업 처리: 콜백 함수는 비동기 작업을 처리하는 데 유용합니다.
2. 유연성: 다양한 상황에서 재사용 가능하고, 유연하게 사용할 수 있습니다.

단점

1. 가독성 저하: 중첩된 콜백 함수로 인해 코드의 가독성이 떨어질 수 있습니다.
2. 에러 처리 어려움: 비동기 작업에서 발생하는 에러를 처리하기 어렵습니다.

콜백 함수의 대안

Promises

Promises는 비동기 작업을 처리하기 위한 객체로, 콜백 지옥 문제를 해결하는 데 도움이 됩니다.

예제: Promises 사용

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let data = 'Fetched Data';
      resolve(data);
    }, 1000);
  });
}

fetchData()
  .then(data => {
    console.log(data); // 'Fetched Data'
  })
  .catch(error => {
    console.error(error);
  });

async/await

async/await는 Promises를 보다 간단하고 직관적으로 사용할 수 있게 해주는 구문입니다.

예제: async/await 사용

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let data = 'Fetched Data';
      resolve(data);
    }, 1000);
  });
}

async function displayData() {
  try {
    let data = await fetchData();
    console.log(data); // 'Fetched Data'
  } catch (error) {
    console.error(error);
  }
}

displayData();

콜백 함수의 활용 예제

이벤트 처리

document.getElementById('myButton').addEventListener('click', function() {
  console.log('Button clicked');
});

타이머 함수

setTimeout(function() {
  console.log('Executed after 1 second');
}, 1000);

setInterval(function() {
  console.log('Executed every 1 second');
}, 1000);

결론

콜백 함수는 비동기 작업을 처리하고, 특정 이벤트가 발생했을 때 실행되는 코드를 정의하는 데 유용합니다. 이번 글에서는 콜백 함수의 기본 개념, 비동기 작업과의 연계, 콜백 지옥 문제, 콜백 함수의 장단점, 그리고 대안인 Promises와 async/await에 대해 배웠습니다. 다음 글에서는 프로미스 기초에 대해 알아보겠습니다.

다음 글에서 만나요!