콜백함수를 사용할 때 사용원칙이 있다
콜백함수를 알아보기전에 1급 객체라는 것에 대해 알아보자
자바스크립트에서의 함수는 1급 객체(First Class Object)이다
함수 = 객체
1급 객체란?
1급객체란 프로그래밍에서 일반적으로 다른 객체들에 적용
가능한 연산을 모두 지원하는 객체이다
즉 다음과 같은 조건을 만족하면 1급 객체라고 할 수 있다
- 변수에 담을 수 있다
ex)
let bar = function() {
return 'JavaScript' ;
};
console.log(bar());
결과 :
JavaScript
위에 함수는 익명함수라고해서 함수이름이 없는 함수다
화살표함수도 같다고 생각하면 된다
- 파라미터로 전달할 수 있다
ex)
let number = [1,2,3];
number.forEach(function(x){
console.log(x * 2);
}); 결과 :
2
4
6
- 반환 값으로 사용할 수 있다
ex)
function test(){
return function() {
console.log('javascript');
}
}
let bar = test();
bar();
bar를 실행시키면 테스트가 실행되서 자바스크립트 문자가 나온다
이렇게 3개 조건을 충족하면 1급객체라고한다
그렇다면 callback function이란?
쉽게 생각해서 파라미터로 함수를 전달 받아, 함수의 내부에서 실행하는 함수
즉, 파라미터로 넘겨받은 함수는 일단 받고,
때가 되면 나중에 호출(callback)한다는 것이 콜백함수의 기본 개념이다
간단한 예시를 하나 만들어보자
function play(count, team, work){
count < 3 ? team(): work();
}
function team() {
console.log("우리는 팀입니다! ");
}
function work(){
console.log("열심히 일하는 중");
}
play(3, team, work);
이렇게 코드를 짰는데 보면
3보다 작으면 팀이 출력되고
3보다 같거나 크면 work가 출력되는 간단한 함수이다
맨 아래에서 play가 3을 인식하고 난 후에 team이냐 work이냐 판단해서
출력하는데 이것이 콜백함수이다
일단 기다렸다가 앞에서 확인이 된 후에 출력되기 때문이다
콜백함수의 사용원칙에는
-
익명 함수 사용
-
함수의 이름만 넘기기
-
전역,지역 변수 콜백 함수의 파라미터로 전달 가능
let apple = 'apple'; //전역변수
function fruit(callback){
let banana = 'banana'; //지역변수
callback(banana);
}
function eat(banana){
console.log(`apple: ${apple} / banana : ${banana}`);
}
fruit(eat);
이렇게 코드를 짜면
결과는
apple: apple / banana : banana
이렇게 출력된다
또 한번 더 정리해볼 Callback Hell?
비동기 프로그래밍 시 발생하는 문제로서, 함수의 매게 변수로 넘겨지는 콜백 함수가
반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상을 말한다
function square(x,y){
setTimeout(y,100,x*x);
}
square(2, function(x){
square(x, function(x2){
square(x2, function(x3){
console.log(x3);
});
});
});스퀘어에서 x,y를 선언했고
setTimeout함수를 이용해서 y라는 값안에 0.1초후에 x제곱을 넣어라고 선언했다
x는 2니까 x제곱은 4 그래서 function(4)이렇게 넣고
그 아래에서 4를 가져오고 그4는 y니까 4곱하기4는 16 16이라는 값을 x2에 넣었다
이제 y는 16되고 16제곱은 256인데 그것은 x3에 넣는다
그리고 0.3초후에 256을 출력하게된다
이게 콜백지옥이다
이 지저분하고 못생긴 녀석을 콜백함수로 분리해야겠다
function square(x,callback){
setTimeout(callback,100, x*x);
}
function firstCallback(number){
square(number, secondCallback);
}
function secondCallback(number){
square(number,thirdCallback);
}
function thirdCallback(number){
console.log(number);
}
square(2, firstCallback);
이렇게 코드를 변경해줬다
이제 이걸 Promis로 변경해보자
let_promise = function (param){
return new Promise (function (resolve, reject){
setTimeout(function(){
if(param){
resolve("해결 완료");
}
else{
reject(Error("실패!!"));
}
},1000);
});
};
이렇게 변경해주면 된다 promise와 async await은 더 자세히 공부해보자
