[Javascript] 비동기함수(1) - Event Loop

코드는 위에서 아래쪽으로 순차적으로 실행된다.

console.log('첫번째');
console.log('두번째');
console.log('새번쨰');

콘솔에 당연히 순서대로 찍힐것이다. 하지만, web api 중 일부를 사용하다보면 코드가 순서대로 실행되지 않는경우를 볼수가 있다.

바로가기 : [ Javascript WEB API ]

console.log('1');
window.setTimeout(function(){
    console.log('1초 후 실행'), 1000
})
console.log('3');

위의 코드는 web api중 하나인 setTimeout이라는 매서드를 사용한것이다. 코드의 실행시간을 정할수가 있는 기능을 가지고 있다.

1  
3  
1초후 실행 

이 실행결과가 될것이다.

console.log('1');
window.setTimeout(function(){
    console.log('바로실행'), 0
})
console.log('3');

이 코드는 실행순서가 어떻게 될까? setTimeout에 0 을 주었으니 순서대로 실행이 될까?

1
3
바로실행

실행해보면 위의 결과가 나온다.

자바스크립트는 event loop라는 방식으로 코드를 실행한다.

바로가기 :[ event-loop ]

위 사이트로 가면 자바스크립트가 어떤식으로 코드를 실행시키는지 직관적으로 알 수 가있다.
(정말좋은 사이트같다.)

위의 사이트를 봤다면 setTimeout이 어떤식으로 동작하는지 알수 있었을 것이다.

---

setTimeout은 web api라는곳으로 따로 빠지고

해당 시간후 callback queue라는곳에 들어가고

모든 코드들이 실행되면 다시 call stack으로 들어가서

정상적으로 setTimeout의 callback함수가 실행되는것을 볼 수 있을 것이다.

---

이 원리가 비동기함수가 작동하는 원리의 전부이다.

위의 코드가 시간에 0을 주었음에도 마지막에 찍히는 이유인것이다.

이 원리만 잘 알면 비동기 함수를 사용할때 어떤점을 주의해야 할지 알 수 있다.

다음 포스팅은 비동기 함수에서 처리한 값(data)을 어떤식으로 사용해야할지 포스팅 해야겠다.