# 동기 처리 vs 비동기 처리

### 동기(sync) 처리 <a href="#sync" id="sync"></a>

![](https://poiemaweb.com/img/block_nonblock.png)

순차적으로 일을 스스로 끝내 나가는 방식(직렬적으로 작업 수행) 즉, 작업이 순차적으로 실행되어, 어떤 작업이 수행 중이면 다음 작업은 대기하게된다.

![](https://3919143544-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M26jG1uJ-xuMP0XPOri%2F-M26jI7aMnfiDMQcEU0Y%2F-M26jTAmwz5MX1mC4yUA%2Fsynchronous.png?generation=1583899099403533\&alt=media)

```javascript
function func1(){
  console.log('func1');
  func2();
}
function func2(){
  console.log('func2');
  func3();
}
function func3(){
  console.log('func3');
}
func1();
```

비동기(async) 처리 해야 할 일을 위임하고 기다리는 방식으로 병렬적으로 작업을 수행한다. 즉, 작업이 종료되지 않은 상태라도 대기하지 않고 다음 작업을 실행한다.

![](https://3919143544-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M26jG1uJ-xuMP0XPOri%2F-M26jI7aMnfiDMQcEU0Y%2F-M26jTAomLrbSkUEulF-%2Fasynchronous.png?generation=1583899099631166\&alt=media)

```javascript
function func1(){
  console.log('func1');
  func2();
}
function func2(){
  setTimeout(function(){
      console.log('func2');
  },0);
  func3();
}
function func3(){
  console.log('func3');
}

func1();
```

## 참조페이지

* [https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/](https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/)
