分割代入って何？

分割代入とは配列やオブジェクトから値を取り出して、変数として定義し直すものとなります。

const obj = { food: "すし" };
function hoge(obj) {
   console.log(obj.food); //　すし
 }
hoge(obj);

まず分割代入を使わない場合は
変数objを引数に定義してfoodプロパティーをconsole.logで出力をすることになるかと思います。

const obj = { food: "すし" };
function hoge({ food }) {
   console.log(food); //　すし
 }
hoge(obj);

次に分割代入を利用した場合が上記になります。
まず先ほどと同様にhoge(obj)で関数の引数にオブジェクトを入れます。
その後受け取ったobjのfoodというプロパティーを変数として定義しています。

const obj = { food: "すし" };

const { food } = obj;
console.log(food) 　//  すし

またこのように代入演算子を用いてオブジェクトを変数に代入する形と同じように考えることもできます。

function fuga([first, second]) {
   console.log(first); // いくら
   console.log(second); // うに
}
  const array = ["いくら", "うに"];
  fuga(array);

さらに配列でも同様に分割代入を行うことができます。

まとめ

document.addEventListener('mousedown', ({ clientX, clientY }) => {
    const mousePoint = { clientX, clientY };
    console.log(mousePoint);  // {clientX: x座標値, clientY: y座標値}
});

このようにオブジェクトから必要な値をとってきたい時にとても便利ですね！

ブログの投稿ログ

# まとめ

まとめ