[JS] 콜백

콜백 (callback)

- 함수의 인수로 사용되는 함수

function timeout() {
  setTimeout(() => {
    console.log('내가 먼저 나올래')
  }, 3000)  
}

timeout()
console.log('끝')

코드를 실행해보면 (화살표함수로 작성하였다.)

'내가 먼저 나올래' 부분보다 '끝' 라는 함수가 먼저 호출되는것을 볼 수 있다.

그럼 여기서 '내가 먼저 나올래'가 더 위에 나올 수 있게 하려면 어떻게 해야할까?

그때 콜백을 사용한다.

function timeout(callback) { //'콜백'이란 매개변수를 정의했다.
  setTimeout(() => {
    console.log('내가 먼저 나올래')
    callback() //내가 실행을 보장하고 싶은 곳에 넣은 후 호출!
  }, 3000)  
}

timeout(() => {
  console.log('끝')
})

타임아웃함수 내부에서 인수를 받아줄 매개변수를 지정해줘야한다. 

나는 'callback'이라는 이름으로 만들었고 그 매개변수를 내가 실행을

'보장'하고 싶은 위치에 넣는다.

즉, 타임아웃함수를 호출할때 하나의 익명함수를 인수로 사용했고,

그 인수가 'callback'이라는 매개변수로 들어간다.

'callback'을 내가 실행을 보장하고 싶은 위치에 붙여넣는다.

완성~~~!

언제사용할까? 타임아웃함수가 아니더라도 로직이 복잡하여 처리하는데 시간이 걸리는경우,

콜백함수로 처리가 완료된 다음에 매개변수로 콜백함수를 실행해주면 모든 처리이후에

내가 원하는 내용들을 추가적으로 실행해 줄 수 있다.

 

간단하게 콜백은?

1) 인수로 사용하는 함수는 콜백이다.
2) 콜백은 실행위치를 '보장'하는 용도로 굉장히 많이 활용된다.
3) 함수안에 있는 콜백함수는 다른함수에게 실행 권한을 넘겨주는 것