[javascript] 비동기 작업 / Call Back 함수란 무엇인가??

비동기 작업의 문제 해결

 

 

특정 로직의 실행이 끝날 때까지 기다리지 않고, 나머지 코드를 먼저 실행하는 비동기 처리는 서버에게 데이터를 요청했을 때, 서버에서의 응답 데이터를 언제 받을지 모른다.

또한, 비동기 작업을 통해 여러 로직을 동시에 처리할 때, 작업들이 정상적으로 끝났는지, 어떤 작업이 우선적으로 끝나게 되는지 확인할 필요가 있다.

이러한 비동기 작업의 특성 때문에 비동기 작업을 좀 더 쉽게 제어하기 위해서 Call Back 함수를 사용한다. 

 

 

Call Back 함수

 

 

function taskA(a) {
  setTimeout(() => {
    const res = a * -1;
    return res;
  }, 2000);
}

const res = taskA(2);
console.log(res);

 

위 코드에서, 동기적 처리라면 출력값이

 

-2     

 

가 출력되어야 하지만, setTimeOut 은 비동기 처리 이기 때문에 setTimeOut 을 통해 데이터를 받기 전에 console.log(res) 가 실행 되어

undefined

로 출력이 된다. 

따라서, 비동기로 실행하여 받은 데이터 결과 값을 가지고 처리를 해야할 필요가 있다. 

 

이때, callback 함수를 이용한다 !

function taskB(a, cb) {
  setTimeout(() => {
    const res = a * -1;
    cb(res);
  }, 2000);
}

taskB(2, (res) => {
  console.log(res);
});

비동기 처리를 포함한 함수를 호출 할 때 매개변수로 callback 함수를 전달해주고,
비동기로 실행하여  받은 데이터 결과 값을 callback 함수의 매개변수로 전달하여 처리해 준다.

 

 

참고

 

https://espania.tistory.com/338

[javascript] 비동기 작업