자바스크립트 동기/비동기 차이점은 무엇일까요?

자바스크립트는 싱글 스레드(single thread) 방식으로 코드를 처리합니다. 스레드란 프로그램이 작업을 완료하는 데 사용하는 하나의 선로 같은 것인데, 각 스레드는 한 번에 하나의 작업만 순차적으로 수행할 수 있습니다. 즉, 하나의 작업이 완료되어야 다음 작업을 실행할 수 있는 구조인 것입니다. 이는 보통 오늘날의 컴퓨터가 멀티 스레드(multi thread)로 동시에 여러 작업을 처리하는 것과 다릅니다.

 

동기적 자바스크립트

앞서 언급한 것처럼 자바스크립트는 싱글 스레드를 사용하기 때문에, 기본적으로 동기적으로 코드를 처리합니다.

const name = "Hwi"
const age = "31"
const nationality = "South Korea"

console.log(name); // -> Hwi
console.log(age); // -> 31

function getNationality(nationality) {
    return nationality;
}

console.log(getNationality(nationality)); // -> South Kroea

위 예시에서 우리는 예상대로 Hwi, 31, South Korea가 차례로 출력되는 것을 확인할 수 있습니다. 즉, 각 코드를 동기적으로 처리하고 있는 것입니다.

비동기적 자바스크립트

비동기적 프로그래밍(asynchronous programming)은 특정 코드의 연산이 끝날 때까지 기다리지 않고, 그동안 다른 코드를 실행하는 것입니다. 예를 들어, 우리가 웹사이트에서 특정 데이터를 다운로드해야 하는데, 해당 파일의 크기가 너무 큰 경우가 있을 수 있습니다. 이때, 모든 작업을 동기적으로 처리한다면 파일이 다운로드 되는 동안 사용자는 가만히 기다려야 할 것입니다. 따라서, 파일이 다운로드 되는 동안 다른 코드를 실행하는 비동기적 방식으로 이를 처리하는 것이 훨씬 효율적입니다.

 

비동기 코드를 구현하는 방법으로는 크게 기존의 콜백(callback)과 보다 새로운 방식인 프로미스(promise)가 있습니다. 여기서는 웹 API의 한 종류인 setTimeout()을 사용한 비동기 처리 예시를 살펴보도록 하겠습니다. 참고로 setTimeout 뿐만 아니라, setInterval, HTTP 요청, 이벤트 핸들러는 비동기 방식으로 작동합니다.

console.log('Hello'); // 첫 번째

setTimeout(function() {
    console.log('World');
}, 3000); // 세 번째

console.log('Hello World'); // 두 번째

위 코드를 실행하면, Hello, World, Hello World가 차례대로 출력되지 않고, Hello, Hello World, World가 출력되는 것을 확인할 수 있습니다. Hello 출력 이후, World가 바로 실행되지 않고, setTimeout() 내부에서 특정 시간 이후에 실행되기로 하고(콜백), 그동안 Hello World가 비동기적으로 처리되었습니다.

 

• 자바스크립트 콜백 함수 설명
• 자바스크립트 프로미스 설명

마치며

자바스크립트는 싱글 스레드를 사용하기에 기본적으로 동기적으로 코드를 처리합니다. 그러나 callback과 promise 등을 사용하여 코드를 비동기로 처리할 수 있습니다.

 

 

참고 자료: Introducing asynchronous JavaScript