콜백, 콜백 지옥, 약속, 비동기/대기

“코딩은 때로 예상치 못한 우여곡절이 가득한 서스펜스 영화처럼 느껴질 수 있습니다. 하지만 잘 연출된 장면처럼 코드 흐름을 원활하게 만들 수 있다면 어떨까요? 콜백, 프라미스, 비동기/대기의 세계에 오신 것을 환영합니다!”

1. 콜백

콜백은 다른 함수에 인수로 전달한 다음 해당 함수가 완료된 후 실행되는 함수입니다. 다음과 같이 생각해보세요. 온라인으로 영화 티켓을 주문하고 티켓이 준비되면 이메일(콜백 기능)을 보내라고 지시합니다.

예:
온라인으로 영화 '스파이더맨 4' 티켓을 주문한다고 가정해 보세요.

function orderTicket(movie, callback) {
    console.log(`Ordering ticket for ${movie}...`);
    // Simulate a delay with setTimeout
    setTimeout(() => {
        console.log('Ticket ordered successfully!');
        callback();  // Notify when the ticket is ready
    }, 2000);
}

function notifyUser() {
    console.log('Your ticket is ready! Enjoy the movie!');
}

orderTicket('Spider-Man 4', notifyUser);

출력:

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Your ticket is ready! Enjoy the movie!

여기서 informUser는 티켓 주문 후 호출되는 콜백 함수입니다.

2. 콜백 지옥

콜백 지옥은 여러 콜백이 서로 중첩되어 코드를 읽고 유지하기 어렵게 만들 때 발생합니다. 피라미드나 계단처럼 보여서 무슨 일이 일어나는지 따라가기가 어렵습니다.

예:
이제 티켓 주문, 팝콘 구매, 좌석 찾기 등 여러 작업을 순서대로 수행하고 싶다고 상상해 보세요.

function orderTicket(movie, callback) {
    console.log(`Ordering ticket for ${movie}...`);
    setTimeout(() => {
        console.log('Ticket ordered successfully!');
        callback();
    }, 2000);
}

function getPopcorn(callback) {
    console.log('Getting popcorn...');
    setTimeout(() => {
        console.log('Popcorn ready!');
        callback();
    }, 1000);
}

function findSeat(callback) {
    console.log('Finding your seat...');
    setTimeout(() => {
        console.log('Seat found!');
        callback();
    }, 1500);
}

orderTicket('Spider-Man 4', function() {
    getPopcorn(function() {
        findSeat(function() {
            console.log('All set! Enjoy the movie!');
        });
    });
});

출력:

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Getting popcorn...
Popcorn ready!
Finding your seat...
Seat found!
All set! Enjoy the movie!

이것은 콜백 지옥입니다. 코드가 어떻게 더 중첩되고 읽기 어려워지는지 확인할 수 있습니다.

3. 약속

promise는 비동기 작업의 최종 완료(또는 실패)를 나타내는 개체입니다. 콜백 지옥에 빠지지 않고 더 깔끔한 코드를 작성하고 비동기 작업을 더 쉽게 처리할 수 있습니다.

예:
Promise
를 사용하여 위의 예를 단순화해 보겠습니다.

function orderTicket(movie) {
    return new Promise((resolve) => {
        console.log(`Ordering ticket for ${movie}...`);
        setTimeout(() => {
            console.log('Ticket ordered successfully!');
            resolve();
        }, 2000);
    });
}

function getPopcorn() {
    return new Promise((resolve) => {
        console.log('Getting popcorn...');
        setTimeout(() => {
            console.log('Popcorn ready!');
            resolve();
        }, 1000);
    });
}

function findSeat() {
    return new Promise((resolve) => {
        console.log('Finding your seat...');
        setTimeout(() => {
            console.log('Seat found!');
            resolve();
        }, 1500);
    });
}

orderTicket('Spider-Man 4')
    .then(getPopcorn)
    .then(findSeat)
    .then(() => {
        console.log('All set! Enjoy the movie!');
    });

출력:

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Getting popcorn...
Popcorn ready!
Finding your seat...
Seat found!
All set! Enjoy the movie!

Promise를 사용하면 .then() 메서드를 연결하여 중첩 문제를 방지하여 코드를 더 쉽게 읽을 수 있습니다.

4. 비동기/대기

Async/await는 동기 코드처럼 보이고 동작하는 비동기 코드를 작성할 수 있는 최신 구문입니다. Promise를 기반으로 구축되었으며 코드를 더욱 깔끔하고 이해하기 쉽게 만듭니다.

예:
동일한 시나리오를 처리하기 위해 async/await를 사용해 보겠습니다

function orderTicket(movie) {
    return new Promise((resolve) => {
        console.log(`Ordering ticket for ${movie}...`);
        setTimeout(() => {
            console.log('Ticket ordered successfully!');
            resolve();
        }, 2000);
    });
}

function getPopcorn() {
    return new Promise((resolve) => {
        console.log('Getting popcorn...');
        setTimeout(() => {
            console.log('Popcorn ready!');
            resolve();
        }, 1000);
    });
}

function findSeat() {
    return new Promise((resolve) => {
        console.log('Finding your seat...');
        setTimeout(() => {
            console.log('Seat found!');
            resolve();
        }, 1500);
    });
}

async function watchMovie() {
    await orderTicket('Spider-Man 4');
    await getPopcorn();
    await findSeat();
    console.log('All set! Enjoy the movie!');
}

watchMovie();

출력:

Ordering ticket for Spider-Man 4...
Ticket ordered successfully!
Getting popcorn...
Popcorn ready!
Finding your seat...
Seat found!
All set! Enjoy the movie!

async/await를 사용하면 코드가 더 간단해 실제 프로세스를 설명하는 방식과 유사합니다. Wait 키워드는 Promise가 해결될 때까지 실행을 일시 중지하여 작업 흐름을 쉽게 따라갈 수 있도록 합니다.

요약 :

• 콜백: 다른 함수가 작업을 마친 후에 실행되는 함수입니다.
• 콜백 지옥: 읽기 어려운 코드로 이어지는 중첩된 콜백.
• 약속: 콜백 지옥을 피하고 비동기 작업을 처리하는 더 깔끔한 방법.
• 비동기/대기: 비동기 코드 처리를 위한 약속을 기반으로 구축된 읽기 쉬운 현대적인 구문입니다.

"콜백, Promise 및 async/await를 마스터하면 복잡한 코드를 원활한 환경으로 바꿀 수 있습니다. 콜백 지옥에 작별을 고하고 더 깨끗하고 효율적인 JavaScript를 만나보세요. 즐거운 코딩 되세요!"

위 내용은 콜백, 콜백 지옥, 약속, 비동기/대기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!