콜백 함수란? (What is a callback function?) (javascript)

개발하면서 자주 사용하였지만 개념적으로 잡힌 느낌은 아니여서 포스팅하며 정리하고자 한다.

 

콜백함수 정의 : 함수에 파라미터로 들어가는 함수

콜백함수 용도 : 순차적으로 코드를 실행하고 싶을 때 사용

 

먼저 addEventListener를 보겠다.

document.querySelector('.button').addEventListener('click', function(){
      
})

해당 함수를 사용할 때 콜백함수를 집어넣게 되어있다.

addEventListener도 함수인데 파라미터 자리에 또 하나의 함수를 집어넣고 있다. 이것을 콜백함수라고 한다.

 

setTimeout에서도 마찬가지다.

setTimeout(function(){

}, 1000)

안에 콜백함수를 집어넣게 한다.

 

 

그렇다면 함수안에 함수를 넣으려면 어떤식으로 코드를 짜야할까?

아까 콜백함수는 순차적으로 코드를 실행하고 싶을 때 사용한다고 했다.

function first(nextFunction) {
  console.log(1);
  nextFunction();
}

function second() {
  console.log(2);
}

first(second);

만약 first() 함수 다음에 second() 함수를 실행하고 싶다면 위와 같이 코드를 짜면 된다.

 

first();
second();

하지만 사실 그냥 위와 같이 순차적으로 써도 상관없다. 똑같이 순차적으로 실행된다.

 

 

그럼 어떨 때 콜백함수를 사용할까?

예를 들어 협업을 하는데 first() 함수가 유용해 팀원들이 자주 쓴다고 하자.

A라는 사람은 first() 후에 console.log(2)가 하고 싶을 수 있고,

B라는 사람은 first() 후에 console.log(4)가 하고 싶을 수 있다.

 

하지만 first()가 비동기처리가 되거나 하면 순차적으로 실행되지 않을 수도 있다.

first(function(){console.log(2)})

그래서 안정적으로 순차적 실행을 하기 위해선 앞서 본 코드와 같이 파라미터로 콜백함수를 넣어 실행하는 것이다.

 

 

하지만 이런 콜백함수에는 단점이 있다.

db.collection('post').findOne(A, function(){
   db.collection('post').findOne(B, function(){
     db.collection('post').findOne(C, function(){

     })
   })
 })

위와 같이 코드가 길어지고 가독성이 떨어진다는 것이다.

 

그래서 이를 개선한 Promise, async await 등이 있다.

 

Callback, Promise, async await 에 대한 비교 및 정보는 아래 블로그 글들을 참고하면 좋다.

자바스크립트 async와 await

 

프론트엔드의 비동기

 

출처 : https://youtu.be/-iZlNnTGotk