[js] 동기적(synchronous)? 비동기적(Asynchronous)?

JavaScript에서 동기적 / 비동기적의 차이 및 예제, 비동기적 실행 방식 등

 

자바스크립트(Javascript)는 동기적이다.
호이스팅(hoisting) 후 코드 블록을 순서대로 실행한다.

 

호이스팅이란?

2023.02.04 - [개발 용어 정리] - [js] hoisting(호이스팅)

[js] hoisting(호이스팅)

 

 

동기적(Synchronous)이란?

1. 어떤 작업을 요청했을 때 그 작업이 종료되고 다음 작업을 수행하는 방식이다.

2. 프로그래밍 코드에서 특정 코드를 수행하고 아래줄의 코드를 수행하는 것을 의미한다.

3. 코드가 써있는 순서대로 실행한다고 생각면 편하게 이해할 수 있다.

4. 진행방향이 일방향이기 때문에 속도가 느리지면 에러가 나면 추적하기가 쉽다.

 

 

비동기적이란(Asynchronous)이란?

1. 순서대로 진행하는 것이 아니라 한번에 여러개가 진행되는것(병렬 수행)과 마찬가지다.

2. 주로 api요청, 파일읽기, 암호화, 복호화 등에서 자주 사용한다.

3. 위와 같은 예제를 병렬적으로 실행하고 완료하는 데 지연시간이 발생한다.

4. 코드가 위에서 아래로 읽었을 때 지연시간때문에 순서대로 실행되지 않는다.

5. 동기적 진행보다 속도가 빠르다.

 

 

비동기 처리에는 3가지 방법이 있다.

1) callback

2) Promise 

3) async .. await

 

 

동기적인(synchronous) 코드

console.log(1);
console.log(2);
console.log(3);

 

출력값

1
2
3

 

비동기적인(asynchronous) 코드 (callback 함수 사용)

console.log(1);

setTimeout(function(){
  console.log(2);
}, 1000);

console.log(3);

 

출력값

1
3
2

 

동기적인(synchronous) callback

function printImmediately(params){
  params();
 }
 
 printImmediately(() => console.log('hi'));

 

 

비동기적인(asynchronous) callback

function printPending(params, timeout){
  setTimeout(params, timeout);
 }
 
 printPending(() => console.log('hi after 2sec'), 2000);

 

 

* 주의해야할 점

1. 동기 / 비동기 실행은 멀티 스레딩과 관련이 없다.

하나의 스레드에서도 비동기 실행을 할 수 있고 멀티 스레드에서도 동기적 실행을 할 수 있다.

 

2. 동기 / 비동기 실행에서 스레드 혹은 코어의 개수가 중요한 것이 아니다.

서브루틴간의 실행순서가 정해져 있는지가 중요하다.