[JavaScript] callback / promise / async await

 

자바스크립트에서 사용하는 콜백 (callback) 함수와 콜백함수를 간결하게 보여주는 promise,

promise의 .then 지옥을 벗어나게 해주는 async await에 대해 정리해본다.

 

 

 

비동기 처리란 무엇인가

비동기라는 말을 알기 위해서 동기의 뜻을 알아야한다. 자바스크립트는 맨위에 있는 코드부터 시작해서 아래의 코드까지 차례차례 순서대로 실행이 된다. (= 이를 동기적 처리라고 부른다.)

때문에 무거운 데이터 처리를 하는 코드를 실행하는 경우 시간이 오래 걸리게 되고, 아래에 있는 코드들이 실행되지 못하고 기다리게 된다. 반면, 비동기 처리는 위에 있는 코드들이 모두 처리될 때까지 기다리지 않고 실행되기 때문에 속도 저하를 방지할 수 있다. (비동기는 언제 실행이 되는 지 정확히 알 수 없다)

동기와 비동기 처리 시각화

 

 

이렇게 비동기 처리를 하기 위해 callback을 사용했다.

 

 

콜백(callback) 함수

콜백함수는 함수 안에서 실행하는 또 다른 함수다. 콜백함수는 꼭 비동기적으로만 사용가능한 것이 아니라 동기적 처리와 비동기처리 둘 다 가능하다.

 

 

동기적 콜백

//synchronous callback
function printNow(print){
  print();
}
printNow(()=>{console.log('하이루')})

 

printNow라는 함수 안에 print라는 함수를 콜백함수로 넣었다.

printNow라는 이름을 가진 함수에 파라미터로 무언가를 넣으면('무언가'의 이름은 print로 지정했다)

무언가가 함수로서 실행되도록 (print();) 했다.

여기서 무언가에 해당하는 print()는 console.log('하이루') 인 것이다.

 

-

 

비동기적 콜백

자바스크립트에서 비동기 함수는 setTimeout함수와 ajax (서버와 데이터를 주고 받고 통신하는 함수)가 있는데 그 중 setTimeout 함수를 사용했다.

//asynchronous callback
function printWithDelay(print, timeout){
  setTimeout(print, timeout);
}
printWithDelay(()=>{console.log('하이루')}, 1000);

 

printwithDelay라는 함수 안에 setTimeout 함수를 콜백함수로 넣었다.

printwithDelay라는 함수는 첫번째 파라미터인 print라는 애와 두번째 파라미터인 timeout이라는 애를 넣으면

setTimeout 함수 안에 print와 timeout을 그대로 넣어서 실행해달라는 함수이다.

setTimeout 함수는 첫번째 파라미터에 있는 함수를 두번째 파라미터에 있는 시간이 지난 후에 실행하도록 하는 함수다.

printWithDelay 함수를 불러와서 실행한 부분 printWithDelay(()=>{console.log('하이루')}, 1000); 을 보면

print가 console.log('하이루') 이고, timeout이 1000 밀리세컨드 (=1초)이다.

따라서 1초가 지나면 콘솔창에 하이루 가 뜨게 된다.

 

 

콜백함수를 이용하면 위와 같이 printWithDelay 함수가 실행되면 setTimeout 함수가 실행되세요.

라고 조건을 걸 수 있는 것이다.

그렇다면 이러한 콜백함수 안에 또 다른 함수를 넣고 (콜백함수) 그 안에 또 다른 함수를 넣고 (콜백함수) 그 안에 또 다른 함수를 넣고, 그 안에 또 다른 함수를 넣으면 코드가 어떻게 보일까

 

 

callback 지옥