자바스크립트에서 콜백지옥으로 인한 들여쓰기 문제 해결하는 방법

자바스크립트는 대부분의 함수가 비동기적으로 처리되기 때문에 콜백함수를 많이 사용합니다. 콜백함수를 사용할 때는 보통 익명함수를 사용하며, 파라미터 부분에 ()=>{} 형식으로 함수 구현부분을 작성합니다. 이로 인해, 콜백함수 내에서 콜백함수를 호출하는 부분이 많아질수록 더 많은 들여쓰기를 갖게 되고, 결과적으로 가독성을 크게 떨어뜨리게 됩니다. 그래서, 저는 이 부분을 해결하기 위해 익명함수 대신 별도의 함수를 정의하고 콜백함수에서 정의한 함수를 호출하도록 함으로써 들여쓰기 문제를 해결하고자 하였습니다.

function removeAllFilesFromMapId(map_id){
    let directory:string = path.join(UPLOAD_PATH, "./" + map_id);
 
    fs.readdir(directory, finishReadDir);
 
    function finishReadDir(err, filenames){
        if(err){
            return console.error(err.message);
        }
        filenames.forEach((item)=>{
            let filePath = path.join(directory, item);
            fs.unlink(filePath, finishUnlink);
        });
    }
 
    function finishUnlink(err){
        if(err){
            return console.error(err.message);
        }
        console.log("제거 완료");
    }
}

위의 코드에서, fs.readdir이라는 비동기 함수를 호출하면서 콜백함수로 미리 정의한 finishReadDir이라는 함수를 가리키도록 하였으며, finishReadDir 함수에서 호출되는 비동기 함수를 다시 finishUnlink로 지정하였습니다. 이 덕분에, 들여쓰기가 늘어나지 않고, 각각의 작업을 함수로 구현하여 분리함으로써 가독성도 높아지게 되었습니다.

혹시 이 방법의 문제점, 또는 더 좋은 방법이 있으신 분은 댓글 작성부탁합니다.