functions accepting callback function

const oneWord = function (str) {
  return str.replace(/ /g, '').toLowerCase();
};

const upperFirstWord = function (str) {
  const [first, ...others] = str.split(' ');
  return [first.toUpperCase(), ...others].join(' ');
};

//Higher-order function
const transformer = function (str, fn) {
  console.log(`Original string: ${str}`);
  console.log(`transformed string: ${fn(str)}`);

  console.log(`Transformed by: ${fn.name}`);
};

transformer('JavaScript is the best!', upperFirstWord);
transformer('JavaScript is the best!', oneWord);

이렇게 코드가 있다고 하면
첫번째 upperFirstWord는 이렇게 결과가 나온다

Original string: JavaScript is the best!
transformed string: JAVASCRIPT is the best!
Transformed by: upperFirstWord

두번째 oneWord는 이렇게 결과 나옴

Original string: JavaScript is the best!
transformed string: javascriptisthebest!
Transformed by: oneWord

위에서 upperFirstWord와 oneWord가 바로 callback함수이다.
다른 예를 살펴보자

const high5 = function () {
  console.log('❤');
};
document.body.addEventListener('click', high5);

여기서 high5가 callback함수이고
addEventListner이게 higher-order function이다.

callback함수는 왜 자바스크립트에서 많이 쓰일까?

1. it makes it easy to split our code into more reusable and interconnected parts.
2. it allows us to create abstraction.
   *abstarction: we hide the details of some code implementation because we don't really care about all that details

abstraction에 대해 위에 썼던 코드로 이해해보자면

원래 Higher-order function 이 부분에

const oneWord = function (str) {
  return str.replace(/ /g, '').toLowerCase();
};

const upperFirstWord = function (str) {
  const [first, ...others] = str.split(' ');
  return [first.toUpperCase(), ...others].join(' ');
};

이 두 아이를 넣어서 해줘도 되지만
다른 lower-order function에 넣어주면서
abstarct하게 해준거라고 한다...
디테일에 상관안하기 때문에
we hide the details of some code implementation..
이러한 연유로 higher-order function과 lower-order function
분리해서 넣어주고 callback함수를 쓴것....