콜백 함수란 무엇인가

🤓오늘의 공부 주제: 콜백 함수🤓

Q. 콜백 함수란 무엇인가?

A. 자바스크립트의 콜백 함수(callback function)는 다른 함수에 인수로 전달되는 함수. 콜백 함수는 보통 이벤트 핸들러, 비동기 작업의 완료 처리, 타이머 설정 등과 같은 상황에서 사용. 콜백 함수를 사용하면 비동기적으로 실행되는 코드를 효과적으로 처리할 수 있다.

콜백 함수의 주요 특징

• 함수로서의 전달: 콜백 함수는 다른 함수의 인수로 전달될 수 있다.
• 비동기적 처리: 콜백 함수는 주로 비동기적으로 실행되는 작업을 처리하는 데 사용. 예를 들어, 파일을 읽거나 저장할 때, 서버와 통신할 때, 타이머를 설정할 때 등 비동기적인 작업이 완료될 때까지 대기할 수 있다.
• 이벤트 처리: 웹 애플리케이션에서는 이벤트 핸들러로서의 역할을 하는 콜백 함수가 매우 흔함. 사용자의 클릭, 키보드 입력, 마우스 움직임 등의 이벤트가 발생할 때마다 콜백 함수가 호출된다.

// 콜백 함수 예시 1: setTimeout 함수를 사용한 비동기 작업
console.log("첫 번째");
setTimeout(function() {
    console.log("두 번째");
}, 1000);
console.log("세 번째");

// 콜백 함수 예시 2: 배열의 forEach 메서드를 사용하여 각 요소에 대해 콜백 함수 호출
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
    console.log(number);
});

// 콜백 함수 예시 3: 이벤트 핸들러로서의 콜백 함수
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
    console.log("버튼이 클릭되었습니다.");
});

Q. 콜백 함수가 왜 필요한가?

A. 비동기프로그래밍을 위해 사용된다. 자바스크립트는 코드를 위에서 아래로 순차적으로 실행한다. 그러나 순차적 실행이 아닌 콜백을 사용하면 비동기 자바스크립트 코드를 작성할 수 있다. 자바스크립트에서 콜백 함수를 만드는 방법은 어떤 함수의 파라미터로써 함수를 넘기고 어떤 행위나 태스크가 완료된 직후에 콜백 함수를 호출하는 것이다.

콜백 함수를 지양하는 이유

• 가독성과 유지보수성의 저하: 콜백 함수를 중첩하게 되면 코드의 가독성이 떨어지고, 이해하기 어려워진다. 또한 콜백 함수 간의 의존성이 높아지기 때문에 코드를 수정하거나 유지보수하기 어려워진다.

• 에러 처리의 어려움: 콜백 함수를 중첩하게 되면 에러 처리가 번거로워진다. 각 콜백 함수마다 에러 처리를 해주어야 하며, 에러가 발생했을 때 콜백 체인 전체를 중단시키고 처리하기 어렵다.

• 콜백 지옥: 콜백 함수를 중첩하여 사용하다 보면 콜백 지옥(callback hell)이 발생할 수 있다. 콜백 지옥은 콜백 함수가 중첩되어 가독성이 매우 나쁘고 코드의 복잡성이 높아지는 상황을 말한다.

콜백 함수를 대체하는 방법

1. 프로미스
2. async/await

이미지 출처 : https://blog.denilgabani.com/callback-function-event-loop-in-javascript-reactjs-web-development