5분 안에 설명되는 JavaScript 콜백

콜백은 특히 비동기 코드를 다룰 때 JavaScript를 이해하는 데 필수적인 부분입니다. 몇 가지 예를 통해 약 5분 동안 콜백의 기본 사항을 살펴보겠습니다!

콜백 함수란?

JavaScript의 보다 독특한 측면 중 하나는 함수를 처리/처리하는 방법입니다. 함수는 "일급 시민"으로 간주됩니다. 여기에는 몇 가지 다른 의미가 있습니다.

함수가 객체임

변수에 함수를 할당할 수 있습니다

.

함수를 함수에 매개 변수로 전달할 수 있음

마지막 글머리 기호는 콜백 개념에 필수적이기 때문에 굵게 표시됩니다.

Callback functions are functions that are passed as a parameter to another function.

setTimeout을 사용한 기본 콜백

JavaScript 개발자가 콜백 함수를 처음 접하는 경우 중 하나는 setTimeout() 함수를 사용할 때입니다. 다음은 간단한 예입니다.

setTimeout(() => {
  console.log("Hello")
},100)

이 경우 JavaScript에 100ms를 기다린 후 콜백 함수를 호출하도록 지시하고 있습니다. setTimeout() 함수는 콜백 함수와 타임아웃 숫자(밀리초)의 두 가지 매개변수를 사용합니다. 인라인 익명 함수를 사용하는 대신 별도의 함수를 완전히 생성하여 이를 더 명확하게 만들 수 있습니다.

//this is the callback function
const timeoutCallback = () => {
  console.log("Hello")
}

setTimeout(timeoutCallback, 100)

이전 스니펫과 정확히 동일하게 작동하지만 이제 기능을 더 명확하게 분리했습니다.

배열 함수의 콜백

지난 몇 년 동안 JavaScript를 많이 작성했다면 아마도 map() , reduce() , filter() , forEach() 등과 같은 배열 함수에 익숙할 것입니다. 이러한 각 함수는 콜백을 활용합니다. 그들은 각각 배열을 반복하고 각 항목에 대한 콜백 함수를 호출합니다. 다음은 forEach() 의 예입니다.

const names = ['james', 'jess', 'lily', 'sevy']

names.forEach((name) => {
  console.log(name)
});

이 경우 콜백 함수는 인라인으로 정의되며 names 배열의 개별 이름인 매개변수를 허용합니다. 그런 다음 해당 이름을 콘솔에 기록합니다. 이 예는 간단해 보일 수 있지만 뒤에서 무슨 일이 일어나고 있는지 살펴보겠습니다.

콜백을 사용하여 처음부터 forEach() 빌드

처음부터 JavaScript 함수를 구축하는 것은 저에게 항상 놀라운 학습 연습이 되었으므로 여기에서 시도해 보겠습니다. 콜백이 어떻게 작동하는지 더 명확하게 이해하기 위해 자체 버전의 forEach() 함수를 만들어 보겠습니다.

배열과 콜백 함수라는 두 개의 매개 변수를 받는 새 함수myForEach()를 만들어 보겠습니다.

const myForEach = (arr, cb) => {

}

함수 내에서 for 루프를 만들어 배열을 반복하고 각 요소에 액세스할 수 있습니다.

const myForEach = (arr, cb) => {
  for (let i = 0; i < arr.length; i++) {
    const element = arr[i];
  }
}

여기에서 콜백 함수를 호출하고 개별 요소를 매개변수로 전달합니다.

const myForEach = (arr, cb) => {
  for (let i = 0; i < arr.length; i++) {
    const element = arr[i];
    cb(element)
  }
}

그게 다야. 이것이 기본적으로 모든 배열 함수가 배후에서 수행하는 작업입니다. 이러한 종류의 예제를 작성하는 것은 항상 제 이해에 도움이 되었으므로 여러분에게도 도움이 되었기를 바랍니다!

비동기 콜백 함수

위에 표시된 배열 함수 예제는 동기 코드를 다루고 있으므로 비동기 코드와 작동하는 방법에 대한 예제를 살펴보겠습니다. JavaScript에 내장된 fetch() 함수를 사용하여 FREEPokeAPI에서 데이터를 요청해 보겠습니다.

이 경우 id가 56인 포켓몬에 대해 PokeAPI에 가져오기 요청을 합니다(어떤 포켓몬인지 아십니까? 👀).

fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
  .then(res => {
    return res.json()
  })
  .then(data => {
    console.log(data)
  })

Fetch는 약속을 반환하므로 .then() ` to wait for the response to come back. We then convert the data to JSON which returns another promise. Finally, we log out the Pokemon data. We are passing a callback function to each instance .then()`을 사용해야 합니다. 이는 데이터가 반환될 때까지 전체 시간을 기다리는 대신 요청이 실행되는 동안 다른 코드를 계속 실행하기 때문에 유용합니다.

마무리

콜백은 JavaScript의 필수 부분입니다. 흐름과 사용법이 처음에는 까다로워 보일 수 있지만 몇 가지 예를 통해 더 간단해졌으면 합니다!