【TS】分割代入の代入先でスプレッド構文を使ってみた

目次

背景

仕事で分割代入の代入先でスプレッド構文を使ってみたので、忘れないように記事にしようと思います。

分割代入とは

分割代入とは、 配列の要素やオブジェクトのプロパティの値を別の変数として定義できる構文のことです。オブジェクトで分割代入を行う場合、定義する変数の名前はプロパティ名と一致させます。もしプロパティ名と変数名を一致させずに変数を定義したい場合、{ プロパティ名: 変数名 }で変数を定義します。配列の場合は、特に変数名の縛りはないです。

const user = {
  firstName: "yuki",
  age: "25",
};
const { firstName, age: yukisAge } = user;

console.log(firstName); // => "yuki"
console.log(yukisAge);       // => 25

const fruits = ["apple", "orange", "grape"];

// othersには""orange"しか含まれない
const [first, others] = fruits;

console.log(first); // => "apple"
console.log(others); // => "orange"

オブジェクトのプロパティに指定されているオブジェクトのプロパティの値を分割代入で取り出す場合、{ プロパティ名: { ネストされているオブジェクトのプロパティ名 } }と書きます。

const user = {
    children: {
        age: 3,
    }
};

const { children: { age } } = user

console.log(age); // => 3

{ プロパティ名: { ネストされているオブジェクトのプロパティ名: 変数名 } }と書くと、プロパティ名ではなくて独自の変数名で分割代入できます。

const user = {
    children: {
        age: 3,
    }
};

const { children: { age: childAge } } = user

console.log(childAge); // => 3

スプレッド構文とは

スプレッド構文とは、 配列やオブジェクトを展開するための構文です。既存の配列やオブジェクトを利用しつつ、新しい配列やオブジェクトを作成するときに使用します。

const user = {
  firstName: "yuki",
  age: "25",
};
const newUser = {
  ...user,
  age: "26",
}

console.log(newUser.age); // => 26

const fruits = ["apple", "orange", "grape"];
const newFruits = [ ...fruits, "watermelon"];

console.log(newFruits); // => ["apple", "orange", "grape", "watermelon"] 

(注) オブジェクトのプロパティ名が被った場合の優先順位は、後ろにあるオブジェクトのプロパティが優先されます。

分割代入の代入先でスプレッド構文を使ってみる

分割代入の代入先でスプレッド構文を使うことで、分割代入で明治的に宣言していない全ての値をオブジェクトまたは配列として一つの変数に代入することができます。 以下の例ではfirstNameの値以外は、othersにオブジェクトとして代入されています。...othersで残り全てのプロパティを指定したとみなされているため、othersにはオブジェクトが格納されていると考えられます。

↓ 代入元がオブジェクトの場合

const user = {
  firstName: "yuki",
  age: "25",
  country: "japan",
};

const { firstName, ...others } = user;
console.log(others) 
// => {
//      "age": "25",
//      "country": "japan"
//    }

↓ 代入元が配列の場合

const fruits = ["apple", "orange", "grape"];

// 普通にothersと定義した場合、othersには"orange"しか代入されない
const [ firstItem, ...others] = fruits

console.log(firstItem); // => "apple"
console.log(others); // => ["orange", "grape"]

(注) 本当にageを定義しているわけではないので、ageをconsole.logで出力しようとするとエラーが出ます。othersならOKです。

参考記事

オブジェクト · JavaScript Primer #jsprimer

オブジェクト · JavaScript Primer #jsprimer