【JavaScript】オブジェクトの分割代入 | Objectから一部の要素(key&value)を抽出・取り出す方法

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、JavaScriptでObjectから一部の要素(key&valu)を抽出・取り出す「Objectの分割代入」について解説します。

配列(Array)の分割代入については、こちらの記事で解説しています。

【JavaScript】配列の分割代入 | Arrayから一部の要素を取り出す方法

【 Arrayの分割代入】

1 Object(オブジェクト)の分割代入
2 key名を指定して取得するPattern
3 既存のkey名とは別の変数名(key名)を新しく設定するPattern
4 残り部分をまとめて分割代入するPattern
5 default-値を設定するPattern
6 多次元のObjectからvalueを取り出すPattern
7 JavaScript書籍 Ver. 中級-上級者向け
8 JavaScript書籍 Ver. 初級者向け
9 参考・引用
10 最近の投稿

Object(オブジェクト)の分割代入

Objectの分割代入とは、Object から「key: value」を一部だけ取り出して変数に代入することを言います。

Objectの分割代入の基本の形は、「 { key } = Object; 」です。

基本的な使い方をまとめると、次のようになります。

Objectの分割代入の基本的な使い方

const object { key1: value1, key2: value2 , key3: value3};

// 1. key名を指定して、objectから取り出して代入する！
const { key1} = object;
// key1 と それに紐づく value だけ、object から取り出しています。

// 2. 既存のkey名とは別の変数名(key名)を新しく設定してvalueを代入する！
const { key2: new_key } = object;
// key2 に紐づく vallue を new_key と言う別の変数名に代入しています。

// 3. 残り部分をすべて代入する！
const { key1, ...all_other_data } = object;
// 「 ... 」を利用すると、指定されなかった残り部分をすべて格納できます。

// 4. default-値の指定
const { key1, key4=default-value } = object;
// TargetとなるObjectに同じkey名があれば、default値はupdateされる！

< 考え方のPoint >
1. 左側は「 key:value 」の1つのSetであり、右側には「 New-KeyName 」を設定することができる！
2. 省略した場合は、元のkey名がそのまま使われて代入される！

考え方のPointは、左側は「 key:value 」の1つのSetであり、右側には「 New-KeyName 」を設定することができる点と、省略した場合は、元のkey名がそのまま使われて代入される点の2点です。

この2点を押さえておけば、Objectの分割代入は使えます。

それでは実際にSample-Codeを見ていきましょう！

key名を指定して取得するPattern

// < Objectの分割代入 >

// Objectの分割代入とは、Object から「key: value」を一部だけ取り出すこと！

// 左側は「 key:value 」のSet, 右側は「 New-KeyName 」
// => 省略した場合は、元のkey名がそのまま使われる！ 

const robotamaInstance = {
    id: 1, 
    value: 'ロボ玉',
    like: 'ひまたね',
    from: 'グンマー帝国',
    cute: 100,
    robotamaFlag: true,
};

// < Objectの分割代入の形 >
// 左辺が、取り出す一部の「key: value」で、右辺が「 key&value 」を取り出すTargetとなるObject

// 1. key を指定して取得する！
const {value, from, robotama} = robotamaInstance;
// const { key-value } = Object; と言う形

console.log({value});    // {value: 'ロボ玉'}
console.log({from});     // {from: 'グンマー帝国'}
console.log({robotama}); // {robotama: undefined}

既存のkey名とは別の変数名(key名)を新しく設定するPattern

// 2. 既存のkey名とは別の変数名(key名)を新しく設定する-Pattern

const robotamaInstance2 = {
    id: 1, 
    value: 'ロボ玉',
    like: 'ひまたね',
    from: 'グンマー帝国',
    cute: 100,
    robotamaFlag: true,
};

const {id: robotamaId, like: himatane, robotamaFlag: hamFlag} = robotamaInstance2;

console.log({robotamaId}); // {robotamaId: 1}
console.log({himatane});   // {himatane: 'ひまたね'}
console.log({hamFlag});    // {hamFlag: true}

const new_robotama = {
    robotamaId,
    himatane,
    hamFlag
};

console.log({new_robotama});
// new_robotama: {robotamaId: 1, himatane: 'ひまたね', hamFlag: true}

残り部分をまとめて分割代入するPattern

// 3. 残り部分をすべて格納する！
// 「 ... 」を利用すると、指定されなかった残り部分をすべて格納できます。
const robotamaInstance3 = {
    id: 1, 
    value: 'ロボ玉',
    like: 'ひまたね',
    from: 'グンマー帝国',
    cute: 100,
    robotamaFlag: true,
};

const {id, ...params} = robotamaInstance3;

console.log({id}); // {id: 1}
console.log({params});
// params: {value: 'ロボ玉', like: 'ひまたね', from: 'グンマー帝国', cute: 100, robotamaFlag: true}

default-値を設定するPattern

// 4. default-値の指定
const robotamaInstance4 = {
    id: 1, 
    value: 'ロボ玉',
    likeFood: 'ひまたね',
    fromData: 'グンマー帝国',
    cute: 100,
    robotamaFlag: true,
};

const {cute, likeFood='たこ焼き', fromData='埼玉'} = robotamaInstance4;

console.log({cute});     // {cute: 100}
console.log({likeFood}); // {likeFood: 'ひまたね'}
console.log({fromData}); // {fromData: 'グンマー帝国'}

多次元のObjectからvalueを取り出すPattern

// 5. 多次元の場合
const robotamaInstance5 = {
    id: 2, 
    robotama1: 'ロボ玉試作1号機',
    status: {
        power: 1200,
        defense: 1200,
        speed: 1200,
    }
};

const {robotama1, status: {power: robotama_power} } = robotamaInstance5;

console.log({robotama1});
// {robotama1: 'ロボ玉試作1号機'}

console.log({robotama_power});
// {robotama_power: 1200}