CallBack함수(feat. 비동기 처리의 [동기화] )

CallBack함수 : A(),B()라는 두 개의 함수가 있다고 하자.

1.B()함수(Callback 함수)는 A()함수 내부에서 호출이 된다. 

이떄, Callback 함수인 B() 함수는 A() 함수[B()함수를 제외한 코드의 집합]의 실행이 끝나고 나서야, 

비로소 실행이 된다. 

2.단지 함수를 등록하기만 하고 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수!

// 참고로 , 이 코드에는 callback 함수가 없고, callback 함수의 필요성을 설명을 하기 위하여 
// setTimeout()이라는 비동기 함수를 먼저 설명을 하고 있다. 
function findUser(id) {

  let user;  // 실행 순서 2
  
  //setTimeout() : 비동기 함수(0.1초 실행을 멈춘다) with callBack
  
  setTimeout(100,function () { // 실행 순서 3
  
    console.log("waited 0.1 sec.");
    
    user = {
      
      id: id,
      
      name: "User" + id,
      
      email: id + "@test.com",
  		  
    };
    
  }); // 100ms == 0.1sec 
  
  return user; // 실행 순서 4 ( 실행 순서 3에서 100ms, 즉 0.1초를 기다리는 동안, 
  // 즉 setTimeout()이 실행되는 동안에 코드의 실행 흐름이 바로 Line 25로 넘어 가버린다.
  // -> setTimeout()은 [비동기] 함수이므로, setTimeout()의 실행이 완료되는 것을 기다리지 않고
  // -> 바로 findUser() 함수의 남은 코드를 실행한다. 
  
}

const user = findUser(1); // 실행 순서 1

console.log("user:", user);

결과
user: undefined // 요청의 결과값이 return 값과 동일하지 않다. 
waited 0.1 sec. // findUser()함수 작업이 다 끝나고 나서, setTimeout()함수가 실행 완료된다.

비동기 처리로 인해 return 값 불일치를 해결하기 위해 나온 것이 바로 callback 함수이다. 

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); // setTimeout() 함수 안에 callback 함수가 들어 가 있다.
              // callback 함수는 setTimeout() 함수가 다 끝나고 나서야 실행이 되므로, 
              // return 값이 요청의 결과값과 같다.
              // 즉, callback 함수를 넣음으로써, 비동기 방식으로 작성된 함수를 [동기] 처리를 해주었다. 
  }, 100);
  
}

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

결과
waited 0.1 sec. // setTimeout() 비동기 함수가 다 실행 완료되고 되어야지만, callback 함수가 실행됨. 
user: {id: 1, name: "User1", email: "1@test.com"} // return값과 요청의 결과값이 같다.