JS - 비동기와 동기?

서론

JS에서 코딩을하다보면 내가 예상한 것과 다른 결과가 나올때까 있었을 것이다.
그 이유는 아마 동기와 비동기의 개념에 대해서 몰라서 그랬을 가능성이 크다.
오늘은 JS에서 어떻게 코드를 처리하는지 알아보자.

동기? 비동기?

JS에 대해서 인터넷에 검색해보면 동기처리와 비동기처리에 대해서 많은 내용이 나온다.
여기서 동기와 비동기는 무엇을 뜻하는 단어일까?

동기 처리

동기 처리방식이란 코드를 위에서부터 아래로 읽어내려가며 위의 작업의 처리가 끝난 뒤 아래로 내려가 다시 작업을 수행하는 방식이다. 즉 앞의 작업이 끝나지 않을 경우 뒤의 작업으로 넘어가지 않는다.

비동기 처리

비동기처리란 작업을 처리하는 시간동안 기다리지않고 다음 작업을 다른곳에서 처리하는 것을 말한다.
처리가 끝난 작업의 결과부터 나오기때문에 작업을 시작한 순서와 결과가 나오는 순서가 일치하지 않는 경우가 많다.

JS는 싱글 스레드?

JS는 싱글 스레드 방식으로 한번에 한개의 작업밖에 처리하지 못한다.
그렇다면 여러개의 작업을 동시에 처리할 수 있는 멀티스레드에 비해서 안좋은게 아닌가? 라고 한다면 꼭 그런것은 아니다.
멀티스레드에서 발생하는 문제에 대해서 신경 쓰지 않아도 되기때문이다.

그렇다고 싱글 스레드로 하나의 작업씩 처리해 간다면 분명 성능적인 측면에서 문제가 생길게 분명하다.
그렇기에 JS에서는 비동기 처리를 해주어야한다.

Call Back

JS를 비동기 처리해주기 위한 방식 중의 하나 중 콜백 함수가 있다.
콜백함수는 우리가 평상시에도 많이 사용하는 방식중에 하나로 대표적으로 setTimeOut, forEach와 같은 것들이 있다.
또한 함수 자체를 파라미터로 전달하여 함수가 끝날때 전달받은 함수를 실행시키는 방식도 Callback 함수중 하나이다.

Promise

우리가 비동기처리를 하기 위해 꼭 알아야하는 개념이다.
코드를 보다보면 new Promise(~) 를 리턴시키고 .then(~)으로 다음 함수를 실행시키는 것들 본적이 있을 것이다.
이처럼 Promise 내부에서 resolve 혹은 reject를 return 시켜 그것이 확인 되면 다음 함수를 실행시키는 방식이다.

async, await

async와 await 함수는 위의 promise를 좀 더 사용하기 간편하게 만든 것이다.

const a = async function(){~~} 처럼 함수 선언 앞에 async를 붙이는 것으로 사용할 수 있다.
async의 특징은 Promise를 return하지 않아도 자동으로 promise로 return 된다는 것이다.
await는 async 함수에서 promise가 return될 때 까지 기다리는 기능을 한다. 사용법은 await a() 만 쳐주면 된다.

마치며

오늘은 간단하게 비동기와 동기의 개념과 JS에서 비동기 처리를 하는 여러가지 방식에 대해서 알아보았다. 위에서 말한 Callback, Promise, Async/Await 에 대해서는 다른 게시물에서 자세하게 다루도록 하겠다.