동기는 요철한 결과를 시간이 얼마나 걸리던지 그 자리에서 진행하는 것이다.
ex) 놀이동산의 대기줄. 놀이기구를 타기 위해 한번 줄 서면 탈 때까지 순차적으로 기다려야 한다. / 카페에서 음료를 주문할 때 여러명이 기다려도 한명만 주문 받고 음료를 만들어 주고 다시 한명만 주문받고 음료를 만드는 방식
console.log를 이용해서 차례대로 1,2,3을 찍어보자
console.log('1');
console.log('2');
console.log('3');
그러면 순차적으로 1,2,3이란 결과가 나올 것이다.
비동기는 요청한 결과를 그 자리에서 주어지지 않고 나중에 결과가 주어지면 보여주는 방식이다.
ex) 카페에서 음료를 시킬 때 여러명 주문을 한번에 받고 추후에 순차적으로 음료를 만들어서 주는 방식
위와 비슷하지만 이번에는 2번 순서에 setTimeout
을 추가해보자
console.log('1');
setTimeout(()=> {
console.log('2');
},0)
console.log('3');
그러면 결과는 위와 다르게 1,3,2 순서대로 찍힐 것이다.
왜 이런 결과가 나오는 것일까?
우선 자바스크립트는 싱글스레드이기 때문에 한줄로 쭉 코드를 읽는다. 그럼 보통은 1을 찍고 setTimeout에서 2를 처리하는 것을 기다리고 그 다음 3을 찍는다고 생각할 것이다. 하지만 대표적인 비동기 처리함수 setTimeout()
을 사용하면 web API가 함수를 호출함과 동시에 이를 위임해서 비동기적이며 밀티 스레드처럼 사용이 가능하다. 때문에 위와 같이 순서가 바뀌어서 나오는 것이다.
동기는 매우 간단하고 직관적으로 처리하는 대신 결과가 나올 때까지 다른 것을 못하고 대기해야 한다.
비동기는 동기보다 복잡하다는 단점이 있지만 결과가 나올 때까지 다른 것을 할 수 있기 때문에 자원을 효율적으로 활용할 수 있다는 장점이 있다.