728x90
반응형
자바스크립트 함수 : 콜백(callback) 함수
콜백(callback) 함수란?
콜백(Callback) 함수는 간단히 말하면 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다.
즉, 콜백 함수란 파라미터로 일반적인 변수나 값을 전달하는 것이 아닌 함수 자체를 전달하는 것을 말한다고 보면 된다. 또한 어차피 매개변수에 함수를 전달해 일회용으로 사용하기 때문에 굳이 함수의 이름을 명시할 필요가 없어 보통 콜백 함수 형태로 함수를 넘겨줄때 함수의 이름이 없는 '익명 함수' 형태로 넣어주게 된다.
콜백 함수는 비동기적인 상황에서 특히 유용합니다. 예를 들어, 서버에서 데이터를 가져와서 처리하는 경우, 서버로부터 데이터를 가져오는 데 시간이 걸리기 때문에 콜백 함수를 사용하여 데이터를 가져옵니다.
콜백(callback) 함수 : 다른 함수에 인수로 넘겨지는 함수
function func( ){
document.write("2. 함수 실행");
};
function callback(str){
document.write("1. 함수 실행");
str( );
};
callback(func);- 함수가 두개가 있습니다. 실행문을 봤을 때 callback(func)이므로 함수 callback를 실행시키고 func 인수를 str 인수로 가져와서 먼저 document.write("1. 함수 실행");을 실행시키고 str( );의 str을 func 인수를 가져왔기 때문데 func( )가 됩니다. 그래서 다음 func( ) 함수를 가져와서 document.write("2. 함수 실행");을 실행시킵니다.
- 결과는 1. 함수 실행, 2. 함수 실행 순으로 나옵니다.
콜백(callback) 함수 : 반복문
function func(index){
console.log("함수가 실행되었습니다." + index);
}
function callback(num){
for(let i=1; i<=10; i++){
num(i);
}
}
callback(func);- 함수가 두개가 있습니다. 실행문을 봤을 때 callback(func)이므로 함수 callback를 실행시키고 func 인수를 num인수로 가져오고 for문 반복문을 실행시킵니다. i의 값이 1부터 10까지 이므로 10번 반복시켜줍니다. num(i)이므로 num을 func 인수를 가져왔기 때문에 func(i)가 됩니다. 그래서 다음 함수 func(index) 가져와서 실행시켜주는데 i의 값이 index 값이 됩니다. 그러므로 console.log("함수가 실행되었습니다." + index)를 10번 실행시켜줍니다.
- 결과는 함수가 실행되었습니다.1, 함수가 실행되었습니다.2, 함수가 실행되었습니다.3, 함수가 실행되었습니다.4, 함수가 실행되었습니다.5, 함수가 실행되었습니다.6, 함수가 실행되었습니다.7, 함수가 실행되었습니다.8, 함수가 실행되었습니다.9, 함수가 실행되었습니다.10 순으로 나옵니다.
콜백(callback) 함수 : 동기/비동기
//01
function funcA( ){
console.log("funcA가 실행되었습니다.");
}
function funcB( ){
console.log("funcB가 실행되었습니다.");
}
funcA( );
funcB( );
//02
function funcA( ){
setTimeout(( ) => {
console.log("funcA가 실행되었습니다.");
}, 1000); // 1초뒤에 실행
}
function funcB( ){
console.log("funcB가 실행되었습니다.");
}
funcA( );
funcB( );
//03
function funcA(callback){
setTimeout(( ) => {
console.log("funcA가 실행되었습니다.");
callback( );
}, 1000)
}
function funcB( ){
console.log("funcB가 실행되었습니다.");
}
funcA(function( ){
funcB( );
});- //01은 있는 그대로 함수가 순서대로 실행됩니다. 그래서 결과는 funcA가 실행되었습니다., funcB가 실행되었습니다. 순으로 나옵니다.
- //02는 첫번째 함수 funcA( )가 setTimeout으로 로딩이 완료되고 1000밀리초인 1초 뒤에 실행되므로 함수 funcB( )가 먼저 실행되고 함수 funcA( )의 값이 나옵니다. 그래서 결과는 funcB가 실행되었습니다., funcA가 실행되었습니다.순으로 나옵니다.
- //03은 //02와 같이 순서가 뒤바뀌는 현상을 방지하기 위해 저런 형태로 작성합니다. 실행문이 funA(function(){funcB();}); 이므로 함수 func(callback)에 callback 인수에 function(){funcB();}를 가져옵니다. 그러므로 setTimeout를 사용해도 위와 같이 funcB( )가 먼저 실행되는게 아니고 console.log("funcA가 실행되었습니다.")가 먼저 실행되고 callback( );가 실행되므로 다음 함수 funcB( )가 실행됩니다. 그러므로 결과는 funcA가 실행되었습니다., funcB가 실행되었습니다. 순으로 나옵니다.
콜백(callback) 함수 : 콜백 지옥
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( );
});
});
});- 위와 같이 함수를 입력하게 되면 동기/비동기 방식의 함수 중 //03처럼 실행이 됩니다. 다만 콜백 함수를 중첩해서 사용하면서 코드가 복잡해지고 가독성이 떨어지는 현상을 말합니다. 비동기적으로 수행되는 작업이 많아지면서 콜백 함수가 중첩되어 사용되면서 코드가 복잡해지고, 디버깅이 어려워지고, 유지보수가 어려워지는 문제점이 발생합니다.
참고
728x90
반응형
