callback 함수

'매개변수로 함수를 넘겨받은 상태로, 때가 되면 나중에 호출(called back)한다.'

콜백 함수는 함수의 매개변수로 들어가는 함수이다. 즉 어떤 이벤트에 의해 호출되어지는 함수이다.

함수의 매개변수로 들어가는 함수.

function aaa(qqq){
	qqq()
}

aaa(function(){
	console.log("test")
})

어떤 이벤트에 의해 호출되어지는 함수.

비동기 작업을 동기적으로 사용하고 싶을때 사용. (asnyc await가 없었을 때)
setTimeout(()=>{},5000) 5초뒤에 함수를 실행시켜줘

필요한 이유

콜백함수를 설명할 때에는 변수의 유효범위(scope)에 대한 이야기, 동기/비동기(synchronous/Asynchronous)처리에 대한 이야기도 하면 좋을 것 같다.

1. 동기 : 하나의 요청이 오면 완료가 된 후 다음 요청을 실행하는 방식 - 순차적 로직흐름
2. 비동기 : 어떤 요청이 오면 완료가 되기 전에 다음 요청을 실행하는 방식

• 동시 효율적 처리 가능, 즉시 응답X 때문에 예상 밖 결과 나올수도 있음.,

콜백함수는 때로는 가독성이나 코드 재사용 면에서도 사용 된다.
비동기 방식으로 작성된 함수를 동기 처리하기 위해 필요 하다.

function findUserAndCallBack(id, cb) {
  const user = {
    id: id,
    name: "User" + id,
    email: id + "@test.com",
  };
  cb(user);
}

findUserAndCallBack(1, function (user) {
  console.log("user:", user);
});

함수 findUserAndcallBack의 인자로 id 와 콜백 함수를 선언 하여 호출 하였다. 그래서 cb 매개변수는 10번째 function익명 함수를 콜백 함수로 할당 받으며, cb(user); 가 실행될 때 이 콜백 함수는 실행되게 된다.

=> 콜백 함수를 넣음에 따라 함수 내부에서 수행해주 때문에 결과값을 return 할 필요가 없다

function findUserAndCallBack(id, cb) {
  setTimeout(function () {
    console.log("waited 0.1 sec.");
    const user = {
      id: id,
      name: "User" + id,
      email: id + "@test.com",
    };
    cb(user);
  }, 100);
}

findUserAndCallBack(1, function (user) {
  console.log("user:", user);
});

결과
waited 0.1 sec.
user: {id: 1, name: "User1", email: "1@test.com"}

예제는 결과값을 바로 리턴받지 않고, 그 결과값을 통해 처리할 로직을 콜백 함수로 넘겨서 제대로 구현을 하였다.

참고 https://velog.io/@ko1586/Callback%ED%95%A8%EC%88%98%EB%9E%80-%EB%AD%94%EB%8D%B0