[javascript] 익명 함수와 콜백 함수 사용 시 주의사항

15 Dec 2023

javascript

자바스크립트에서 익명 함수 및 콜백 함수를 사용하는 것은 매우 일반적입니다. 하지만 이러한 함수들을 사용할 때 몇 가지 주의해야 할 사항이 있습니다. 이 블로그 포스트에서는 익명 함수와 콜백 함수 사용 시 주의사항에 대해 알아보겠습니다.

1. 콜백 지옥

콜백 함수를 중첩하여 사용하면 콜백 지옥이라고 불리는 현상이 발생할 수 있습니다. 이는 코드가 복잡해지고 가독성이 떨어지는 문제를 일으킵니다. 따라서 가능하면 promise나 async/await와 같은 기술을 활용하여 콜백 지옥을 피해야 합니다.

getData((data) => {
    getMoreData(data, (moreData) => {
        getEvenMoreData(moreData, (evenMoreData) => {
            // ...
        });
    });
});

2. 스코프 및 클로저 이슈

익명 함수를 사용할 경우 스코프 및 클로저 문제가 발생할 수 있습니다. 특히 반복문 내에서 익명 함수를 사용할 때는 변수의 값이 예상과 다를 수 있으므로 주의해야 합니다. 변수의 값이 클로저에 의해 변경될 수 있는 점을 유의해야 합니다.

for (var i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i);
    }, 1000);
}

3. 디버깅 어려움

익명 함수 및 콜백 함수를 과도하게 사용하면 디버깅이 어려워질 수 있습니다. 함수명이 없거나 중첩된 함수 구조로 인해 디버깅 도구에서 함수를 식별하기 어려울 수 있으므로 유의해야 합니다.

요약

익명 함수와 콜백 함수는 자바스크립트에서 매우 유용하게 활용될 수 있지만, 위에 언급된 주의사항들을 유의하며 사용해야 합니다. 콜백 지옥을 피하고 스코프 및 클로저 문제를 인지하며 코딩한다면 더 깨끗하고 유지보수가 쉬운 코드를 작성할 수 있을 것입니다.

이상으로 익명 함수와 콜백 함수 사용 시 주의사항에 대한 블로그 포스트를 마치겠습니다.

참고 자료:

MDN web docs: Closures
[Promise - JavaScript MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise)
새로운 자바스크립트 async와 await