Callback 함수
1. Callback 함수
- 다른 함수 내에서 실행되는 함수를 뜻함
- 주로 비동기 코드에서 사용되며, 비동기 작업이 완료되면 실행되어야 하는 작업을 정의함
2. Callback 함수의 특징
- 함수 내에서 다른 함수의 인자로 전달될 수 있음
- 함수 내에서 다른 함수의 결과로 반환될 수 있음
- 함수를 비동기 작업의 완료 후, 실행되도록 스케줄링할 수 있음
3. 예시
- a 함수는 3초 후, 비동기 작업이 완료되고 그 작업이 완료된 후, b 콜백 함수가 실행됨
console.clear();
function a(callback) {
setTimeout(function () {
console.log("비동기 작업 완료");
callback(10); // callback 함수를 호출
}, 3000)
}
function b(input) {
console.log("callback 함수 실행");
console.log("실행 결과 : " + (input + 10));
}
a(b);
4. Promise와 async / await
- ES6부터는 Promise와 async / await 을 사용하여, 비동기 작업을 더 간편하게 처리할 수 있음
- 이러한 방식은 Callback 지옥을 피하고, 코드를 더 읽기 쉽게 만드는 데 도움을 줌
※ 콜백 지옥 : JavaScript 코드에서 비동기 작업을 연속적으로 수행하거나 중첩된 비동기 작업을 처리할 때 발생하는 문제
5. 예시
console.clear();
function a() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log("비동기 작업 완료!");
resolve(); // 작업 완료 시, resolve 호출
}, 3000);
});
}
async function main() {
console.log("작업 시작");
await a();
console.log("작업 종료");
}
main();
'Front-End Study > JavaScript' 카테고리의 다른 글
동기와 비동기 (0) | 2023.11.10 |
---|---|
fetch 함수 (0) | 2023.10.26 |
localStorage (0) | 2023.09.04 |
findIndex 함수 (0) | 2023.08.25 |
fill 함수 (0) | 2023.08.11 |