Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

몽탁이의 개발일기

자바스크립트 동기와 비동기 본문

Javascript 정리

자바스크립트 동기와 비동기

몽탁 2020. 9. 10. 17:55

자바스크립트에서 비동기적 처리가 가능한가?

 

자바스크립트는 싱글 쓰레딩 언어이기 때문에 비동기적으로 처리가 불가능합니다.

 

하지만 브라우저의 API(브라우저 API 중에 비동기 기능을 가진 API) 들을 이용하거나 

 

자바스크립트 개발 환경을 관리해주는 이벤트 루프로 인해 비동기적으로 처리하는 것처럼 만들 수 있습니다.

 

위의 이벤트 루프 관해서는 나중에 좀더 자세하게 다루겠습니다.

 

 

동기와 비동기의 차이

 

동기적 처리

 

동기적인 처리

동기적인 처리는 한 문장씩 수행이 되면서 

 

한 문장의 수행이 끝나고 다음 문장이 실행되는 순서를 지키면서 실행이 됩니다.

 

 

비동기적 처리

 

비동기적인 처리

비동기적 처리는 위 그림에서 브라우저의 API인 setTimeout 함수를 이용하여 비동기적인 처리가 되었습니다.

 

setTimeout 함수는 콜백 함수와 정수를 인자를 받게 되는데

 

2번째 인자로 받은 정수를 ms 단위로 계산하여 해당 시간 뒤에 콜백 함수를 실행하게 됩니다.

 

그래서 결과가 world가 2번째로 출력이 되지않고 2초 뒤에 world를 출력하게 된 것입니다.

 

즉, 비동기적으로 처리한 함수는 동기적으로 실행되는 순서와 상관없이 따로 수행을 하게 됩니다.

 


결론 )

 

동기와 비동기의 차이는 여러 가지 일을 한 번에 처리가 가능한가 아닌가로 볼 수 있습니다.

 

그렇다면 비동기가 동기보다 한번에 처리하여 빠르니까 비동기 위주로 쓰자는 생각을 할 수 있습니다.

 

하지만 비동기적 처리는 안전하지 못한 상황이 생길 수 있습니다.

 

동시에 작업을 진행하다가 두 함수가 같이 사용하는 변수가 존재하는데

 

이 변수가 함수에서 작업 중 값을 바꿔 버리게 되면 치명적인 오류가 발생할 수 있습니다.

 

그렇기 때문에 무분별한 비동기적 처리는 매우 위험한 일입니다.

 

즉, 동기와 비동기를 상황에 맞게 사용하는 것이 중요합니다.

 

'Javascript 정리' 카테고리의 다른 글

async와 await  (0) 2020.09.15
자바스크립트 Promise  (0) 2020.09.10
JSON 이란?  (0) 2020.09.08
자바스크립트 배열의 유용한 APIs  (0) 2020.09.07
자바스크립트의 객체 복사  (0) 2020.09.02