[JavaScript]分割代入についてまとめてみた

はじめに

今回は配列（オブジェクト）から値（プロパティ）を取り出して、別の変数に代入することができる分割代入について気になったのでまとめてみました！
ちなみに英語では（Destructuring）と呼ぶみたいですよ！
では、やっていきましょう💁

配列

const shoppingList = ["リンゴ", "バナナ", "レタス","トマト"];
const [apple, banana] = shoppingList; //←ココ

console.log(apple); //リンゴ
console.log(banana); // バナナ

2行目が分割代入となります。
配列の順番で[]の中の変数に代入されます。

スプレット構文も使うことができて、、、

const shoppingList = ["リンゴ", "バナナ", "レタス","トマト"];
const [apple, banana, ...vegetable] = shoppingList;

console.log(vegetable); //["レタス", "トマト"]

となります。

オブジェクト

const shoppingList = {
  apple: 'リンゴ',
  banana: 'バナナ',
  lettuce: 'レタス',
  tomato: 'トマト',
};

const { banana, apple } = shoppingList; //←ココ

console.log(apple); //リンゴ
console.log(banana); // バナナ

オブジェクトの場合は配列の時のように順番は気にすることなく、プロパティを指定する形になります。

デフォルト値

対応する値がundefinedの時、設定した値を代入することができます。

const {name = "名無し", age = 20} = {name: "太郎"};
console.log(name); // "太郎"
console.log(age);  // 20

返り値

配列・オブジェクトの返り値も分割代入することができます。

function returnAnimal() {
  return ['犬', '猫'];
}

const [dog, cat] = returnAnimal();
console.log(dog); // 犬
console.log(cat); // 猫

変数の値交換

一時的な変数を用意しなくても入れ替えが可能となります。

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

代入元より要素が多いとき

この場合はundefinedとなります。

const colors = ['赤', '黄', '緑'];

const [red, yellow, green, blue] = colors;
console.log(red); // "赤"
console.log(yellow); // "黄"
console.log(green); // "緑"
console.log(blue); // undefined

さいごに

今のところ使いどことしては、配列（オブジェクト）の中身を変数として使いたいときぐらいしか思いつきませんでした💦💦
ほかに使いどころがあったら教えていただきたいです！
以上となります！