[JS] 동기, 비동기 처리

JS 를 공부하다 보면 빠질 수 없는 용어 중에 하나가 동기, 그리고 비동기 처리이다. 여러 강의들을 듣다보면 작성자와 같은 비전공자들 입장에선 이런 용어가 계속 나오다 보면 블랙홀에 빠지기도 쉬우므로...복습 차원 겸 간단한 글을 작성하고자 한다.

---

1. 비동기 (Asynchronous)

비동기 처리는 어떠한 프로그램이 병렬적 즉, 동시다발로 이루어지는 것을 의미한다.

console.log(1);
console.log(2);
setTimeout (function() {console.log(3);} , 5000);
console.log(4);

결과: 1, 2, 4, 3
위의 코드를 실행시켰을 때, 어떤 결과가 나올까?
아마도 1, 2 가 순차적으로 나온 뒤 4, 그 이후 5초 뒤에 3이 출력될 것이다. 이렇듯, 순서와 상관없이 자신만의 작업을 진행하는 것을 비동기식 처리라고 한다. 동시에 실행이 되기 때문에 빠르게 진행이 되지만 그만큼 순서가 확실하지 않아 다소 혼란스러운 일들이 발생하기도 한다.

 

2. 동기 (Synchronous)

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

결과: 1, 2, 3, 4
비동기에 비해 동기는 매우 쉽다! 동기는 주어진 명령을 순차적으로 실행한다. 하나가 끝나면, 그 다음 일로 넘어가는 직렬구조로 반대로 말하자면 하나가 끝나기 전에는 다음 단계로 넘어갈 수 없다는 뜻이기도 하다.

3. 정리

🍎 비동기

• 동시에 실행 (병렬)
• 속도 빠름
• 실행순서 확실하지 않음

🍋 동기

• 순서대로 실행 (직렬)
• 앞의 일이 완료 될 때까지 기다려야 함
• 실행순서의 예상이 쉬움