【JavaScript】オブジェクトから指定したプロパティを抽出して別オブジェクトへ移す方法

JavaScriptでは、あるオブジェクトから特定のプロパティだけを取り出して、別のオブジェクトに移したいケースがよくあります。この記事では、その処理を行うextract()関数の実装方法を解説します。

この関数の仕様は以下のとおりです。

• 元のオブジェクトと、取り出したいプロパティ名（キー）のリストを受け取る
• 指定されたキーのプロパティを新しいオブジェクトにコピーする
• 同時に、元のオブジェクトからそれらのプロパティを削除する

動作イメージ

たとえば、次のような2つのオブジェクトがあるとします。

obj1 = {color:"red", age:"23", name:"cindy"}
obj2 = extract(obj1, ["color","name"])

extract()関数に通した後は、次のように変化することが期待されます。

obj1 = { age:23 }
obj2 = {color:"red", name:"cindy"}

つまり、「color」と「name」は新しいオブジェクトへ移動し、元のオブジェクトからは消えています。それでは、実際のコードを見ていきましょう。

実装コード

const obj = {
    name: "Rahul",
    job: "Software Engineer",
    age: 23,
    city: "Mumbai",
    hobby: "Reading books"
};

const extract = (obj, ...keys) => {
    const newObject = Object.assign({});
    Object.keys(obj).forEach((key) => {
        if(keys.includes(key)){
            newObject[key] = obj[key];
            delete obj[key];
        };
    });
    return newObject;
};

console.log(extract(obj, 'name', 'job', 'hobby'));
console.log(obj);

コードのポイント

この実装の仕組みを簡単に整理しておきます。

• 可変長引数（...keys）: 第2引数以降に任意の個数のキー名を渡せるようにしています。
• Object.keys(): 元のオブジェクトのすべてのキーを配列として取得します。
• includes(): 各キーが、抽出対象として指定されたキー一覧に含まれるかどうかを判定します。
• delete演算子: 抽出後、元のオブジェクトから該当するプロパティを削除します。

なお、Object.assign({})は空のオブジェクトを作成するための記述です。よりシンプルに書くなら {} でも同じ意味になります。

実行結果

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

{ name: 'Rahul', job: 'Software Engineer', hobby: 'Reading books' }
{ age: 23, city: 'Mumbai' }

最初の出力がextract()の戻り値（抽出された新しいオブジェクト）、2つ目の出力が処理後の元のオブジェクトです。「name」「job」「hobby」が新しいオブジェクトへ移り、元のオブジェクトには「age」と「city」のみが残っていることが確認できます。

まとめ

このように、Object.keys()とdelete演算子を組み合わせることで、オブジェクトから特定のプロパティを「切り出して移動」する処理を簡潔に実装できます。フォームデータの分割やAPIレスポンスの整形など、実務でも役立つテクニックなので、ぜひ活用してみてください。