자바스크립트 콜백함수 & 동기/비동기 처리

콜백 함수 (callback function)

• 콜백함수는 함수의 매개변수로 전달되는 함수
  다른 함수에 의해 호출되거나 실행
• 비동기 작업에서 사용되며, 비동기 작업이 완료되면 호출되어 결과를 처리하거나 어떤 동작을 수행

 

콜백 함수의 역할

• 비동기 작업의 완료 처리: 비동기 작업(Ex. 파일 로딩, 네트워크 요청)이 완료된 후에 실행
  결과를 처리하거나 화면 업데이트 등의 동작을 수행할 수 있음
• 이벤트 처리: 웹 애플리케이션에서 사용자의 이벤트(클릭, 입력 등)에 응답하기 위해 콜백함수를 등록
• 제어권 양도: 콜백 함수를 사용하면 제어권(control flow)을 다른 함수에 양도할 수 있음
  비동기 작업을 수행한 후 다른 코드를 실행할 수 있음

 

콜백 함수의 사용

• 콜백 함수는 함수의 인수로 전달

// 1. 비동기 작업의 완료 처리
function fetchData(callback) {
  // 비동기 작업 수행
  setTimeout(function() {
    const data = "비동기 작업 결과";
    callback(data); // 콜백 함수 호출
  }, 1000);
}

function processResult(result) {
  console.log("결과 처리:", result);
}

fetchData(processResult); // fetchData 함수에 processResult 함수를 콜백으로 전달

// 2. 이벤트 처리
document.getElementById("myButton").addEventListener("click", function() {
  alert("버튼이 클릭되었습니다.");
});

// 3. 제어권 양도
function performTask(callback) {
  console.log("작업 시작");
  callback();
  console.log("작업 종료");
}

performTask(function() {
  console.log("콜백 함수 실행");
});

 

콜백 지옥 (Callback Hell)

• 콜백 함수를 중첩하여 사용하면 코드의 가독성과 유지보수가 어려워짐
  이러한 문제를 해결하기 위해 Promise나 async/await와 같은 비동기 패턴을 사용할 수 있음

getData(function(data) {
  processData(data, function(result) {
    saveResult(result, function(response) {
      // 중첩된 콜백 함수
    });
  });
});

 

에러 처리

• 콜백 함수 내부에서 예외가 발생할 수 있으므로 에러 핸들링이 필요

fetchData(function(data) {
  try {
    // 데이터 처리
  } catch (error) {
    console.error("에러 발생:", error);
  }
});

 

콜백 함수와 this

• 콜백 함수 내부에서 this 키워드의 동작은 주의해야됨
  this는 호출 컨텍스트에 따라 달라질 수 있음
• 화살표 함수를 사용하면 this는 외부 스코프에서 상속되므로 다른 값으로 바인딩할 수 있음

const obj = {
  name: "객체",
  regularFunction: function() {
    console.log("일반 함수, this.name:", this.name);
  },
  arrowFunction: () => {
    console.log("화살표 함수, this.name:", this.name);
  }
};
obj.regularFunction(); // this는 obj 객체를 가리킴
obj.arrowFunction(); // this는 외부 스코프를 가리킴

 

Promise

비동기 작업을 처리하기 위한 객체로, 작업이 성공 또는 실패하는 시점을 처리하기 위한 메커니즘을 제공

• Promise 세 가지 형태
  1. 대기(Pending): 비동기 작업이 아직 완료되지 않은 상태
  2. 이행(Fulfilled): 비동기 작업이 성공적으로 완료된 상태
  3. 거부(Rejected): 비동기 작업이 실패한 상태

// Promise 체이닝을 통해 여러 개의 비동기 작업을 순차적으로 처리
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "비동기 작업 결과";
      resolve(data); // 성공적으로 작업 완료
    }, 1000);
  });
}

fetchData()
  .then(data => {
    console.log("데이터 처리:", data);
  })
  .catch(error => {
    console.error("에러 발생:", error);
  });

 

async/await

async 함수는 Promise를 반환하며, await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다릴 수 있음

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "비동기 작업 결과";
      resolve(data); // 성공적으로 작업 완료
    }, 1000);
  });
}

async function main() {
  try {
    const data = await fetchData();
    console.log("데이터 처리:", data);
  } catch (error) {
    console.error("에러 발생:", error);
  }
}

main();

 

Promise vs async/await

• Promise는 좀 더 직접적으로 비동기 작업을 다룰 수 있으며, 콜백 지옥을 피하기 위한 좋은 대안
• async/await는 코드를 더 읽기 쉽고 구조화된 형태로 작성할 수 있으며, 비동기 코드를 동기식처럼 보이게 만듦
  가독성과 유지보수성을 높일 수 있음 (추천)