“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
728x90
어제 동기 비동기에대해 올렸는데요 오늘은 동기 시스템인 자바 스크립트를 비동기로 작업 할 수 있는 콜백함수에 대해 설명하려고 합니다.
콜백함수
- 콜백함수(callback function)는 다른 함수에서 인자로 전달되어 실행되는 함수입니다. 일반적으로 비동기적인 작업을 처리할 때 사용되는데, 비동기적인 작업은 결과가 나올 때까지 기다리지 않고 다른 작업을 수행하는 것을 말합니다.
- 콜백함수는 보통 비동기적인 작업이 완료되었을 때 호출됩니다. 예를 들어, 파일을 읽는 함수에서는 파일을 읽는 작업이 완료되면 콜백함수가 호출되어 결과를 전달합니다. 콜백함수는 인자로 결과를 받아들이고, 결과를 이용하여 다른 작업을 수행할 수 있습니다.
- 콜백함수는 JavaScript에서 매우 중요한 역할을 합니다. JavaScript에서는 비동기적인 작업이 많이 발생하기 때문에, 콜백함수를 이용하여 비동기적인 작업을 처리합니다. 예를 들어, AJAX 요청에서도 콜백함수를 이용하여 비동기적인 결과를 처리합니다.
- 하지만 콜백함수는 코드를 읽기 어렵게 만들기도 하며, 콜백함수 안에서 발생하는 오류를 처리하기도 어려울 수 있습니다. 이러한 문제를 해결하기 위해, 최근에는 Promise나 async/await와 같은 새로운 비동기 처리 방식이 등장하였습니다.
1. 콜백 함수 : 함수를 두번 실행(다른 함수에 인수로 넘겨지는 함수)
{
// function func1(){
// document.write("1.함수 실행");
// }
// function func2(){
// document.write("2.함수 실행");
// }
// func1()
// func2()
function func(){
document.write("2.함수 실행");
}
function callback(str){
document.write("1. 함수 실행");
str();
}
callback(func);
}
func라는 함수와 callback이라는 함수를 정의합니다. func 함수는 document.write를 호출하여 "2.함수 실행"을 출력합니다. callback 함수는 str 인자를 받아들이고, document.write를 호출하여 "1.함수 실행"을 출력한 후 str 함수를 호출합니다. 이 때, str 인자에 함수인 func를 전달하였기 때문에 func 함수가 호출됩니다.
따라서 callback(func)를 호출하면 "1.함수 실행"과 "2.함수 실행"이 차례로 출력됩니다. 이렇게 콜백함수를 이용하면 비동기적인 작업을 처리하면서도 순서대로 작업을 수행할 수 있습니다.
2. 콜백함수 : 반복문
{
function func(index){
console.log("함수가 실행되었습니다."+index);
}
function callback(num){
for(let i=1; i<=10; i++){
num(i);
}
}
callback(func);
}
func 함수는 index라는 인자를 받아들이고, console.log를 이용하여 "함수가 실행되었습니다."와 인덱스 값을 출력합니다.
그리고 callback 함수는 num이라는 인자를 받아들입니다. 이 때 num은 함수인 func를 전달받습니다. callback 함수 내부에서는 for문을 이용하여 1부터 10까지 반복하면서 num 함수를 호출합니다. 이 때, i 값을 num 함수의 인자로 전달합니다.
따라서 callback(func)를 호출하면 for문이 1부터 10까지 반복하면서 func 함수가 호출됩니다. func 함수는 호출될 때마다 "함수가 실행되었습니다."와 해당 인덱스 값을 출력하므로, 총 10번의 출력이 이루어집니다.
3. 콜백 함수 : 동기/비동기
{
// 01
function funcA(){
console.log("funcA가 실행되었습니다.");
}
function funcB(){
console.log("funcB가 실행되었습니다.");
}
funcA();
funcB();
// a b
// 02
function funcA(){
setTimeout(()=>{
console.log("funcA가 실행되었습니다.");
},1000)
}
function funcB(){
console.log("funcB가 실행되었습니다.");
}
funcA();
funcB();
// b a
//03
function funcA(callback){
setTimeout(()=>{
console.log("funcA가 실행되었습니다.");
callback();
},1000)
}
function funcB(){
console.log("funcB가 실행되었습니다.");
}
funcA(function(){
funcB();
})
// 04
function funcA(callback){
setTimeout(( ) => {
console.log("funcA가 실행되었습니다.");
callback( );
},1000);
};
function funcB(callback){
setTimeout(( ) => {
console.log("funcB가 실행되었습니다.");
callback( );
},1000);
};
function funcC(callback){
setTimeout(( ) => {
console.log("funcC가 실행되었습니다.");
callback( );
},1000);
};
function funcD(callback){
setTimeout(( ) => {
console.log("funcD가 실행되었습니다.");
},1000);
};
funcA(function( ){
funcB(function( ){
funcC(function( ){
funcD( );
});
});
});
}- funcA()와 funcB() 함수를 순차적으로 실행시키는 예시입니다. 따라서 funcA()가 실행된 후 funcB()가 실행됩니다.
- setTimeout() 함수를 이용하여 funcA() 함수가 1초 후에 실행되도록 하였습니다. 따라서 funcB()가 먼저 실행되고, 그 다음 1초 후에 funcA()가 실행됩니다.
- funcA() 함수는 콜백함수 callback을 인자로 받습니다. setTimeout() 함수를 이용하여 1초 후에 funcA() 함수가 실행되면서 "funcA가 실행되었습니다."를 출력하고, 인자로 받은 callback 함수를 실행합니다. 이 때, callback 함수에는 funcB()가 전달되어 있으므로 funcB()가 실행됩니다. 따라서 funcB() 함수가 funcA() 함수보다 늦게 실행됩니다.
- funcA(), funcB(), funcC(), funcD() 함수가 콜백함수를 인자로 받습니다. funcA() 함수는 1초 후에 실행되도록 하고, 실행된 후 인자로 받은 callback 함수를 실행합니다. callback 함수에는 funcB()가 전달되어 있으므로, funcB() 함수가 실행됩니다. 이와 같은 방식으로 funcC() 함수와 funcD() 함수가 실행되며, 이때 콜백함수를 이용하여 함수들이 순차적으로 실행되도록 합니다. 따라서 funcD() 함수가 모든 함수들 중 가장 늦게 실행됩니다.