1. Callback 함수란?
간단하게 말하자면, 아래와 같다.
함수인데 다른 함수의 파리미터로 들어가는 함수.
사전적 정의를 보면 'Callback'이란 단어는 '회신', '답신' 이란 뜻을 가지고 있는데, 이를 함수에 적용해 보면,
"내가 A 함수를 실행할 때 B 함수를 인자로 주면 지금 당장 B 함수를 바로 실행하지 않지만,
A 함수 실행 후에 B함수를 다시 불러줘. 그 함수를 Callback해줘 " 라는 의미로 받아들이면 어떨까 한다.
2. 이걸 왜 쓰는가
함수를 순차적으로 실행하고 싶을 때 쓴다.
3. 예시
함수 내용 자체를 다른 함수의 인자로 넣을 수 있다.
document.querySelector('.button').addEventListener('click', function(){
/**버튼클릭시 이 함수를 실행해 주세요, 이 내용이 바로 콜백함수*/
})
setTimeout(function() {
/** 1초후에 이 함수를 실행해 주세요, 이 내용이 바로 콜백함수*/
}, 1000)혹은 다른 곳에서 함수를 정의했다면, 그 함수의 이름을 넣을 수도 있고
funtion 함수명() {
/** 실행 될 코드*/
}
document.querySelector('.button').addEventListener('click', 함수명)콜백함수의 함수명을 작명할 수도 있다.
setTimeout(function 함수명() {
/** 1초후에 이 함수를 실행해 주세요, 이 내용이 바로 콜백함수*/
}, 1000)4. 콜백함수의 원리 : 어떻게 만들 수 있는가
만드는 방법은 간단하다. 함수의 인자를 함수로 받으면 된다.
function first(파라미터) {
console.log(1)
파라미터()
}
// 인자로 함수를 받고 그 함수를 함수 내에서 실행 할 수 있게 한다.
function second() {
console.log(2)
}
first(second)이렇게 되면 결과는 아래와 같다.
그렇다면 궁금할 수 있다.
어차피 JS는 싱글 쓰레드인데, 차례로 적으면 굳이 콜백 안쓰고도 순차적 실행이 가능하지 않나.
5. JS는 순차적으로 실행되는 거 아님? 콜백 왜씀?
맞는 말이다. 위에서 말한 것 처럼 둘이 순차적으로 나오게 하기 위해서라면 아래와 같이 실행해도 된다.
function first() {
console.log(1)
}
function second() {
console.log(2)
}
first()
second()그럼에도 불구하고, 콜백함수를 사용하는 이유는 개발자들이 각 컴퓨터의 네트워크 환경을 다 예상할 수 없고, 짧은 사이이지만 first함수와 second함수 사이에 어떤 일이 발생할지 모르기 때문에 콜백함수를 사용했을 때보다 순차적으로 작성했을 때에는 조금 불안한 요소가 많다는 것이 사용 이유라 할 수 있겠다.
6. 그럼 Callback 함수는 마냥 좋은 것인가
당연히 아니다. 콜백함수를 중첩으로 쓰게 되면 소위 말하는 '콜백지옥' 에 빠지게 된다.
예를 들어, DB에서 데이터를 받아오고 싶은데, A를 받은 다음에 B를 받고, 그 B를 받은 다음에 C를 받고 싶을 때의 코드는 아래와 같이 된다.
db.collection('post').findone(A, function(){
db.collection('post').findone(B, function(){
db.collection('post').findone(C, function(){
/**실행 될 함수 내용*/
})
})
})이러한 코드의 문제점은
1. 가독성이 떨어짐. 코드간의 연계성을 한눈에 가늠하기 어렵다.
2. 디버깅이 불편함. 코드가 연결되어 있기 때문에 어디서 문제가 발생하는지 파악하기 어렵다.
3. 유지보수가 어렵다.
7. 결론
콜백함수는 위의 3가지 이유로 콜백을 체인으로 사용하지 않고 Promise와 async await를 사용하게 된다. 이에 대한 내용은 다른 포스트에서 정리해보도록 하겠다.
-끝-
[출처]
https://www.youtube.com/watch?v=-iZlNnTGotk (콜백함수가 뭔지 한국어로 쉽게 설명하는 영상)
https://lovestudycom.tistory.com/entry/콜백함수를-왜-사용하나 (콜백함수를 왜 사용하나?)
https://www.youtube.com/watch?v=s1vpVCrT8f4 (자바스크립트 11. 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험 😱 JavaScript Callback | 프론트엔드 개발자 입문편 (JavaScript ES6))
