동기,비동기(async),event loop의 이해# java script

1.동기와 비동기

만약 작업을 동기적으로 처리한다면 작업이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없습니다. 그리고 작업이 끝나야 비로소 그 다음 예정된 작업을 할 수 있죠. 하지만 이를 비동기적으로 처리를 한다면 흐름이 멈추지 않기 때문에 동시에 여러 가지 작업을 처리할 수도 있고, 기다리는 과정에서 다른 함수도 호출할 수 있습니다.

 

동기(Synchronized)란 위에서 아래로 순차적으로 코드를써놓은 순서대로 화면에 표시되는것을 말한다. 좀더 자세하게말하면 맨처음 코드가 실행되기전까진 그아래함수가 실행되지않는다.

콘솔창에

function firstFunction() {console.log(2)}

function firstFunction() {console.log(4)}

function firstFunction() {console.log(3)}

2

4

3

비동기(Asynchronous)란  흐름을 멈추지않고 모든작업을 동시에 실행한다로 일단 간단하게 이해하고 넘어가자

자세한 설명은 코드를 설명하면서 알려쥼.

function work(callback) {
  setTimeout(() => {
    const start = Date.now();
    for (let i = 0; i < 1000000000; i++) {}
    const end = Date.now();
    console.log(end - start + 'ms');
    callback();
  }, 0);
}

console.log('작업 시작!');
work(() => {
  console.log('작업이 끝났어요!')
});
console.log('다음 작업');

위 코드를 실행하게 되면

 

작업시작

다음작업

작업이 끝났어요

마찬가지로 위에서 아래로 내려가지만 중간에  work()함수를 실행하게 되면 함수를 돌지않은 단순한 작업이 먼저 진행되고 work()함수가 마지막에 실행되게된다. 자 우리는 그냥 단순하게 아 내려가다가 함수를 만나면 다른애부터 먼저 실행하고 함수를 마지막에 처리하는구나라고 이해한다. 물론 그것도 맞지만 이 작동원리를 컴퓨터의 관점에서 이해하기위해

2.Event loop라는 녀석을 공부해보자

javascript 작동원리

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");

bar();
foo();
baz();

 

나는 이그림들만 보고는 이해를 못했다. 내가 추가적으로 공부한내용을 바탕으로 설명을 시작해드립니다.

 자바스크립트는 싱글 쓰레드 렝귀지라고해서 한번에 하나밖에 처리를 못한다 물론 한번에 여러개를 처리를 하는 방법이 존재한다.(이건 나중에 설명하겠다.)

자 ok 그렇다면 처리가 되는공간은 어디인가?

CALL STACK [내 코드 처리하는 공간]이다. 한번에 하나밖에 처리못한다 기억해놔라. [싱글스레드렝귀지]

자 여기서 위에 코드를보면 바로 툭툭툭하고 나오는코드가아니라 중간에 오래걸리는 코드(setTimeout,Ajax,EventListener)들은

1.(WEB API=주문하면 내주문이 대기하게되는 대기실임)로 갔다가

2.QUEUE[(줄서는곳)로 갔다가

3.CALL STACK(처리해서 받는곳)안이 비게되면 실행된다.

자 처리되는과정은 이렇게 이해했다 그렇다면 만약에

엄청 오래걸리는 주문을 .CALL STACK 으로 보낸다음 이주문을 엄청나게 많이한다고 해보자

그결과, 이런 창이 뜨거나 사이트가 버벅이게된다.

이 작동원리를 바탕으로 몇가지 교훈을 얻을 수 있다.

1.CALL STACK을 바쁘게만들지마마십쇼

2.QUEUE에 줄을 많이 세우지마십쇼 ex)버튼을 눌렀을때 엄청나게 많은게 실행되게 한다던가

 

자 마지막으로 자바스크립트는 보통 싱글스레드렝귀지 즉 한번에 하나밖에 처리못하는 동기적 언어다

그치만 비동기적으로 사용할려면 바로 대기실로 보내서 사용하는친구들(setTimeout,Ajax,EventListener)을

사용하면 동시에 처리를 할 수있게 할 수있다.