Javascript의 콜백에 대한 하나의 (심각한) 문제

콜백은 다른 함수에 인수로 전달되는 함수입니다. 이러한 콜백은 전달된 함수에 의해 호출됩니다. 우리는 일반적으로 setTimeout() 및 setTimeout() 와 같은 함수를 사용하는 동안 콜백을 전달합니다.

콜백을 사용하는 것이 분명한 것처럼 보이지만 콜백에는 고유한 결함이 있습니다. 이 게시물은 Frontend Masters의 KyleSimpson 과정에서 최근에 배운 이 문제에 관한 것입니다.

악명 높은 콜백 지옥입니까?

콜백 문제를 해결하면서 가장 먼저 떠오르는 생각은 콜백 지옥입니다. 그러나 이것은 우리가 가진 문제에 더 가깝지 않습니다.

무대 설정은 충분히 했으니 이제 직접 가보자. 😅

제어 역전

Wikipedia에서는 IOC를 다음과 같이 설명합니다.

In software engineering, inversion of control (IoC) is a programming principle. IoC inverts the flow of control as compared to traditional control flow. In IoC, custom-written portions of a computer program receive the flow of control from a generic framework. A software architecture with this design inverts control as compared to traditional procedural programming

간단히 말해서, IOC는 우리 손에서 일부 외부 코드로 프로그램 흐름 제어를 잃고 있습니다.

이제 이것이 콜백으로 어떻게 가능한지 봅시다.

첫 번째는 제품 정보용이고 두 번째는 누군가 체크아웃할 때 호출할 콜백의 두 가지 인수를 사용하는 체크아웃 추적 기능이 있다고 가정합니다.

그리고 이것이 우리가 부르는 방법입니다.

trackCheckout(purchaseInfo,function finish(){
    chargeCreditCard(purchaseInfo);
    showThankYouPage();
});

여기서 콜백을 전달하는 문제는 호출이 우리 손에 있지 않다는 것입니다. 일부 타사 코드와 함께 제공되는 trackCheckout 기능에 제어권을 부여하고 있습니다.

trackCheckout 개발자가 실수로 다음과 같이 콜백을 호출하면 어떻게 됩니까?

function trackCheckout(options,callback){
    process(option);
    callback();
    callback();// 
}

이제 콜백이 두 번 실행된 것을 눈치채셨나요!? 즉, 이제 최종 사용자는 한 번이 아닌 두 번 청구되며 이는 가장 기대되지 않는 쇼핑 경험입니다.

또한 콜백이 호출되지 않아 손실이 발생할 수도 있습니다.

function trackCheckout(options,callback){
    process(option);
    //callback();
}

그래서 이것이 우리가 Inversion of Control의 리드를 콜백하는 방법입니다. 이것에 대한 문제는 언젠가 다른 블로그에서 다룰 약속입니다.

감사합니다