JavaScriptの分割代入と残余プロパティを知ろう

概要

別記事を書くにあたり分割代入を理解しようの会
残余プロパティ(残余要素)についてもあわせて紹介

分割代入とは

配列やオブジェクトの一部を切り出して別の変数に格納すること。
参考: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring

配列の分割代入

const hoge = [1, 2, 3];
// ↓こんな感じで分割代入する
const [a, b, c] = hoge;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

オブジェクトの分割代入

const hoge = { fullName: "ほげ太郎", message: "こんにちは" };
// ↓こんな感じで分割代入する
const { fullName, message } = hoge;

console.log(fullName); // "ほげ太郎"
console.log(message); // "こんにちは"

配列の分割代入

再掲だけどこんな感じ。

const hoge = [1, 2, 3];
// ↓こんな感じで分割代入する
const [a, b, c] = hoge;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

要らない部分は割愛して書くことも可能。

const hoge = [1, 2, 3];
// ↓こんな感じで分割代入することもできる
const [a,, b] = hoge;

console.log(a); // 1
console.log(b); // 3

また、一部と残りという分け方も可能

const hoge = [1, 2, 3];
// ↓こんな感じで1つ目と残りの要素で分ける
const [a, ...rest] = hoge;

console.log(a); // 1
console.log(rest); // [2,3]

一部は複数個でもOKだが、末尾の一部を抽出することはできないので注意

const hoge = [1, 2, 3];
// ↓こんな感じで1つ目と残りの要素で分ける
const [a, b, ...rest] = hoge;

console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3]

const [...rest2, d] = hoge; // 🚫これはエラーになるのでNG

ちなみに、下記だとrestの値が変わるので注意

const hoge = [1, 2, 3];
const [a, rest] = hoge;

console.log(a); // 1
console.log(rest); // 2

オブジェクトの分割代入

const hoge = { fullName: "ほげ太郎", message: "こんにちは", age: 20 };
// ↓こんな感じで分割代入する
const { fullName, message, age } = hoge;

console.log(fullName); // "ほげ太郎"
console.log(message); // "こんにちは"
console.log(age); // 20

ちなみに、プロパティ名じゃない名前で抜き出す時は以下のようにしないとエラーになる。

const hoge = { fullName: "ほげ太郎", message: "こんにちは", age: 20 };
const { a, b, c } = hoge; // 🚫これはエラーになるのでNG
const { fullName: a, message: b, age: c } = hoge; // ✅プロパティ名と変数名を紐付けてあげればOK

要らない部分は割愛して書くことも可能。

const hoge = { fullName: "ほげ太郎", message: "こんにちは", age: 20 };
// ↓こんな感じで分割代入することもできる
const { fullName } = hoge;

console.log(fullName); // "ほげ太郎"

また、一部と残りという分け方も可能

const hoge = { fullName: "ほげ太郎", message: "こんにちは", age: 20 };
// ↓こんな感じで一部と残りの要素で分ける
const { fullName, ...rest } = hoge;

console.log(fullName); // "ほげ太郎"
console.log(rest); // { message: "こんにちは", age: 20 }

一部は複数個でもOK。
オブジェクトは順番という概念がないので配列のように末尾要素が取れないなどもないが、書き方として末尾に持ってくることができないので注意。

const hoge = { fullName: "ほげ太郎", message: "こんにちは", age: 20 };
// ↓こんな感じで一部と残りの要素で分ける
const { fullName, message, ...rest } = hoge;
const { age, ...rest2 } = hoge;
const { ...rest2, age } = hoge; // 🚫この書き方はエラーになる

console.log(fullName); // "ほげ太郎"
console.log(message); // "こんにちは"
console.log(rest); // { age: 20 }
console.log(age); // 20
console.log(rest2); // { fullName: "ほげ太郎", message: "こんにちは" }

残余プロパティ

これまでに紹介した分割代入のうち、一部とその残りに分ける代入方法を用いて取り出せた ...rest を残余プロパティまたは残余要素という。

const hoge = [1, 2, 3];
const [a, ...rest] = hoge; // この...restが残余要素

const fuga = { fullName: "ふが太郎", message: "こんにちは", age: 20 };
const { fullName, message, ...rest } = fuga; // この...restが残余要素

すでに記載の通り [~~~, ...rest]、{ ~~~, ...rest } のように残余プロパティが末尾に来る形じゃないとNG。