JavaScript 分割代入

JavaScriptの分割代入

はじめに

JavaScriptの分割代入を備忘録として残しておきます。
自身React学習中でJavaScriptある程度できるつもりだったのですが、分割代入の動きをしっかりと把握できてなかったので改めて確認しましたのでアウトプットとして記事にさせていただきます。

分割代入とは

オブジェクトや配列からプロパティを取り出し変数として定義し直す構文

上記が分割代入を簡単に説明したものです。
学習されている方であればなんとなくわかるかと思いますが、初学者が分割代入使われたソースコード見てしまうとパニックです、、、
少なくとも私は最初パニックでした、、、

App.jsx

//propsでvalue1とvalue2を引数に分割代入しアロー関数を使用している。
const Square = ({value1, value2}) => {
  return (
    <>
      <p>{value1}</p>
      <p>{value2}</p>
    </>
  );
}

Reactでは上記のような分割代入とアロー関数を使った変数や関数式がよく出てきます。
JavaScriptのこのような文法理解がないと苦労します。。。
({value1, value2})この部分が分割代入になります。

分割代入を確認してみる

参考資料：JavaScriptPrimer
下記のようなシンプルな関数userIdがあり、引数にuserオブジェクトを受け取ります。
そして、関数内でconsole.logでuser変数のidを表示するという関数です。

index.js

function userId(user) {
    console.log(user.id);
}
const user = {id: 1};
userId(user);

上記を分割代入行うと引数として受け取ったuserオブジェクトのidプロパティをid変数として再定義しております。

index.js

// 第1引数のオブジェクトから`id`プロパティを変数`id`として定義する
function userId({ id }) {
    console.log(id);
}
const user = {id: 1};
userId(user);

分解してみると下記の定義をしているのと同意義になります。

index.js

const { id } = user;

このようにプロパティが増えても問題ありません。また配列も可能になっています。

index.js

function userId({ id, name }) {
    console.log(id);
}
const user = {id: 1, name: alice};
userId(user);

おわりに

下記参考資料になります。非常にわかりやすいのでご一読お勧めいたします！
参考資料：JavaScriptPrimer
まだまだ駆け出しから抜け出せません、、、
早く一人前になりたいですね、、、、