동기/비동기처리와 콜백함수

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

 

동기식 처리가 뭐냐면 한번에 코드 한줄씩 차례차례 실행된다는 소리입니다. 

자바스크립트를 실행하는 웹브라우저는 stack이라는 코드 실행 공간이 있는데

거기서 코드를 한줄한줄 차례로 실행합니다. 

 

 

 

 

콜백함수를 이용한 순차적 실행

 

그럼 아까 예시로 돌아와서, 자바스크립트에서 1초 후에 코드를 실행하고 싶으면 어떻게 하죠?

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

저렇게 setTimeout 안에 콜백함수안에 코드를 짜면 된다고 배우지 않았습니까.

맞습니다. 

그러면 콘솔창에 1과 3이 먼저 빠르게 출현하고

그 다음 1초 후에 2라는 숫자가 출현합니다. 

 

 

자바스크립트는 비동기상황 등에서 코드를 순차적으로 실행하고 싶을 때 콜백함수를 적극 활용합니다. 

 

 

콜백함수 디자인하는 법  

 

예를 들면 순차적으로 실행하고 싶은 함수가 두개 있다고 칩시다. 

그럼 이렇게 코드짜면 될까요?

function 첫째함수(콜백){
  console.log(1);
  콜백();
}

function 둘째함수(){
  console.log(2)
}

첫째함수(둘째함수);

 

콜백대신 쓸 수 있는 Promise 디자인 패턴을 적용하면 어떻게 되냐면

첫째함수().then(function(){
   그 담에 실행할거
}).then(function(){
   그 담에 실행할거
});