TIL

Callback 함수

백단비 2023. 8. 6. 14:38

😳 콜백 함수(callback function)

👆 콜백함수란 ?
다른 함수의 인자로 넘겨지고, 해당 함수의 실행이 끝나면 호출되는 함수를 말한다.

 

 

👂 콜백함수는 언제 사용할까?

 

👉 비동기 작업이 완료된 후에 그 결과를 처리하는 데 사용된다.

👉 setTimeout, setInterval 등의 타이머 함수에 사용되어 특정 시간이 지난 후 실행할 작업을 정의할 수 있다.

👉 이벤트 핸들러에서 사용되어 특정 이벤트가 발생한 후에 실행할 작업을 정의할 수 있다.

↘ ↗한마디로 말하자면 특정 작업의 실행 순서를 지정하거나 조절하기 위해 사용된다는 말입니다.

 

 

👀 아래 예시를 통해서 콜백함수를 더 알아보자.

 

firstFunc의 콜백함수로 secondFunc을 정의했을때,

firstFunc은 비동기 작업(setTimeout)을 수행한 후 데이터를 가져오면,

인자로 전달된 secondFunc 함수를 콜백으로 호출해서 데이터를 처리한다.

그러면 1초 후에(setTimeout을 사용했기때문에) '이름: 백단비'라는 결과가 나오게 된다.

 

 

🖐 콜백함수의 장점

 

👉 콜백 함수는 함수 자체를 인자로 전달하기 때문에 함수의 구현이 독립적이고 재사용 가능하다.

↘ 재사용이 가능하기 때문에 코드의 유연성과 모듈성을 높여주고 비동기 작업을 효과적으로 다룰 수 있도록 도와준다.

 

 

💦 콜백함수의 단점

 

👉 콜백 지옥(Callback Hell)

 여러 개의 중첩된 콜백 함수로 인해 코드가 복잡해지고 가독성이 떨어지는 현상

 비동기 작업을 처리하기 위해 콜백 함수를 계속 중첩하면 코드가 길어지고 관리가 어려워진다.

👉 에러 처리 어려움

 콜백 함수 내부에서 발생한 에러를 쉽게 처리하기 어렵기 때에 추가적인 코드를 작성해야 한다.

👉  비동기 작업 순서 제어

 여러 개의 비동기 작업이 순서대로 실행되어야 하는 경우, 콜백 함수를 중첩하거나 복잡한 로직을 작성해야한다.

👉 코드 가독성 감소

 콜백 함수는 다른 함수의 인자로 전달되어 실행되기 때문에 코드 흐름을 이해하기 어려워서 코드 가독성이 떨어진다.


🤮 callback hell

↘   콜백 함수의 문제들을 극복하기 위해 Promise, async/await와 같은 비동기 처리 메커니즘이 도입되었는데.

 이러한 메커니즘들이 비동기 코드를 보다 명확하고 간결하게 작성하면서 콜백 지옥을 피할 수 있도록 도와준다.

 

참조

https://www.youtube.com/watch?v=-iZlNnTGotk

https://youtu.be/TAyLeIj1 hMc

 

 

 

320x100

'TIL' 카테고리의 다른 글

웹 표준, 웹 접근성, 웹 호환성  (1) 2023.08.19
Promise  (1) 2023.08.07
동기(Synchronous)와 비동기(Asynchronous)  (1) 2023.08.03
AJAX란 무엇인가?  (1) 2023.07.31
SSR(Server Side Rendering)과 CSR(Client Side Rendering)  (0) 2023.07.07