동기 / 비동기 개념 이해

임재희·2022년 3월 1일
0

study

목록 보기
5/10

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

동기는 요철한 결과를 시간이 얼마나 걸리던지 그 자리에서 진행하는 것이다.

ex) 놀이동산의 대기줄. 놀이기구를 타기 위해 한번 줄 서면 탈 때까지 순차적으로 기다려야 한다. / 카페에서 음료를 주문할 때 여러명이 기다려도 한명만 주문 받고 음료를 만들어 주고 다시 한명만 주문받고 음료를 만드는 방식

console.log를 이용해서 차례대로 1,2,3을 찍어보자

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

그러면 순차적으로 1,2,3이란 결과가 나올 것이다.


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

비동기는 요청한 결과를 그 자리에서 주어지지 않고 나중에 결과가 주어지면 보여주는 방식이다.

ex) 카페에서 음료를 시킬 때 여러명 주문을 한번에 받고 추후에 순차적으로 음료를 만들어서 주는 방식

위와 비슷하지만 이번에는 2번 순서에 setTimeout을 추가해보자

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

그러면 결과는 위와 다르게 1,3,2 순서대로 찍힐 것이다.

왜 이런 결과가 나오는 것일까?
우선 자바스크립트는 싱글스레드이기 때문에 한줄로 쭉 코드를 읽는다. 그럼 보통은 1을 찍고 setTimeout에서 2를 처리하는 것을 기다리고 그 다음 3을 찍는다고 생각할 것이다. 하지만 대표적인 비동기 처리함수 setTimeout()을 사용하면 web API가 함수를 호출함과 동시에 이를 위임해서 비동기적이며 밀티 스레드처럼 사용이 가능하다. 때문에 위와 같이 순서가 바뀌어서 나오는 것이다.


동기 / 비동기 장단점

동기는 매우 간단하고 직관적으로 처리하는 대신 결과가 나올 때까지 다른 것을 못하고 대기해야 한다.
비동기는 동기보다 복잡하다는 단점이 있지만 결과가 나올 때까지 다른 것을 할 수 있기 때문에 자원을 효율적으로 활용할 수 있다는 장점이 있다.

profile
하루하루는 성실하게 인생 전체는 되는대로✏️

0개의 댓글