JS의 비동기 및 동기 콜백

콜백은 부트캠프에서 콜백을 처음 접했을 때 구현하기 어려웠던 개념입니다. 나는 그들의 목적을 이해했지만 당신이 배운 모든 것이 처음부터 즉시 고착되는 것은 아닙니다. 콜백에 대한 이 다이빙이 콜백의 기능과 목적을 이해하는 데 도움이 되기를 바랍니다!



JavaScript에서 콜백이란 무엇입니까?

가장 먼저 알고 싶은 것은 콜백이 함수라는 것입니다. JavaScript에서 함수는 일급 객체입니다. 즉, 다음과 같습니다.

-변수, 객체 또는 배열에 저장

-함수에 대한 인수로 전달됩니다. 함수에서 반환

-함수에서 반환

콜백은 다른 함수 내부에 인수로 전달되는 함수입니다. 작업을 완료하기 위해 콜백 함수를 "콜백"하는 외부 함수 또는 "고차 함수"내에서 호출됩니다.

고차 함수란 무엇입니까?

고차 함수는 다른 함수를 입력으로 사용하거나 함수를 반환하거나 둘 다 수행하는 함수입니다.

콜백은 언제 사용할 수 있습니까?

콜백은 코드 내에서 비동기 및 동기 작업에 사용할 수 있습니다.

동기식 콜백의 예를 살펴보겠습니다.

console.log("Start");
function isEvenOrOdd(num, callbck) {
    //callback function invoked
    callbck(num);
}

//callback function logic

function callbck(num){
    if (num % 2 == 0) {
        console.log(`${num} is even`);
    } else {
        console.log(`${num} is odd`);
    }
}

//calling outer function 

isEvenOrOdd(37, callbck);

console.log("End");

코드를 테스트하고 출력을 확인하기 위해 Google Chrome의 콘솔을 사용합니다.

이 스니펫의 코드 흐름을 완전히 이해하려면 출력 순서를 관찰하십시오. Google 크롬 콘솔이나 코드 샌드박스를 사용하여 출력 순서를 관찰합니다.



우리의 출력은 console.log("Start")이고 입력이 짝수인지 홀수인지 알려주고 console.log("End")여야 합니다. 발생하는 논리는 다음과 같습니다.

-function isEvenOrOdd는 callbck 및 num 콜백을 인수로 취하는 외부 함수입니다.

-전화를 걸면 콜백 함수가 호출됨callbck(num)
-function callbck(num) 호출 시 콜백 로직 제공

- isEvenOrOdd(37, callbck)는 외부 함수를 호출하고 콜백 로직을 호출하는 callbck(num)를 호출합니다.

*동기식 콜백에서 콜백은 출력이 console.log("Start")로 시작되고 함수가 설정되고 호출되며 로직이 호출된 다음 console.log("끝").

동기식 콜백이 차단됩니다. 즉, 콜백 실행이 완료될 때까지 상위 함수가 실행을 완료하지 않습니다.

이제 비동기 콜백을 살펴보겠습니다.

console.log("Start");
function isEvenOrOdd(num, callbck) {
    //callback function invoked inside Timeout
    setTimeout(() => {
        callbck(num);
    }, 0);

}

//callback function logic

function callbck(num){
    if (num % 2 == 0) {
        console.log(`${num} is even`);
    } else {
        console.log(`${num} is odd`);
    }
}

//calling outer function 

isEvenOrOdd(37, callbck);

console.log("End");

이 코드 스니펫은 setTimeout 함수를 통합한다는 점을 제외하면 첫 번째 코드 스니펫과 유사합니다.

출력을 살펴보겠습니다.



비동기 출력이 변경되었습니다. 무슨 일인가요?

이 비동기 콜백을 사용하면 콜백이 setTimeout 함수 내에 포함됩니다.

기본적으로 setTimeout 함수는 작업이 완료될 때까지 코드 흐름을 지연시키므로 비동기 함수입니다.

비동기 콜백은 고차 함수 실행 후에 실행됩니다.

콜백을 호출하는 비동기 방식:

-고차 함수가 실행을 시작합니다: console.log("Start")
-고차 함수가 실행을 완료합니다: console.log("End")
-Timeout()이 완료된 후 콜백 함수가 실행됨: 37 is odd
비동기 콜백은 비차단입니다. 즉, 상위 함수가 콜백을 기다리지 않고 실행을 완료합니다. 고차 함수는 나중에 특정 이벤트에서 콜백을 실행하도록 합니다.

이것이 우리가 출력 순서의 차이를 보게 하는 원인입니다.



결론:
콜백의 코드 흐름을 이해하면 작업 수행, 데이터 조작 및 디버깅 방법에 대한 더 깊은 통찰력을 얻을 수 있으므로 유리합니다. 나는 올바른 구문을 사용하고 있지 않을까 두려워서 여전히 이러한 개념에 대해 모호합니다. 따라서 항상 지식을 새로 고칠 수 있는 리소스가 있으면 도움이 됩니다!

참조:

https://dmitripavlutin.com/javascript-callback/

https://www.freecodecamp.org/news/discover-the-power-of-first-class-functions-fd0d7b599b69/