고차함수, 콜백함수,비동기

고차함수는 1. 다른함수(콜백함수)를 전달인자로 전달받거나 2. 다른 함수를 리턴할 수 있다 (함수를 리턴하는 함수라고 해서 커리함수라고도 부른다)

즉, '함수를 리턴하는 함수'와 '함수를 인자로 받는 함수' 모두 고차함수이면서
고차함수는 콜백함수, 커리함수의 상위 개념이다

재귀함수는 함수내에서 함수 자기자신을 호출하는 방식을 말한다

콜백함수란 다른 함수의 전달인자로 넘겨주는 함수를 말한다
콜백함수를 인자로 전달받는 콜러(caller)함수는 콜백함수를 동기적으로 즉시실행할 수도있고, 아니면 나중에 비동기적으로 실행할 수도 있다

function B() {
	console.log('콜백함수 실행');
}

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

caller(B);

콜백함수의 활용

1. 반복실행하는 함수의 인자로 전달된다 (iterator)

[1,2,3].map((el, index) => el * el) 

2. 이벤트에 따른 함수로 활용된다 (이벤트핸들러)

document.querySelector('#btn').addEventListener('click', function(e) { 
  console.log('클릭 이벤트 발생시 콜백함수 실행'); 
});

주의 콜백 함수를 연결할 때에는 콜백함수 자체를 연결해야한다, 콜백함수의 실행을 연결하는 것이 아니다

fucntion callback() {
	console.log('콜백함수 실행');
};

document.querySelector('#btn').onclick = callback;
document.querySelector('#btn').onclick = function() {
  callback();
}   // 새로운 익명함수를 만들고 익명함수내에서 콜백함수를 실행, 즉 익명함수 자체를 연결한 것!
document.querySelector('#btn').onclick = callback.bind(); // bind() 메소드는 함수자체를 리턴하기때문에 함수자체를 연결한 것!

document.querySelector('#btn').onclick = callback(); // 콜백함수의 실행을 연결했기때문에 잘못된 문법,  위에있는 callback함수는 리턴값이 없기 때문에 undefined를 연결한 것 과 같다. 

동기 vs 비동기

동기함수 = 요청에 대한 결과가 순차적으로 일어난다

비동기함수 = 요청에 대한 결과가 동시에 일어나지 않는다 (요청에 대한 결과가 즉각 나오지 않고 딜레이 되어 나온다)
요청에 대한 결과가 이벤트에 의해서 이벤트 핸들러가 실행된다

//  customers는 고객의 이름과, 주문사항이 객체형태로 담겨있다
let customers = [{
  name: 'steve',
  request: '카페라떼'
}, {
  name: 'john',
  request: '아메리카노'
}];
function drink(person, coffee) {
  console.log(person + '는 ' + coffee + '를 마십니다') 
}

function waitAsync(callback, ms) {
  setTimeout(callback, ms);   // setTImeout은 특정시간 이후 callback함수가 실행되게끔 하는 브라우저 내장기능 
}



function syncCoffee(coffee) {
  console.log(coffee + '가 접수되었습니다');
  waitSync(2000);    //2초동안 blocking 된다
  return coffee;
}  // 동기함수가 순차적으로 실행된다

function asyncCoffee(menu, callback) {
  console.log(menu + '가 접수되었습니다');
  waitAsync(function() {
	callback(menu);
  }, 2000);
}  // 비동기함수의 경우 인자로 callback함수가 들어간다


// 비동기 함수 호출
customers.forEach(function(customer) {
  asyncCoffee(customer.request, function(coffee) {
    drink(customer.name, coffee);   
    //asyncCoffee의 waitAsync에 의해 2초뒤에 drink함수를 실행하는 콜백함수를 실행한다
  });
});