JavaScriptで配列から重複を除外し、ユニークなnameプロパティを抽出する方法

問題の概要

次のような、オブジェクトを要素として持つ配列があると仮定しましょう。

const arr = [
    {id:123, value:"value1", name:"Name1"},
    {id:124, value:"value2", name:"Name1"},
    {id:125, value:"value3", name:"Name2"},
    {id:126, value:"value4", name:"Name2"}
];

この配列の中には、"name" プロパティの値が重複しているオブジェクトが含まれています。

今回の課題は、このようなオブジェクトの配列を受け取り、重複を取り除いたユニークな "name" の値だけを集めた新しい文字列配列を作る JavaScript 関数を実装することです。

つまり、上記の入力に対して期待される出力は次のようになります。

const output = ["Name1", "Name2"];

実装例：forループとindexOfを使う方法

まずは基本的なアプローチとして、for ループと indexOf() を組み合わせた実装を見てみましょう。

const arr = [
    {id:123, value:"value1", name:"Name1"},
    {id:124, value:"value2", name:"Name1"},
    {id:125, value:"value3", name:"Name2"},
    {id:126, value:"value4", name:"Name2"}
];

const pickNames = (arr = []) => {
    const res = [];
    // 配列の末尾から先頭へ向かって走査する
    for (let i = arr.length; i--;) {
        if (res.indexOf(arr[i].name) < 0) {
            res.push(arr[i].name);
        }
    }
    return res;
};

console.log(pickNames(arr));

このコードでは、結果配列 res にまだ存在しない "name" の値だけを push することで、重複を排除しています。

出力結果

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

[ 'Name2', 'Name1' ]

なお、この実装ではループが配列の末尾から先頭へ向かって進むため、出力の順序は元の配列とは逆になります。元の並び順を保ちたい場合は、先頭からループするか、後述する別解のような方法を採用するとよいでしょう。

別解：Setとmap()を使った簡潔な方法

ES2015 以降では、Set オブジェクトと map() メソッドを組み合わせることで、同じ処理をもっと短く読みやすいコードで実現できます。

const pickNames = (arr = []) => {
    return [...new Set(arr.map(item => item.name))];
};

console.log(pickNames(arr)); // [ 'Name1', 'Name2' ]

Set は重複する値を自動的に排除してくれるため、indexOf() による存在チェックが不要になります。さらに、この方法では元の配列と同じ順序で結果が得られる点も大きなメリットです。