Callback

• 콜백은 함수가 1. 다른 함수에게 인자로 전달되어 / 2.나중에 실행될 수 있도록 하는 프로그래밍 패턴을 말한다.

• 비동기적으로 데이터를 가져오거나, 이벤트가 발생했을 때 혹은 애니메이션을 제어하는 등의 작업을 처리할 수 있다.

콜백 함수 사용 예시

var callback = function() {
  console.log('콜백 함수가 실행됐어요.');
}

element.addEventListener('click', callback);

1. 버튼 클릭 시 콜백 함수 실행
2. 콜백 함수 내부에 있는 console.log 실행
3. 'click'이라는 이벤트가 발생하기 전까지는 기능을 정의할 뿐, 실제로는 아무 역할도 하지 않음
4. 콜백 함수는 'click' 이벤트가 발생할 때 비로소 함께 호출되어 실행되는 함수다.

콜백 함수는 언제 쓸까?

1. 특정 상황이 발생했을 때
2. 순서대로 실행하고 싶을 때
3. 조건이 충족 되었었을 때

동기 VS 비동기

• 자바스크립트는 동기적 언어이기 때문에 for 반복문 또는 연산량이 아주 많을 때, 다음 코드 진행이 오래걸린다.
• 동(함께), 기(기다리다): 뭐를? 실행과 완료를 or 요청과 응답을

동기(Synchronous)

• 요청 하면 응답이 나올 때 까지 함께 기다린다.
• 호이스팅 후에 정해진 순서에 맞게 코드블럭을 실행한다.
• 결과가 나올 때 까지 기다려야 한다.

비동기(Asynchronous)

• 요청 하면 응답 여부와 무관하게, 바로 다음 코드로 넘어간다.
• 네트워크 통신, 오래 걸리는 작업, 일정 시간 뒤에 동작해야 하는 작업 등에서 사용한다.
• 자바스크립트 엔진은 단일 스레드 기반이지만, 비동기 작업이 가능한 이유는 브라우저 런타임에서 DOM 조작, AJAX와 같은 비동기 처리를 위한 web APIs를 제공하기 때문이다.
• 응답이 완료됐을 때 콜백이 실행된다.
• 비동기 코드는 무조건 큐로 따로 빠지며, 콜스택이 비었을 때 실행된다.

동기 코드 VS 비동기 코드

setInterval(() => {
    blink.style.background = blink.style.background === 'red' ? 'blue' : 'red';
  }, 500);

syncButton.addEventListener('click', () => {
    Counter.incrementSync();
    result.innerHTML = Counter.getCount();
  });

asyncButton.addEventListener('click', () => {
    Counter.incrementAsync(() => {
      result.innerHTML = Counter.getCount();
    });
  });

const Counter = {
  count: 0,
  getCount: function () {
    return this.count;
  },
  resetCount: function () {
    this.count = 0;
  },

  // 동기 코드
  // 3초가 끝나기전에 다른 코드들은 작동하지 않는다.
  incrementSync: function () {
    let start = Date.now();
    let end = Date.now();
    while (end - start <= 3000) {
      end = Date.now();
    }
    this.count++;
  },

  // 비동기 코드
  // 3초가 지나면 콜백 함수는 setTimeout Web Api로 넘어가기 때문에 다른 코드들이 작동할 수 있다.
  incrementAsync: function (callback) {
    setTimeout(() => {
      this.count++;
      callback();
    }, 3000);
  },
};

살펴 볼 코드

Counter.incrementSync();
result.innerHTML = Counter.getCount();

Counter.incrementAsync(() => {
  result.innerHTML = Counter.getCount();
});

Quiz1. 출력 순서는?

let i = 1;

console.log('A', ++i)
setTimeout(()=>console.log('B',++i))
console.log('C', i++)

  A 2
  C 2
  B 4