【JavaScript／TypeScript】辞書型でもmapしたい！

JavaScriptやTypeScriptで辞書型でもmap関数を使いたい！

概要

今回の記事では、JavaScriptやTypeScriptで辞書型でもmap関数を使う手順を掲載する。

仕様書

環境

• TypeScript 5.2.2

手順書

下記みたいな構造の辞書型のオブジェクトがあるとして

interface Employee {
    name: string,
    isAdmin: boolean,
};

let employees: Record<string, Employee> = {};

これをmap関数で処理したい場合は、map関数は配列Arrayに含まれる関数なので、Object.entriesで辞書型を配列に変換する。

以下は、前述の辞書型を配列に変換してmapでisAdminがtrueの社員のnameを表示する例。

let admins = Object.entries(employees).map(([key, employee]) => {
    if (employee.isAdmin) {
        return <div key={key}>{employee.name}</div>
    } else {
        return null;
    }
});

まとめ（感想文）

mapに慣れちゃうとmapしか使いたくなくなる病気。