자바스크립트 콜백 함수부터 Promise, async/await까지

비동기 코드를 보다 효율적으로 관리하기 위한 도구로는 콜백 함수, Promise, async/await 등이 있다.

콜백 함수 이해

콜백 함수는 함수 내부에 인수로 전달되는 또 다른 함수다. 주로 비동기 작업이나 이벤트 처리에 사용된다.

 

코드 예시1:

function greeting(name, callback) {
    console.log(`안녕하세요, ${name}님!`);
    callback();
}

greeting('Alice', function() {
    console.log('콜백 함수가 실행되었습니다.');
});

이 코드에서 greeting 함수는 이름과 콜백 함수를 인수로 받는다. 이름을 출력한 후 콜백 함수를 호출한다.

 

코드 예시2:

fs.readFile('example.txt', 'utf8', (err, data) => {
    if (err) {
        console.error('파일 읽기 중 에러 발생', err);
        return;
    }
    console.log(data);
});

주의사항

콜백 함수는 실행 시점을 개발자가 직접 컨트롤하지 않으므로, 상황에 따른 에러 핸들링이 중요하다.

노하우

콜백 함수의 이름을 명확하게 지어 가독성을 높이고, 필요한 파라미터만 전달하여 함수의 순수성을 유지하는 것이 좋다.

콜백 지옥과 그 해결방안

콜백 지옥은 콜백 함수가 중첩되어 코드의 가독성이 떨어지는 현상을 말한다. 이를 해결하기 위해 Promise나 async/await를 사용한다.

 

콜백 지옥 코드 예시:

doSomething(param, function(err, result) {
    doSomethingElse(result, function(err, newResult) {
        doThirdThing(newResult, function(err, finalResult) {
            console.log('Got the final result:', finalResult);
        }, failureCallback);
    }, failureCallback);
}, failureCallback);

주의사항

중첩된 콜백은 코드의 복잡성을 증가시키므로, 가능한 한 피하고, 필요하다면 비동기 코드를 개선하는 방법을 찾아야 한다.

노하우

모듈화를 통해 코드를 재사용하거나 Promise와 async/await를 활용하여 코드를 개선할 수 있다.

Promise의 생성과 사용

Promise는 비동기 작업을 더 쉽게 다룰 수 있는 객체다.

 

코드 예시1:

let promise = new Promise((resolve, reject) => {
    let success = true;
    if(success) {
        resolve("작업이 성공적으로 완료되었습니다.");
    } else {
        reject("작업이 실패하였습니다.");
    }
});

promise.then((message) => {
    console.log(message);
}).catch((message) => {
    console.error(message);
});

코드 예시2:

new Promise((resolve, reject) => {
    // ...
})
.then(result => {
    console.log(result);
    return anotherAsyncFunction();
})
.then(anotherResult => {
    console.log(anotherResult);
})
.catch(error => {
    console.error(error);
});

주의사항

catch 함수를 사용해 Promise 체인에서 발생할 수 있는 예외를 항상 처리해야 한다.

노하우

then 함수를 체인으로 연결하여 여러 개의 비동기 작업을 순서대로 실행할 수 있다.

async/await 문법

async/await는 비동기 코드를 동기 코드처럼 작성할 수 있게 해준다.

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('데이터를 가져오는 데 실패했습니다.', error);
    }
}

fetchData();

주의사항

await 키워드는 async 함수 내에서만 사용할 수 있다. 또한, error handling을 위해 try/catch 구문을 활용하는 것이 좋다.

노하우

async/await를 사용하여 비동기 코드를 동기식으로 작성하여 코드의 가독성을 높일 수 있다.