Callback 패턴?
function foo(callback) {
const a = 10;
const b = 20;
callback(a, b);
}
function boo(a, b) {
return a + b;
}
foo(boo);
- 콜백은 함수에 인자로 넣어지는 함수
- 자바스크립트에선 함수 자체가 객체이기 때문에 함수의 인자로 넣어줄 수 있음
Callback을 사용한 비동기 처리
function squareAndCallBack(number) {
let square;
setTimeout(() => {
square = number * number
}, 100);
console.log(square);
}
squareAndCallBack(2);
- 자바스크립트는 setTimeout을 기다려주지 않는다 WebAPI를 호출해 task queue로 넘긴다
- 바로 콘솔로그를 실행하고 setTimeout의 로직을 실행하기 때문에 square는 undefined이다.
function squareAndCallBack(number, callback) {
setTimeout(() => {
const square = number * number
callback(square)
}, 100);
}
function consolePrint(value) {
console.log(value);
}
squareAndCallBack(2, consolePrint);
- 위와 같은 비동기 문제를 해결하기 위해 콜백을 사용할 수 있다.
- setTimeout로직 안에 콜백함수를 넣어주면 로직이 실행된뒤 콜백을 통해 결과를 가지고 무언가를 할 수 있다.
주의할 점
foo(() => {
bar(() => {
baz(() => {
qux(() => {
quux(() => {
quuz(() => {
corge(() => {
grault(() => {
run();
}).bind(this);
}).bind(this);
}).bind(this);
}).bind(this);
}).bind(this);
}).bind(this);
}).bind(this);
}).bind(this);
- 콜백지옥이라 불리는 연속적 콜백
- 이 경우 유지보수가 불가능할 정도의 복잡함을 가지게 됨
- this의 문맥 유지를 위해 bind 해줬지만 실제 상황에서는 this가 어디 문맥의 this 인지 혼동할 가능성이 높음