염딩코

콜백 함수란? (Callback function) 본문

Front-End/Javascript

콜백 함수란? (Callback function)

johnyeom 2023. 2. 24. 15:10

 

콜백 함수(Callback Function)는 함수를 매개변수로 받아들여 다른 함수 내에서 실행되는 함수입니다. 이는 JavaScript에서 비동기 프로그래밍을 가능하게 하는 핵심적인 개념 중 하나입니다.

 

예를 들어, JavaScript에서 setTimeout() 함수는 일정 시간이 지난 후에 함수를 실행합니다. 이 함수는 첫 번째 매개변수로 실행할 함수를 받고, 두 번째 매개변수로 지연 시간(밀리초)을 받습니다. 이때, 첫 번째 매개변수로 전달하는 함수는 콜백 함수입니다.

setTimeout(() => {
  console.log('Hello, world!');
}, 1000);

위 예제에서는 setTimeout() 함수가 1초(1000밀리초) 후에 실행되고, 첫 번째 매개변수로 전달된 함수가 실행됩니다. 이 함수는 console.log()를 호출하여 "Hello, world!"를 출력합니다.

 

콜백 함수는 이와 같은 비동기적인 작업에서 자주 사용됩니다. 다른 예로는 fetch() 함수를 들 수 있습니다. 이 함수는 서버로부터 데이터를 가져오는 비동기적인 작업을 수행하며, 데이터가 로드되면 첫 번째 매개변수로 전달된 콜백 함수가 실행됩니다.

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

위 예제에서는 fetch() 함수가 JSON 데이터를 가져오는 비동기적인 작업을 수행합니다. 이 함수는 Promise를 반환하며, then() 메소드를 사용하여 데이터를 처리하고, catch() 메소드를 사용하여 오류를 처리합니다. 이때, 첫 번째 then() 메소드로 전달된 함수와 catch() 메소드로 전달된 함수는 콜백 함수입니다.

 

콜백 함수는 JavaScript에서 매우 중요한 개념 중 하나입니다. 이를 사용하면 비동기적인 작업을 보다 쉽게 처리할 수 있으며, 프로그래머가 코드를 보다 구조화하고 유지보수하기 쉽게 만듭니다.