ES6から分割代入というものが導入されました。分割代入とは、配列/オブジェクトを分解し、配下の要素/プロパティの値を個々の変数に分解するための構文です。

今回は、分割代入の使われ方について説明します！

オブジェクト

let person = {
  name: 'ラム',
  birthDate: '2月2日',
};

このpersonオブジェクトのプロパティname, birthDateをそれぞれ変数に代入したい場合。

ES6以前では、

let name = person.name;
let birthDate = person.birthDate;

console.log(name); // ラム
console.log(birthDate); // 2月2日

でしたが、ES6からは

let { name, birthDate } = person;

console.log(name); // ラム
console.log(birthDate); // 2月2日

1行にまとめて書くことができます！！

プロパティとは異なる変数名に変えたい時は、

let { name, birthDate: birthday, hairColor = '赤' } = person;

console.log(birthday); // 2月2日
console.log(hairColor); // 赤

変数名:別名として指定してあげることもできます。

またhairColorのようにデフォルト値を設定することもできます。

※オブジェクトのプロパティに存在しない、かつ、デフォルト値を設定しない場合は、undefinedとなります。

配列

次は配列です！

const quartetto = [
  'このすば',
  'リゼロ',
  '幼女戦記',
  'オバロ'
];

配列からそれぞれの値を変数に入れたい場合、

const [ title1, title2, title3, title4, title5 ] = quartetto;

console.log(title1); // このすば
console.log(title2); // リゼロ
console.log(title3); // 幼女戦記
console.log(title4); // オバロ
console.log(title5); // undefined

これもまた1行にまとめることができます！

今回は配列でしたが、配列はlengthというプロパティを持っているので、

const { length } = quartetto;

console.log(length); // 4

オブジェクトの分割代入のやり方で取り出すことができます。

違いは、

{}はオブジェクトのプロパティ
[]は配列の要素抽出

です！

また、...演算子を使うことで、個々の変数に分解されなかった残りの要素をまとめて配列として切り出すことも可能です。

const [ title1, title2, ...otherTitle ] = quartetto;

console.log(title1); // このすば
console.log(title2); // リゼロ
console.log(otherTitle); // ["幼女戦記", "オバロ"]

otherTitleに残りのタイトルが入っていることがわかります！

オブジェクトと配列の組み合わせ

オブジェクトの配列

オブジェクトと配列を組み合わせるとどうなるでしょうか？

まずは、配列の中にオブジェクトがある場合を見ていきましょう。

const quartetto = [
  { title: 'このすば', mainCharacter: 'カズマ' },
  { title: 'リゼロ', mainCharacter: 'スバル' },
  { title: '幼女戦記', mainCharacter: 'ターニャ ' },
  { title: 'オバロ', mainCharacter: 'アインズ' }
];

今までの書き方では、

const mainCharacter1 = quartetto[0].mainCharacter;

console.log(mainCharacter1); // カズマ

冗長になってしまいますが、ES6からはシンプルに書けます！

const [{ mainCharacter }] = quartetto;

console.log(mainCharacter); // カズマ

[]だけだと、

const [mainCharacter] = quartetto;

console.log(mainCharacter); // {title: "このすば", mainCharacter: "カズマ"}

こうなります！

この中のmainCharacterを取り出したいので、

const [{ mainCharacter }] = quartetto;

このように書きます！

配列のオブジェクト

今度は逆にオブジェクトの中に配列があるパターンを見てみます！

const rezero = {
  character: ['ram', 'lem', 'emilia', 'subaru']
};

const { character: [first] } = rezero;

console.log(first); // ram

シンプルになります！

関数

分割代入を利用し名前付き引数をシンプルにする

次は関数です！

名前付き引数をとる場合に以前は、

function signup(username, password, email, birthday) {
  // サインアップする処理
  console.log(`ユーザー${username}がサインアップしました。`);
};

signup('lem', 'subarukun', 'lem-subarukun@hoge.com', '2月2日'); // ユーザーlemがサインアップしました。

これだと、引数が多くてどんな引数が必要だったかとか間違いの元になってしまいます。

ES6では、

function signup({ password, email, birthday, username }, defaultValue = 'default' ) {
　// 引数の順番を気にしなくてよい！！

  // サインアップする処理
  console.log(`ユーザー${username}がサインアップしました。`);
};

const user = {
  username: 'lem',
  password: 'subarukun',
  email: 'lem-subarukun@hoge.com',
  birthday: '2月2日'
}

signup(user); // ユーザーlemがサインアップしました。

オブジェクトを引数に渡すことができます！

この書き方は、関数を呼び出す際にシンプルに書けるのもメリットですが、関数を宣言する際に引数の順番を気にしなくてもよくなります！

複数の戻り値を個別の変数に代入する

最後に複数の戻り値を別々の変数に代入したい場合を見ていきます！

function getMaxMin(...nums) {
  return [Math.max(...nums), Math.min(...nums)];
}

受け取った引数の中から最大値と最小値を配列として返す関数があります。

let result = getMaxMin(10, 78, -4, 12, 90);
console.log(result); // [90, -4]

配列のままですが、分割代入を使うと、

let [max, min] = getMaxMin(10, 78, -4, 12, 90);
console.log(max); // 90
console.log(min); // -4

1行で代入できます！

また、最小値だけしか必要ない時は、

let [, min] = getMaxMin(10, 78, -4, 12, 90);
console.log(min); // -4

のように書くことができます！

まとめ

// オブジェクト
let { name, birthDate: birthday, hairColor = '赤' } = person;

// 配列
const [ title1, title2, ...otherTitle ] = quartetto;

// オブジェクトの配列
const [{ mainCharacter }] = quartetto;

// 配列のオブジェクト
const { character: [first] } = rezero;

// 名前付き引数を持つ関数
function signup({ password, email, birthday, username }, defaultValue = 'default' ) {  // 引数の順番を気にしなくてよい！！
  // ユーザーを作成してDBに保存する処理
  console.log(`ユーザー${username}がサインアップしました。`);
};

// 複数の値を返す関数
let [max, min] = getMaxMin(10, 78, -4, 12, 90);

マッスル・メモリー

筋肉エンジニアのブログ

【js】ES6 分割代入