[JS] 자바스크립트 비동기처리란? (1)

자바스크립트를 다루면 무조건 보게 되는 비동기처리!

잊지 말자는 뜻에서 포스팅한다...

 

📌  비동기(Asynchronous) 란?

---

 

이미지 출처: https://dreamcoding.tistory.com/19

 

쉽게 얘기하자면,

동기는 차근차근 처리하는 것이고 비동기는 한꺼번에 여러개를 수행할 수 있는 것이다.

즉 더 쉽게 얘기하자면 비동기는 멀티가 되는 것이다. 

 

출처: 네이버사전 https://terms.naver.com/entry.naver?docId=815502&cid=42344&categoryId=42344

 

그래서 만약, 프로그램을 짤 때 동기식으로 짠다면

동기 코드는 한 줄씩 차례대로 실행된다.

즉, 한 작업이 완료될 때까지 다음 작업이 시작되지 않는다.

 

이렇게 말로 들으면 이해되겠는데... 한번 코드를 보며 이해해보자!

 

😤 코드로 이해하기

---

 

function synchronousExample() {
	console.log('첫 번째 시작');
    for (let i = 0; i < 1e9; i++) {}  
    console.log('첫 번째 완료');

    console.log('두 번째 시작');
    for (let i = 0; i < 1e9; i++) {} 
    console.log('두 번째 완료');
}

synchronousExample();

 

이렇게 하면 결과값은

첫 번째 시작
첫 번째 완료: 첫 번째 작업 결과

두 번째 시작
두 번째 완료: 두 번째 작업 결과

 

자바스크립트에서 늘상 보던 것이기 때문에 동기 코드를 보기 전까지는 차이점을 구분하기 어려울 수 있다. 

다음 글에서 async 와 await 를 보면서 비동기처리에 대해서 마저 이해해보도록 하자!

 

 

 

[JS] 자바스크립트 비동기처리(2) - async / await 이해하기