callback 함수란?
- 지금 바로 시행되진 않지만, 다른 함수의 입력값으로 전달되어서 다른 함수에 의해서 나중에 호출되는 것 → 비동기통신의 첫 시작!
- 함수를 만들어 쓰는 경우도 있지만 한 번만 쓰고 안 쓰는 경우가 많아 익명함수, arrow function의 형태로 작성하는 것이 많다
- 이름 그대로 "(지금 당장 실행하진 않고) 나중에 다시 불러줘!" 라고 이해 → 나중에 실행하라고 인자로써 다른 함수에 넘겨주는 것
- 브라우저에게 요청을 해놓고 따로 빼놓고 적정 시점에 실행한다
- 네트워크 통신, 사용자의 동작을 이벤트 프로그래밍 등에 callback 함수가 사용한다
< 예시 >
const words = ['s','l','e','exuberant','destruction','present'];
const result = words.filter(word=>word.length >6);에서 word=>word.length >6 부분이 해당
callback의 종류
callback 함수를 받는 함수가 어떻게 동작하느냐에 따라 동기적과 비동기적으로 나눌 수 있다
(1) Synchronous callback(즉각적,순차적으로 실행)
호출이 완전히 완료될 때까지 다음 내용이 실행되지 않는다
(2) Asynchronous callback(언제 실행될지 예측되지 않음)
콜백 함수는 queue에 들어간다. stack 내 함수 시행이 끝나고 queue에서 stack으로 옮겨진 후 시행된다
callback 지옥
callback 함수 안에서 다른 callback 함수들을 호출하는 것이 깊어질 때(체인이 길어짐)를 의미
단점
- 가독성이 떨어져 비즈니스 로직을 이해하기 어려움
- 유지보수와 디버깅이 어려움
같이 참고해야 할 JavaScript의 언어 특징
- JavaScript는 동기적이다 → 호이스팅(변수와 함수 선언이 자동적으로 제일 위로 올라가는 것)이 된 이후부터 코드가 프로그래머가 작성한 순서대로 동기적으로 실행됨
↔ 비동기: 언제 코드가 실행될지 예측할 수 없음 ex. setTimeout(callback,time); - 함수를 callback 형태로 인자로 다른 함수에 전달 가능
- 변수에 함수 할당 가능
- 함수는 일급객체에 해당 → 다른 함수를 호출할 때 arguments로 함수를 넘길 수 있다
