javascript 집중 면접 준비

• 동기적 콜백
• 하나의 작업이 모두 종료된 이후에 새로운 작업을 실행하는 방식 (블로킹 발생)

// 동기적으로 3초 마다 배열의 수가 출력된다. (블로킹을 느낄 수 있다.)
[1, 2, 3].forEach((num) => {
  // 콘솔 한번 찍히려면 매번 3초씩 걸린다.
  // 이 함수의 콜백 함수는 동기적으로 호출된다.
  imCallbackFn(() => console.log(num), 3000);
});
function imCallbackFn(callback) {
  let start = Date.now();
  let now = start;
  while( now - start < 3000 ) {
      now = Date.now();
  }
  callback();
}
// 콘솔 출력까지 총 수행 시간 3 * 3 = 9초
// 의도적으로 타이머의 기능이 필요하다면 동기적 콜백 호출이 필요할 수도 있다.

• ⭐️ 동기적 콜백 방식은 블로킹을 발생하기 때문에, 의도하지 않는다면 비효율을 발생시킨다. 따라서 JS의 런타임(브라우저, node.js)가 제공하는 API를 통하여, 비동기적 콜백 호출을 통해 블로킹을 해결하고, 비효율을 해결할 수 있다.

• 비동기적 콜백
• 새로운 요청과 이전 요청에 대한 처리를 동시에 진행하는 방식

// 비동기적으로 3초 이후 배열의 수가 출력된다. (논 블로킹을 느낄 수 있다.)
[1, 2, 3].forEach((num) => {
    // 자바스크립트 런타임의 'Web API'인 'setTimeout' 함수를 사용함으로써 
    // 3초 이후 콘솔이 모두 출력된다.
    // 이 함수의 콜백 함수는 비동기적으로 호출된다.
    setTimeout(() => console.log(num), 3000);
});
// 콘솔 출력까지 총 수행 시간 = 3초
// 블로킹을 해결하고 속도를 개선하려면 비동기적 콜백 호출을 이용한다.

• 이어지는 질문 > 자바스크립트에서 동기/비동기 작업은 어떻게 처리되는가 (이벤트루프, 싱글스레드)

• WebAPIs에서 사용가능한 비동기 함수는 아래와 같다.
• DOM의 이벤트 핸들러 함수
• 타이머 관련 함수 (setTimeout, 애니메이션API)
• 서버에 대한 요청 (fetch, AJAX)

• 비동기 함수들은, 결과를 쉽게 예상할 수 없다는 치명적 단점을 가지고 있다.
• 각각의 task의 종료시점을 알 수 없기 때문에, 콜백함수의 순서를 제어할 필요가 있다.

• 비동기 처리란, 비동기 함수가 가진 콜백함수들의 순서를 제어하는 것을 말한다.

• 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. (ref. josha)

function fn() {
    setTimeout(() => {
        console.log('하나');
        setTimeout(() => {
            console.log('둘');
            setTimeout(() => {
                console.log('셋');
            }, 0);
        }, 0);
    }, 0);
}
fn(); // 결과 순서 => '하나', '둘', '셋'

• 비동기 함수 내의 콜백함수를 통해, 특정 동작을 실행시킬 수 있다.
• 이 콜백함수안에 또 다른 비동기함수를 호출한다면, 여러 작업을 순차적으로 실행시킬 수 있다.

• 콜백 지옥 (순차성 보장하지못함)
• 콜백함수의 순서를 확정하기 위해, 콜백함수안에 반복적으로 비동기함수를 호출하는 작업의 결과로 들여쓰기가 깊어지며, 가독성을 헤치는 현상을 말한다.
• 가독성, 직관적 이해, 코드 수정을 어렵게 한다.

• 에러처리가 어려움
• setTimeout 함수는 콜백함수를 WebAPIs에 넘긴 직후, 콜스택에서 제거되기 때문이다.
• 따라서 1초 후 Error가 발생했을 때는, setTimeout함수는 콜스택에 존재하지 않고, 콜백함수를 호출한 함수가 setTimeout 함수가 아닌 것을 뜻한다. 따라서 호출자 방향으로 전파되는 에러(exeption)에 catch 되지 않는 것이다.

try {
  setTimeout(() => { throw new Error('Error!'); }, 1000);
} catch (e) {
  console.log('에러를 캐치하지 못한다..');
  console.log(e);
}

• 제어의 역전 문제
• 제어의 역전은, 메인 프로그램에서 모든 함수를 통제하는 것이 아니라, 특정 하위 부분에 제어권을 넘겨주는 현상
• 콜백함수를 인자로 가지는 비동기 함수에게 제어권을 넘겨주기 때문에 발생
• 해당 비동기 함수가 제대로 처리되어 있지 않다면, 신뢰를 잃게 되고, 이를 보완하기 위해서 수많은 방어 로직을 만들어 재사용이 어렵게 된다.