JavaScriptでpriceプロパティを基準にオブジェクト配列をソートする方法

ここでは、住宅情報（ID、都市名、州、郵便番号、価格）を格納したオブジェクトの配列を例に考えます。

const arr = [
   {
      "h_id": "3",
      "city": "Dallas",
      "state": "TX",
      "zip": "75201",
      "price": "162500"
   },
   {
      "h_id": "4",
      "city": "Bevery Hills",
      "state": "CA",
      "zip": "90210",
      "price": "319250"
   },
   {
      "h_id": "5",
      "city": "New York",
      "state": "NY",
      "zip": "00010",
      "price": "962500"
   }
];

この配列を受け取り、各オブジェクトが持つ price プロパティ（現在は文字列型）を基準に、昇順または降順へ並べ替えるJavaScript関数を実装してみましょう。

実装コード

以下のコードでは、Array.prototype.sort() の比較関数の中で、単項プラス演算子「+」を使って文字列の価格を数値に変換し、その差を返しています。

const arr = [
   {
      "h_id": "3",
      "city": "Dallas",
      "state": "TX",
      "zip": "75201",
      "price": "162500"
   },
   {
      "h_id": "4",
      "city": "Bevery Hills",
      "state": "CA",
      "zip": "90210",
      "price": "319250"
   },
   {
      "h_id": "5",
      "city": "New York",
      "state": "NY",
      "zip": "00010",
      "price": "962500"
   }
];
const eitherSort = (arr = []) => {
   const sorter = (a, b) => {
      return +a.price - +b.price;
   };
   arr.sort(sorter);
};
eitherSort(arr);
console.log(arr);

出力結果

コンソールには次のように表示されます。

[
   {
      h_id: '3',
      city: 'Dallas',
      state: 'TX',
      zip: '75201',
      price: '162500'
   },
   {
      h_id: '4',
      city: 'Bevery Hills',
      state: 'CA',
      zip: '90210',
      price: '319250'
   },
   {
      h_id: '5',
      city: 'New York',
      state: 'NY',
      zip: '00010',
      price: '962500'
   }
]

コードのポイント

• 文字列から数値への変換： 単項プラス演算子「+」を付けることで、"162500" のような文字列を数値として扱えます。これにより、文字列同士の辞書順比較ではなく、正しい数値順の並べ替えが可能になります。
• 降順にしたい場合： 比較関数の引き算の順序を逆にし、+b.price - +a.price とすれば降順になります。
• 元の配列への影響： sort() は元の配列を直接変更します。元の配列を保持したい場合は、ES2023で追加された toSorted() を使うと、新しい配列を返す安全なソートが行えます。