[JavaScript] 동기 vs 비동기

동기(Synchronous) 란?

말 그대로 동시에 일어난다는 뜻으로, 작업에 대한 요청과 결과가 동시에 일어난다는 약속이다.

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

// 결과: 1 2 3

위의 예제처럼 console.log('1')에 대한 작업이 요청되면 그 결과가 주어지고, 이후 console.log('2')에 대한 작업이 요청되는 방식이다.

비동기(Asynchronous) 란?

작업이 동시에 일어나지 않는다는 뜻으로, 작업에 대한 요청과 결과가 동시에 일어나지 않을 거라는 약속이다.

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

// 결과: 1 3 2

위의 예제처럼 setTimeout()에 대한 작업이 요청되지만, 그 결과가 동시에 반환되는 대신 console.log('3')의 작업에 대한 결과가 반환되는 방식이다.

 

동기방식의 경우 요청에 따른 결과가 순서대로 반환되는 특성 상 직관적이고 단순한 설계가 가능하다. 하지만 통신, DB접근과 같이 오래 걸리는 작업의 경우 이후 작업들이 대기해야 하는 단점이 있기에 적절한 방식을 선택하여 작성해야 한다.

 

JavaScript에서의 동기와 비동기

JavaScript는 기본적으로 싱글쓰레드 언어이다. 이러한 자바스크립트에서 비동기 작업이 가능한 이유는 브라우저의 Web API 덕분이다. Web API는 웹 브라우저에서 제공하는 기능들로 setTimeout(), fetch()와 같은 비동기 메소드들을 제공한다. JavaScript 엔진은 이러한 비동기 함수들을 만나면 브라우저로 넘겨 별도의 브라우저 쓰레드에서 작동시킨다. 이를통해 싱글쓰레드인 JavaScript에서 비동기 프로그래밍을 가능하게 한다.

 

 

---

출처

자바스크립트 비동기 프로그래밍 #1 | 동기 vs 비동기