Javascript : 동기 실행과 비동기 실행

1. 비동기 실행

 

1) 개요

console.log('Start!');

fetch('<https://www.google.com>')
  .then((response) => response.text())
  .then((result) => { console.log(result); });

console.log('End');

여기에는 2개의 콜백이 있다.

(1) (response) ⇒ response.text()

(2) (result) ⇒ { console.log(result); }

fetch 함수가 리퀘스트를 보내고,

서버의 리스폰스를 받게 되면 그때서야 이 콜백들이 순서대로 실행된다.

 

2) 실행 순서

이를 바탕으로, 전체 코드의 실행 순서를 다시 정리하자면

1. console.log('Start');

2. fetch 함수(리퀘스트 보내기 및 콜백 등록)

3. console.log('End');

4. 리스폰스가 오면 2. 에서 then 메소드로 등록해뒀던 콜백 실행

이렇게 된다.

 

 

이렇게 특정 작업을 시작(리퀘스트 보내기)하고

완벽하게 다 처리(리스폰스를 받아서 처리)하기 전에,

실행 흐름이 바로 다음 코드로 넘어가고,

나중에 콜백이 실행되는 것을 '비동기 실행'이라고 한다.

 

2. 동기 실행

 

1) 개요

한번 시작한 작업은 다 처리하고 나서야, 다음 코드로 넘어가는,

실행을 '동기 실행'이라고 한다.

 

2) 실행 순서

만약 이 코드에서 fetch 함수가 비동기가 아닌

동기 실행되는 함수였다고 가정한다면 실행 흐름은

1. console.log('Start');

2. fetch 함수(리퀘스트 보내기)

3. 리스폰스가 올 때까지 코드 실행이 잠시 '정지'되고, 리스폰스가 오면 필요한 처리 수행

4. console.log('End');

이다.

 

동기 실행은 한번 시작한 작업을 완료하기 전까지 코드의 실행 흐름이 절대 그 다음 코드로 넘어가지 않는다.

일단 시작한 작업을 완벽하게 처리하고 난 다음에야 그 다음 코드로 실행 흐름이 넘어간다.

따라서 동기 실행의 경우 코드가 보이는 순서대로 실행된다.

 

이와 다르게 비동기 실행은 한번 작업을 시작해두고,

그 작업이 완료되기 전이더라도 then 메소드로 콜백만 등록해두고,

코드의 실행 흐름이 바로 그 다음 코드로 넘어간다.

그리고 추후에 특정 조건이 만족되면 콜백이 실행됨으로써 해당 작업을 완료한다.

 

 

3. 비동기 실행을 하는 이유

비동기 실행에서는 코드가 꼭 등장하는 순서대로 실행되지 않는다.

그래서 코드를 해석할 때 주의해야 한다.

 

그렇다면 '비동기 실행'이라는 건 왜 존재할까?

 보통 '동기 실행'에 비해, 동일한 작업을 더 빠른 시간 내에 처리할 수 있기 때문이다.

 

방금 전 fetch 함수가 '동기 실행'된다고 가정했을 때,

fetch 함수가 실행되고 리스폰스가 올 때까지 기다린다는 건

리스폰스가 올 때까지는 아무런 작업도 할 수 없다는 뜻이다.

즉, 그만큼 시간을 낭비하게 된다.

 

하지만 만약 '비동기 실행'이라면 일단 리퀘스트 보내기,

콜백 등록까지만 해두고,

바로 다음 작업(console.log('End');)을 시작함으로써

시간을 절약할 수 있다.

 

 

이미지 상단은 fetch 함수가 동기 실행된다고 가정했을 때의 경우,

이미지 하단은 fetch 함수가 비동기 실행되는 실제의 모습을 의미한다.

 

"동기 실행"에서는 모든 작업이 순차적으로 수행되고,

"비동기 실행"에서는 리스폰스를 기다리는 시간 동안 그 이후의 작업을 미리 처리한다.

그래서 "비동기 실행"이 최종 작업 종료 시간이 더 짧다는 것을 알 수 있다.

(물론 실제로는 "비동기 실행"의 경우에는 콜백을 등록하는 시간적 비용이 존재하지만

일단은 이해를 위해서 이런 부분은 생략하고 생각하자.)

 

참고로, 현재 보라색 박스로 나타낸 fetch 함수 바로 다음 코드의 실행이

지금보다 더 오래 걸리는 작업이라고 가정한다면,

"비동기 실행"의 상대적인 작업 효율성은 더 올라간다.

보라색 영역이 둘 다 더 길어진다고 생각해보면 이해할 수 있다.