JavaScript/TypeScript の Array.prototype.reduce() でハッシュを作る

JavaScript/TypeScript における Array.prototype.reduce() (以下、reduce() とする) は配列から単一の値を作るために使われるメソッドである。典型的には次のような使われ方をする。

const total = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].reduce((prev: number, curr: number) => {
    return prev + curr;
}, 0);

console.log(total); // 55

配列にある複数の要素を、単一の値に reduce (= まとめあげ) している、ということだ。

reduce で、配列を単一のハッシュに変換することもできる。次のような配列を考えよう。

[
    {
        name: "ケンシロウ",
        style: "北斗神拳",
        strength: 10,
    },
    {
        name: "ジャギ",
        style: "北斗神拳",
        strength: 5,
    },
    {
        name: "レイ",
        style: "南斗聖拳",
        strength: 8,
    },
];

これを次のように変換したいとする。

{
  "ケンシロウ": {
    "style": "北斗神拳",
    "strength": 10
  },
  "ジャギ": {
    "style": "北斗神拳",
    "strength": 5
  },
  "レイ": {
    "style": "南斗聖拳",
    "strength": 8
  }
}

この変換は reduce を使うと簡単に実現できる。

const fighters = [
    {
        name: "ケンシロウ",
        style: "北斗神拳",
        strength: 10,
    },
    {
        name: "ジャギ",
        style: "北斗神拳",
        strength: 5,
    },
    {
        name: "レイ",
        style: "南斗聖拳",
        strength: 8,
    },
];

const obj = fighters.reduce((soFar, fighter) => {
    soFar[fighter.name] = { 
        style: fighter.style,
        strength: fighter.strength 
    };

    return soFar;
}, {});

reduce の第二引数に指定する初期値が {} であり、この空のハッシュオブジェクトに順繰りに値をつめていく、という具合である。TypeScript で同等のことを実装してみたので、TypeScript Playground へのリンクもあわせて載せておく。