자바스크립트 기본 문법 - 함수 - 7 - 콜백 함수

Table of Contents

자바스크립트 기본 문법 – 함수 – 7 – 콜백 함수

소제목: 콜백 함수란?

자바스크립트에서 콜백 함수는 다른 함수의 인자로 전달되는 함수를 말합니다. 이 콜백 함수는 특정 이벤트 발생 시 호출되거나 비동기적인 작업이 완료되었을 때 실행됩니다. 즉, 콜백 함수는 다른 함수의 동작이 완료된 후에 실행되는 함수입니다. 이렇게 동작하는 콜백 함수는 비유적으로 “서브프로그램을 대신 호출해주는 도우미”라고 할 수 있습니다.

예를 들어, 웹 페이지에서 버튼을 클릭할 때마다 특정 작업을 수행하고 싶다고 가정해봅시다. 이때, 버튼에 대한 클릭 이벤트를 처리하는 함수를 정의하고, 이 함수의 인자로 콜백 함수를 전달할 수 있습니다. 이렇게 전달된 콜백 함수는 버튼이 클릭되었을 때 호출되어 원하는 작업을 수행하게 됩니다.

function handleClick(callback) {
  // 버튼 클릭 이벤트 처리
  // ...

  // 콜백 함수 호출
  callback();
}

function doSomething() {
  console.log("버튼이 클릭되었습니다!");
}

handleClick(doSomething); // 버튼 클릭 시 doSomething 함수 호출

위의 예시에서 handleClick 함수는 버튼 클릭 이벤트를 처리하고, 전달받은 콜백 함수를 호출하는 역할을 합니다. doSomething 함수는 콜백 함수로서 버튼이 클릭되었을 때 실행되는 로직을 담고 있습니다. 따라서, 버튼을 클릭하면 “버튼이 클릭되었습니다!”라는 메시지가 콘솔에 출력됩니다.

소제목: 콜백 함수의 활용

콜백 함수는 비동기적인 작업을 처리하거나 특정 이벤트에 대한 동작을 정의하는 등 다양한 상황에서 활용됩니다. 여기에는 몇 가지 대표적인 예시가 있습니다.

비동기적인 작업 처리: 자바스크립트에서는 AJAX 요청이나 파일 다운로드 등의 비동기적인 작업을 수행해야 할 때 콜백 함수를 사용합니다. 이때 콜백 함수는 작업이 완료되었을 때 실행되어 결과를 처리하거나 다음 동작을 수행합니다.

function fetchData(url, callback) {
  // 비동기적인 데이터 요청
  // ...

  // 데이터 요청이 완료되면 콜백 함수 호출
  callback(data);
}

function processData(data) {
  // 데이터 처리 로직
  // ...
}

fetchData("https://api.example.com/data", processData);

이벤트 핸들링: 웹 페이지에서 발생하는 다양한 이벤트에 대한 동작을 정의하기 위해 콜백 함수를 사용합니다. 이벤트 핸들러 함수로 콜백 함수를 등록하여 해당 이벤트가 발생했을 때 원하는 동작을 실행할 수 있습니다.

function handleClick(callback) {
  // 버튼 클릭 이벤트 처리
  // ...

  // 콜백 함수 호출
  callback();
}

function showMessage() {
  alert("버튼이 클릭되었습니다!");
}

handleClick(showMessage); // 버튼 클릭 시 showMessage 함수 호출

타이머 설정: setTimeout과 setInterval 함수를 사용하여 일정 시간 후에 콜백 함수를 실행할 수 있습니다. 이를 활용하여 일정 간격으로 반복적인 작업을 수행하거나, 지연된 작업을 처리할 수 있습니다.

setTimeout(function() {
  console.log("일정 시간 후에 실행되는 콜백 함수");
}, 2000); // 2초 후에 콜백 함수 실행

소제목: 콜백 지옥과 해결법

콜백 함수는 자바스크립트에서 강력한 기능이지만, 콜백 함수를 중첩하여 사용하다 보면 코드의 가독성이 떨어지고 디버깅이 어려워지는 콜백 지옥에 빠질 수 있습니다. 콜백 지옥은 콜백 함수가 연속적으로 중첩되어 코드가 복잡해지는 상황을 의미합니다.

fetchData(url1, function(response1) {
  processData(response1, function(result1) {
    fetchData(url2, function(response2) {
      processData(response2, function(result2) {
        fetchData(url3, function(response3) {
          processData(response3, function(result3) {
            // ...
          });
        });
      });
    });
  });
});

위와 같이 콜백 함수가 연속해서 중첩되면 코드의 가독성이 떨어지고, 새로운 작업을 추가하거나 에러 처리를 하기가 어려워집니다. 이러한 콜백 지옥을 해결하기 위해 여러 가지 방법이 제시되고 있습니다.

콜백 헬의 피해갈 수 있는 방법 중 하나는 콜백 함수 대신 Promise를 사용하는 것입니다. Promise는 비동기 작업의 상태와 결과를 다루는 객체로, 콜백 지옥에 비해 가독성이 높고 에러 처리도 편리합니다.
또 다른 방법은 async/await 문법을 사용하는 것입니다. async 함수는 비동기 작업을 처리하는 함수로, 내부에서 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있습니다. 이를 통해 비동기 코드를 동기적으로 작성하는 것처럼 보다 직관적이고 가독성 좋은 코드를 작성할 수 있습니다.

주의해야할 점

콜백 함수를 사용할 때, 콜백 함수의 인자와 반환 값을 정확하게 확인해야 합니다. 콜백 함수를 호출하는 함수에서 기대하는 형식과 일치하도록 맞춰야 합니다.
콜백 함수 내부에서 에러가 발생할 경우, 콜백 함수 내에서 예외를 처리하고 적절한 오류 핸들링을 해야 합니다. 이를 위해 try...catch 문을 사용하여 예외를 잡고, 오류 처리를 할 수 있습니다.
콜백 함수를 중첩하여 사용할 때는 코드의 가독성을 유지하기 위해 적절한 명명 규칙과 들여쓰기를 사용해야 합니다. 이렇게 함으로써 코드의 복잡성을 낮출 수 있습니다.
콜백 함수의 호출 시점과 순서를 명확하게 이해하고 사용해야 합니다. 비동기적인 작업이 완료되기 전에 콜백 함수를 호출하면 원하는 동작을 제대로 수행하지 못할 수 있습니다.

자바스크립트의 기본 문법 중 함수에 대해 알아보았습니다. 콜백 함수를 활용하여 다양한 상황에서 동작을 정의하고, 비동기적인 작업을 처리할 수 있습니다. 콜백 함수를 올바르게 사용하면 코드를 더 유연하고 효율적으로 작성할 수 있습니다. 하지만 콜백 지옥에 빠지지 않도록 주의하고, 콜백 함수의 인자와 반환 값을 정확히 다루는 것을 잊지 마세요. 이를 통해 자바스크립트의 함수 개념을 완벽히 이해하고, 더 나은 코드를 작성할 수 있을 것입니다. 화이팅입니다!

자바스크립트 기본 문법 – 함수 – 7 – 콜백 함수

소제목: 콜백 함수란?

소제목: 콜백 함수의 활용

소제목: 콜백 지옥과 해결법

주의해야할 점

답글 남기기 응답 취소