[Javascript] 동기/비동기 처리와 callback

 

동기와 비동기를 나누는 가장 큰 차이점을 어떻게 실행 순서를 가지는 지에 있다.
아래 이미지와 같이 Syncronous 동기는 요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식을,
Asynchronous 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행할 수 있는 방식을 의미한다.

 

출처 : https://velog.io/@yejinh

 

아래와 같이 함수를 작성하여 호출했을 때 동기적으로 실행된다.

function work() {
  const start = Date.now();
  for (let i = 0; i < 1000000000; i++) {}
  const end = Date.now();
  console.log(end - start + 'ms');
}

work();
console.log('다음 작업');

결과

위의 결과와 같이 함수 로직이 끝난 후에 다음 작업이라는 문구가 호출되었다.

 

이것을 비동기적으로 전환할 때 setTimeout을 사용하여 아래와 같이 변경한다.

function work(callback) { //콜백
  setTimeout(() => {
    // 동기처리를 비동기 처리로
    const start = Date.now();
    for (let i = 0; i < 1000000000; i++) {}
    const end = Date.now();
    console.log(end - start + "ms");
    callback(end - start); //완료 후 work 함수에 넘겨줄 값
  }, 0); //여기서 0은 0초 후이나 브라우저 특성상 0으로 해도 기본값이 주어진다. 
  // 백그라운드에서 해당 로직을 실행하게 됨
}

console.log("작업 시작");
work((ms) => {
  console.log("작업 종료");
  console.log(ms + "ms 소요.");
});
console.log("다음작업");

결과

위의 소스 중 콜백이라고 주석이 된 부분을 설명하자면

콜백 함수란 함수 타입의 값을 파라미터로 넘겨줘 파라미터로 받은 함수를 특정 작업이 끝나고 나서 호출하는 것을 말한다.

즉 위의 코드를 정리하자면 setTimeout을 사용하여 동기 진행을 비동기 진행으로 바꿔주고, 해당 작업이 모두 종료되었을 때 작업이 끝났음을 알려주는 것이다.

 

작업의 순서를 간단하게 정리하자면

1. 작업 시작

2. work 함수 실행

3. function 실행

4. for문에 루프가 돌아가기 시작(백그라운드)

5. console.log에 찍혀있는 "다음작업" 실행

6. 4번의 루프가 모두 종료되면 work안에 등록한 함수가 처음에 호출될 때 callback 파라미터를 받아 왔었기 때문에 작업이 끝나고 나서 callback()이 호출된다.

7. 끝

 

 

 

참조 : https://velog.io/@yejinh

자바스크립트 비동기 처리 방식

참조 : https://learnjs.vlpt.us/basics/06-object.html