フルーツ狩り

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で行われます。 この関数は3つの引数、つまり注文する果物の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と2つのcallback関数を引数として渡さなければならないことに気づきます。 コードをリファクタリングする好機だと考え、必要な果物のvarietyとquantityを渡すだけで注文できるほうがシンプルだと思うようになります。 varietyとquantityを引数に取り、八百屋に注文しようとするpostOrderヘルパー関数を定義します。

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