[JavaScript] 동기와 비동기

 

---

목차

 

1. 동기 (Synchronous)와 비동기(Asynchronous)

2. 동기와 비동기의 장단점

3. 동기적 처리

4. 비동기적 처리

---

 

 

1. 동기 (Synchronous)와 비동기(Asynchronous)

---

동기(synchronous) : 동시에 일어나는

 

동기는 동시에 일어난다는 뜻이다. 요청과 그 결과가 동시에 일어난다는 약속이므로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어저야 한다.

 

 

 

비동기(Asynchronous) : 동시에 일어나지 않는

 

비동기는 동시에 일어나지 않는다는 뜻이다. 요청과 그 결과가 동시에 일어나지 않을 것이라는 약속이다.

 

 

 

 

 

2. 동기와 비동기의 장단점

---

- 동기방식은 설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있다.

 

- 비동기방식은 동기보다 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있는 장점이 있다.

 

 

 

 

3. 동기 실행(Synchronous)

---

console.log("1st");
console.log("2nd");
console.log("3rd");

// '1st'
// '2nd'
// '3rd'

 

동기 실행은 코드가 순차적으로 실행되는 방식이다.

위와 같은 코드를 작성하고 실행해 보면 예상했던 것처럼 1st, 2nd, 3rd가 차례대로 찍히는 것을 알 수 있다.

이처럼 코드가 위에서부터 아래로 내려오면서 하나가 끝나면 다음 코드가 실행되는 방식을 동기적 처리 (Synchronous)라고 한다.

 

 

 

4. 비동기 실행(Asynchronous)

---

비동기 실행은 코드가 순차적으로 실행되지 않고, 다른 작업을 동시에 수행할 수 있는 방식이다. 

 

자바스크립트에서는 콜백이나 프로미스와 같은 매커니즘을 사용해서 비동기 코드를 작성한다. 아래 예제를 통해 비동기 실행 방식을 살펴보자.

 

setTimeout() 메소드를 사용하였고 첫번째 인자는 콜백함수를 사용하였고, 두번째 인자는 지연시간이다.

두번째 인자가 0이기 때문에 바로 실행될 것이라 예상하고 1st, 2nd, 3rd가 찍힐 것이라 예상하였다.

console.log('1st');
setTimeout(() => {
  console.log('2nd');
}, 0);

console.log('3rd');

 

아래의 링크는 콜백함수와 고차함수에 대해 정리된 글이다.

[JavaScript] 고차 함수와 콜백 함수: 
https://codingtoddlerr.tistory.com/207

 

 

 

하지만 결과값은 1st, 3rd, 2nd가 찍혔다.
이는 setTimeout()메소드가 비동기적 API이기 때문이다.

'1st'
null
'3rd'
'2nd'

 

 

위의 코드를 컴퓨터의 입장에서 해석해보면 다음과 같다.

• 첫번째 줄에서 console.log('1st');를 만나고 콘솔에 1st를 찍는다.
• 두번째 줄에서 setTimeout() 메소드를 만나서 해당 매소드가 비동기적 매소드이기 때문에 이를 처리하는 다른 프로그램에 맡긴다.
• 그러고 나서 곧바로 console.log('3rd')를 콘솔에 찍는다.
• setTimeOut() 메소드를 처리하는 프로그램은 비동기적 API를 제외한 모든 코드가 실행 된 이후 결과를 콘솔에 찍는다.

비동기적 코드의 실행 결과는 동기적 코드가 전부 실행 되고나서 값을 반환한다.

 

결론적으로 동기는 디자인이 비동기보다 간단하고 직관적일수 있지만 결과가 주어질 때 까지 아무것도 못하고 대기해야하는 문제가 있다. 

반면, 비동기는 동기보다 복잡하지만 결과가 주어지는데 시간이 걸려도 그 시간동안 다른 작업을 할 수 있어서 보다 효율적일 수 있다.

 

 

 

 

참고

https://velog.io/@daybreak/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC