[JavaScript] 비동기처리 , 동기처리 정리

중요) 자바스크립트는 항상 동기식 처리 (synchronous)

 

자바스크립트 공부나 일을할때 무조건 한번이상 들어봤던 비동기처리 , 동기처리에 대해서 쉽게 정리 해보려고한다.

 

우선 비동기처리를 알아보기전에 동기식처리가 무엇이냐면 한번에 코드를 한줄씩 위아에서 아래로 차레로 실행이 된다는 것이다.

 

바로 예제를 보자

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

이렇게 콘솔창에 출력해보면 예상대로 1,2,3 위에서 아래로 차례대로 출력이 된다.

어렵게 생각할거없이 , 자바스크립트는 앞서 말했다시피 한번에 코드를 한번에 처리한다. 이걸 전문용어로 동기처리(synchronous) 라고 한다.

 

그렇다면 아래 코드는 어떻게 출력이 될까 한번 보면,

console.log(1);
setTimeout(function(){}, 1000);
console.log(2);

우선 setTimeout 로 1초라는 시간을 텀을 주고 2가 출력이 될줄 알았지만 , 바로 1과,2를  콘솔창에 출력한다.

자바스크립트의 실행머신인 브라우자는 setTimeout 라는 특정코드를 일단 다른곳에 저장 후 재낀 다음에 다른 코드부터 실행 하려고 한다.

이런 처리방식을 바로 비동기(asynchronous)라고 한다.

 

그럼 여기서 다른곳에 저장을 할수있는 코드들은 정해져있습니다.

setTimeout, addEventListener, fetch ,axios , ajax 등등.. 

공통점이 다 콜백함수로 이루어져있는 함수다.

 

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

위에 코드는 1 과 3이 같이 찍힌 후 1초 있다가 2가 찍힐것이다

 

콜백함수를 적극적으로 활용 하라고 했지만 , function 안에 function 또 function... 코드가 길어지게 되면 콜백지옥에 빠질것이다.

 

콜백지옥을 방지하기 위해 es6문법인 promise를 쓰면 될것같다.

 

fetch api나 데이터를 get 할때 비동기 처리로 이루어지니 비동기처리식의 이론 및 개념은 중요한것같다.