[Javascript] Javascript 기초 (ES5+) by 드림코딩 8.callback

callback 콜백함수

다른 함수의 인자로 전달되는 함수

function main(callback) {
  callback();
}

main(function() { });

// 동기적 콜백함수 - 호이스팅 되어 맨 위로
function printImmediately(print) {
  print();
}

// 비동기적 콜백함수 - 호이스팅
function printWithDelay(print, timeout) {
  setTimeout(print, timeout); // 전달받은 print와 timeout 두 인자를 setTimeout에 요청
}

console.log('1'); //
setTimeout(() => console.log('2'), 1000); 
// 비동기적 함수, 비동기적으로 실행되기 때문에 타이머가 끝나기를 기다리지 않고
console.log('3');
printImmediately(() => console.log('hello'));
printWithDelay(() => console.log('async callback'), 2000); // 비동기
// 출력순서 : 1, 3, hello, 2, async callback

2. 비동기 콜백

정확히 언제 끝나는지 알기 어렵다.
코드의 실행 순서가 뒤죽박죽이 되기 쉽다.

function getData() {
  // 서버에서 데이터를 받아오는 작업
  setTimeout{() => {
    console.log('서버에서 데이터를 받아옴');
  }, 2000};
}

getData();
console.log('후처리'); 
// 출력순서 : 후처리 -> 서버에서 데이터를 받아왔어요

function getData(callback) { // 인자로 콜백함수를 받는다.
  // 서버에서 데이터를 받아오는 작업
  setTimeout{() => {
    console.log('서버에서 데이터를 받아옴');
    callback();
  }, 2000};
}

// getData 인자로 console.log를 전달
getData(() => {
  console.log('후처리');
});

// 출력순서 : 서버에서 데이터를 받아옴 -> 후처리

전달해 준 console.log 콜백함수가 getData의 인수 callback이라는 변수에 들어가서, '서버에서 데이터를 받아왔어요.' 후 '후처리'가 출력되게 된다.

function getData(callback) {
  // 서버에서 데이터를 받아오는 작업
  setTimeout{() => {
    console.log('서버에서 데이터를 받아옴');
    callback({name: "kim"}) // 콜백함수의 인자로 받아온 데이터를 넣을 수도 있다.
  }, 2000};
}

getData((data) => { // 매개변수를 받게끔 
  console.log(data.name);
});

// 출력순서 : 서버에서 데이터를 받아옴 -> kim

web api인 setTimeout은 비동기 콜백함수를 사용하는 함수이다.
비동기적으로 동작하는 타이머가 끝난 후, 콜백함수를 호출