
콜백 함수(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에서 매우 중요한 개념 중 하나입니다. 이를 사용하면 비동기적인 작업을 보다 쉽게 처리할 수 있으며, 프로그래머가 코드를 보다 구조화하고 유지보수하기 쉽게 만듭니다.
'Front-End > Javascript' 카테고리의 다른 글
[JS] Prototype (0) | 2023.07.31 |
---|---|
[JS]let, const 키워드와 블록 레벨 스코프 (0) | 2023.07.29 |
[JS]전역 변수의 문제점 (1) | 2023.07.29 |
[JS] 블로킹과 논블로킹 / 동기와 비동기 (0) | 2023.07.27 |
Optional Chaining(옵셔널 체이닝)이란? (0) | 2023.03.07 |