자바스크립트 콜백 함수?

동부 표준시. 읽는 시간: 5분


나는 꽤 오랫동안 자바스크립트(JS) 콜백으로 작업했지만 실제로 어떻게 작동하는지 또는 왜 작동하는지 이해하지 못했습니다. 그래서 나는 당신이 그들에 대해 조금 더 배울 수 있도록 돕기 위해 여기 있습니다!

JS 콜백이 무엇인지 잘 모르는 분들을 위해 설명드리자면, JS 콜백은 인수로 다른 함수에 전달된 다음 일종의 루틴이나 작업을 완료하기 위해 외부 함수 내부에서 호출되는 함수로 정의됩니다 😱.

JavaScript는 단일 스레드 프로그래밍 언어입니다. 기본적으로 동기식이며 한 번에 하나의 작업을 처리한다는 의미입니다. 사용 방법과 사용 환경(JS), 클라이언트 💻 대 서버 측 🗄에 따라 달라질 수 있습니다.

일부 브라우저 코드의 첫 번째 예를 살펴보겠습니다.

function fruitOne(){
    console.log('Apples are the best! 🍏')
}
function fruitTwo(){
    console.log('Bananas are the best! 🍌')
}
function fruitThree(){
    console.log('Cherries are the best! 🍒')
}

fruitOne()
fruitTwo()
fruitThree()

// RESUlT
Apples are the best!
Bananas are the best!
Cherries are the best!

우리가 기대하는 방식으로 작동합니다. 맞습니까? 콘솔은 함수가 호출된 순서대로 각 결과를 기록합니다.

그러나 이제 두 번째 예에서 함수 중 하나 내에서 웹 API 메서드인 setTimeout()을 사용하면 어떤 일이 발생할 수 있다고 생각합니까?

function fruitOne(){
    console.log('Apples are the best! 🍏')
}
function fruitTwo(){
    setTimeout(() => console.log('Bananas are the best! 🍌'), 3000)
}
function fruitThree(){
    console.log('Cherries are the best! 🍒')
}

fruitOne()
fruitTwo()
fruitThree()

// RESULT
Apples are the best!
Cherries are the best!
Bananas are the best!

함수가 이전과 같은 순서로 호출되는 것을 볼 수 있지만 다른 순서로 반환되는 것을 볼 수 있습니다! 자, 왜 🤔?

음, JS는 논블로킹 프로그래밍 언어입니다. 즉, 다음 코드로 이동하기 전에 이전 코드 실행이 완료될 때까지 기다리지 않습니다🤯.

따라서 가장 최근의 예에서 fruitOne()이 호출되고 즉시 반환됩니다. 그런 다음 setTimeout() 웹 API 메서드를 포함하는 fruitTwo()에 도달합니다.

setTimeout() 메서드는 타이머가 만료되면 함수 또는 지정된 코드를 실행하는 타이머를 설정합니다. 이 경우 3초 후에 실행됩니다.

fruitThree() 메서드는 fruitTwo()가 호출되기 전에 실행이 완료될 때까지 기다리지 않고 최대한 빨리 실행되기를 원합니다!

이제 우리는 일부 비동기 동작을 보고 있습니다! 호출된 순서와 다른 순서로 반환되는 함수.

이제 세 번째 예를 살펴보겠습니다!

function fruitOne(){
    console.log('Apples are the best! 🍏')
}
function fruitTwo(myCallback){
    setTimeout(() => {
        console.log('Bananas are the best! 🍌')
        callback()
    }, 3000)
}
function fruitThree(){
    console.log('Cherries are the best! 🍒')
}

fruitOne()
fruitTwo(fruitThree)


// RESULT
Apples are the best!
Bananas are the best!
Cherries are the best!

위의 세 번째 예에서 중요한 차이점은 함수를 차례로 호출하지 않는다는 것입니다. 우리는 fruitTwo()에 인수로 fruitThree 함수를 전달하고 있습니다.

👻 Sneaky Note: Notice that when we pass fruitThree into fruitTwo as an argument, we omit the "()" we normally use for functions. The () is a signal to invoke the function, and we don't want to do that just yet! We're just passing a reference to the fruitThree function with no intention telling that code to execute yet.

따라서 fruitTwo 내부에서 myCallback 매개변수에 액세스할 수 있습니다. 이 예제가 작동하는 방식은 fruitOne 함수가 먼저 실행된 다음 fruitTwo 함수를 호출하는 것입니다. 세 번째 함수는 두 번째 함수가 완료될 때까지 기다렸다가 계속 진행합니다!

fruitTwo() 내부에는 호출된 후 3초 후에 실행되는 setTimeout이 있습니다. 일단 호출되면 'banana' 문을 기록한 다음 마지막으로 우리가 myCallback이라는 이름의 콜백 함수를 실행합니다. 이 함수는 실제로 변장한 fruitThree 함수입니다 🥸.

Notice this time we do use the () when invoking the myCallback function param our fruitTwo function has access to.

그리고 그것은 콜백과 함께 약간의 재미입니다! 콜백은 이와 같은 작은 작업에 적합하지만 여러 개의 중첩된 콜백을 사용하면 신속하게 제어할 수 없게 될 수 있습니다. 이에 대한 이름이 Callback Hell 👹입니다! 이것에 대한 다른 해결책이 있습니다!

Async/Await 및 Promises와 같은 것은 이러한 상황을 관리하는 데 도움이 되는 훌륭한 도구입니다. 이 게시물의 범위를 벗어나지만 언젠가는 사용할 수 있습니다 😉

누구든지 팁이 있거나 내가 놓친 것을 추가하고 싶다면 알려주세요!

다음 시간까지 많이 사랑해주세요!💙


즐거운 금요일!