과일 따기

const squareLength = 5;

// Caller function takes a callback function
function applyToSquare(callback) {
  return callback(squareLength);
}

// Callback must expect the possible argument from the calling function
function areaOfSquare(number) {
  return number * number;
}

applyToSquare(areaOfSquare); // => 25

applyToSquare(function squarePerimeter(side) {
  return side * 4;
});

applyToSquare(function (side) {
  return side * 4;
});

applyToSquare((side) => {
  return side * 4;
});

지침

고객이 청과점에서 신선한 과일을 주문할 수 있는 새로운 온라인 포털을 만들고 있어요. 청과점에는 고객이 원하는 재고가 있는지 확인할 수 있는 API가 있어요. 청과점의 API와 상호작용할 작은 함수 라이브러리를 만들어야 해요.

1. 주문이 성공했을 때 고객에게 알려요

포털은 주문이 성공하면 고객에게 알려야 해요. 청과점에 과일 재고가 충분해서 주문이 성공했을 때 호출될 onSuccess 콜백 함수를 정의해요. 이 함수는 가져온 notify 함수를 호출하면서 { message: 'SUCCESS' }를 전달해, 고객에게 주문이 성공했음을 알려야 해요.

onSuccess();
// => `notify` called with `{ message: 'SUCCESS' }`

2. 주문이 실패했을 때 고객에게 알려요

포털은 주문이 실패하면 고객에게 알려야 해요. 청과점에 과일 재고가 없거나 오류가 발생해서 주문이 실패했을 때 호출될 onError 콜백 함수를 정의해요. 이 함수는 가져온 notify 함수를 호출하면서 { message: 'ERROR' }를 전달해, 고객에게 주문이 실패했음을 알려야 해요.

onError();
// => `notify` called with `{ message: 'ERROR' }`

3. 청과점 API의 주문 함수를 감싸는 API 래퍼를 만들어요

과일 주문은 제공된 order 함수를 통해 청과점의 API로 이루어져요. 이 함수는 세 개의 인자를 받아요. 주문하려는 과일의 variety와 quantity를 담은 쿼리, 주문이 성공했을 때 호출될 콜백 함수, 주문에 오류가 생겼을 때 호출될 콜백 함수예요.

잠재적인 외부 변화로부터 코드베이스를 보호하고 싶어서, order 함수 호출을 orderFromGrocer라는 새 함수로 감싸기로 해요. orderFromGrocer 함수를 구현해서 청과점 API의 order 함수 호출로 주문을 시도하고, orderFromGrocer에 전달된 인자를 API 호출로 그대로 넘겨줘야 해요.

쿼리는 객체 형태예요:

const query = {
  variety: string,
  quantity: number,
};

orderFromGrocer(
  { variety: 'pear', quantity: 12 },
  exampleSuccessCallback,
  exampleErrorCallback,
);
// => `order` was called with the query and the callbacks

4. 접수된 주문 처리를 간단하게 만들어요

이제 고객은 포털을 통해 과일을 주문할 수 있는데, 코드베이스 곳곳에서 orderFromGrocer 함수를 호출하면서 매번 query와 두 개의 callback 함수를 인자로 넘겨야 한다는 걸 눈치챘어요. 코드를 리팩터링할 좋은 기회라고 생각하면서, 필요한 과일의 variety와 quantity만 전달해서 주문할 수 있으면 더 간단하겠다고 생각해요. variety와 quantity를 인자로 받아 청과점에 주문을 시도하는 postOrder 헬퍼 함수를 정의해요.

postOrder('peach', 100);
// => order placed for 100 peaches