(JS) callback & 비동기 호출

JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될수 있다는 점이다.

함수는 값이 될 수도 있다. key로써 변수 역활도 가능하다.
객체 안에서 변수의 역활을 하는 것을 속성, 프로퍼티라고 하는데 속성에 저장되어 있는 값이
함수이면 그것을 메소드라고 한다.

함수는 값이기 때무에 다른 함수의 인자로 전달될 수도 있다. 함수는 함수의 리턴 값으로도 사용할 수 있고 배열의 값으로도 사용가능하다.

콜백

function B() {
  console.log('called at the back!');
}

function A(callback) {
  callback(); // callback === B 
}

A(B);

다른 함수 A의 전달인자로 넘겨주는 함수 B를 파라미터로 넘겨받는 함수 A는
함수 B를 필요에 따라 즉시 실행할수도 있고, 아니면 나중에 실행할수도 있다.

예제

function sortNumber(a, b) {
  if (a > b) {
    return 1;
  } else if (a < b) {
    return -1;
  } else {
    return 0;
  }
}
let numbers = [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
alert(numbers.sort(sortNumber));
//여기서 sortNumber 함수를 콜백 함수라고 한다. 

• callback in action : 반복 실행하는 함수 (iterator)

[1, 2, 3].map(function (element, index) {
  return element * eleement
});

• callback in action : 이벤트에 따른 함수 (event handler)

documebt.querySelector('#btn').addEventListner('click', function(e) {
  console.log('button clicked');
});

용법에 따른 O, X

function handleClick() {
   console.log('button clicked');
};
document.querySelector('#btn').onclick = handleClick; // (o)
document.querySelector('#btn').onclick = function() {
   handleClick();
}                                                     // (o)
document.querySelector('#btn').onclick =handleClick.bind(); // (o)
document.querySelector('#btn').onclick = handleClick();  // (x)

---

비동기 처리

콜백은 비동기 처리에서도 유용하게 사용된다.
시간이 오래 걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면
해당 작업이 끝났을때 미리 등록한 작업을 실행하도록 할 수 있다.

동기 : 순차적으로 일을 스스로 긑내 나가는 방식
비동기 : 해야할 일을 위임하고 기다리는 방식

---

타이머 API

setTimeout(callback, millisecond)
일정 시간 후에 함수를 실행시킨다.

• arguments : 실행할 callback 함수, callback 함수 실행 전 기다려야 할 시간(밀리초)
• return value : 임의의 타이어 ID

setTimeout(function() {
  console.log('1초 후 실행');
}, 1000);
// 123

setInterval(callback, millisecond)
일정 시간의 간격을 가지고 함수를 반복적으로 실행한다.

• arguments : 실행할 callback 함수, 반복적으로 함수를 실행시키기 위한 시간 간격(밀리초)
• return value: 임의의 타이어 ID

setInterval(function() {
  console.log('1초마다 실행');
}, 1000);
// 345

clearInterval(timeId)
반복 실행 중인 타이머를 종료

• arguments : 타이머 ID
• return value : 없음

let timer = setInterval(function() {
  console.log('1초마다 실행');
}, 1000);
clearInterval(timer);
// 더 이상 반복 실행되지 않음