[자바스크립트] 동기, 비동기 함수

자바스크립트에서 동기(Synchronous) 함수와 비동기(Asynchronous) 함수는 코드의 실행 방식에 큰 차이를 가지고 있습니다. 이 두 개념을 이해하는 것은 자바스크립트 프로그래밍에서 매우 중요합니다.

동기(Synchronous) 함수

동기 함수는 코드가 작성된 순서대로 실행되는 방식입니다. 즉, 하나의 작업이 완료된 후에 다음 작업이 실행됩니다. 동기 방식의 가장 큰 특징은 코드의 실행이 예측 가능하다는 것이며, 이는 디버깅을 쉽게 만들어 줍니다. 그러나 긴 작업을 처리할 때는 해당 작업이 완료될 때까지 다음 코드의 실행이 차단(block)되어 애플리케이션의 반응성이 떨어질 수 있습니다.

동기 함수 예제:

function multiply(x, y) {
    return x * y;
}

console.log('시작');
console.log(multiply(5, 10));  // 50
console.log('끝');

Code language: JavaScript (javascript)

비동기(Asynchronous) 함수

비동기 함수는 특정 코드의 실행이 완료되지 않아도 다음 코드로 넘어갈 수 있게 합니다. 이를 통해 I/O 작업이나 네트워크 요청 같은 시간이 많이 걸리는 작업을 처리할 때 유용하며, 애플리케이션의 반응성을 유지할 수 있습니다. 자바스크립트에서 비동기 작업을 처리하는 방법에는 콜백 함수, 프로미스(Promises), async/await 등이 있습니다.

비동기 함수 예제 1: 콜백 사용

function fetchData(callback) {
    setTimeout(() => {
        callback('데이터');
    }, 1000);
}

console.log('데이터 요청');
fetchData((data) => {
    console.log('데이터 수신: ' + data);
});
console.log('다른 작업 실행');

Code language: JavaScript (javascript)

비동기 함수 예제 2: Promise 사용

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('데이터');
        }, 1000);
    });
}

console.log('데이터 요청');
fetchData().then((data) => {
    console.log('데이터 수신: ' + data);
});
console.log('다른 작업 실행');

Code language: JavaScript (javascript)

위 예제에서 볼 수 있듯이, 비동기 함수는 setTimeout, fetch, Promise 등을 사용하여 비동기적 작업을 처리할 수 있습니다. 이는 코드 실행 중에 발생할 수 있는 대기 시간을 효과적으로 관리하여 사용자 경험을 향상시킬 수 있습니다.