Javascript

동기적, 비동기적 synchronous, asynchronous

변기원 2021. 12. 14. 00:43

자바스크립트는 동기적이다. 

호이스팅이 된 이후부터 우리가 코드를 작성한 순서대로 하나하나 동기적으로 실행된다.

호이스팅이란 var변수선언이나 함수선언들이 제일 위로 올라가는 것.

 

동기적이라는 말이 무슨말이냐..

한 작업이 실행되는 동안 다른 작업을 멈춘채로 유지하고 자신의 차례를 기다리는 것. 이라고 하는 글을 봤는데 

synchronous(동시에 발생[존재]하는) 라는 영어단어와 뭔가 맞지 않는다고 생각했다.

이런 코드가 동시에 발생한다고 볼수는 없지 않을까?

사람인 내가 사람의 눈으로 보기엔 동시에 나오지만 콘솔에 1,2,3 순서대로 출력된다는 자체가 뭔가 1,2,3 순서대로 작동하고 있다는 생각이 든다. 동시에는 아닌 것 같다. 동기적 이라는 말을 동시라는 뜻으로 이해하면 오해가 생길 수 있기 때문에.

 

검색을 하다가 Evan moon 님의 블로그에서 적당한 글을 찾았다.

https://evan-moon.github.io/2019/09/19/sync-async-blocking-non-blocking/

 

동기(Synchronous)는 정확히 무엇을 의미하는걸까?

이번 포스팅에서는 I/O와 네트워크 등 전반적으로 다양한 모델에서 사용하는 개념인 가 정확히 무엇을 의미하는 것인지, 그리고 동기 방식과 비동기 방식의 차이에 대해서 한번 이야기 해보려고

evan-moon.github.io

동기적,비동기적이라는 말은 어려웠지만, 그 존재이유는 더 쉽게 이해할 수 있었다.

30초 걸리는 작업을 기다리느라 멍하니 있으면 로딩시간도 오래걸리고 고객이 떠나기 때문이다.

그래서 30초 걸리는 작업은 잠시 비동기적으로 실행되게 놔두고, 그동안 다른 작업을 먼저 수행하는게(비동기적으로) 효율적이고 빠르다.

작업을 잠시 놔두는 공간을 정확히 이해하려면. call stack, task queue, event loop등의 개념을 이해해야하는 것 같다.

이것은 다음에 공부하기로 하고 일단은 비동기적 처리의 존재이유와 장점에 대해서만 생각해보고 넘어가자.

드림코딩엘리님(유튜브) 강의자료 

이런 코드의 경우 호이스팅에 의해 함수의 선언은 모두 위로 올라간다.

그래서 콘솔에 출력되는 모습은 1 / 3/ hello / 2 / async callback

비동기적 실행이라는 단어를 많이 들어서 궁금했던 주제라 재미있었다 :)

내일은 콜백지옥을 만들어보잫ㅎㅎㅎ

 

추가내용

실제로 코딩을 해보니 비동기처리가 무조건 효율적이고 좋은건 아니고 비동기 처리를 해야할 때가 있습니당.ㅎㅎ 

아래는 call stack, task queue, event loop등의 개념을 공부하고 부트캠프에서 발표한 내용입니다.

 

https://pungwa.tistory.com/72?category=1012071 

 

동기&비동기 / 발표자료

https://youtu.be/8-MiztthUnc 참고자료: https://youtu.be/8aGhZQkoFbQ

pungwa.tistory.com