モダンJavascript基礎分割代入を学んでコードの可読性を上げよう！ #JavaScript

はじめに

今回はES2015(ES6)で追加された分割代入について学んだことをまとめていこうと思います！
わかりにくいところや間違っているところがあったら、ご指摘お願いします！

まず分割代入について説明していきます。分割代入を簡単に説明すると,

オブジェクトからプロパティを取り出して変数に代入するもの

です。

ちょっとイメージが湧きにくいですよね。コードで解説していきます。


const myProfile = {
  name: "田中",
  age: 20,
};

このようなオブジェクトがあるとします。そしてこのオブジェクトを使った変数を定義します。


const myProfile = {
  name: "田中",
  age: 20,
};

const message1 = `私の名前は${myProfile.name}です。年齢は${myProfile.age}です。`;

この変数message1の中身をconsole.logで見てみると

このようになります。

これでも別にいいのですが、もっとオブジェクトの変数名が長かったり、設定項目が多かったりすると、冗長で読みづらいコードになってしまいます。

そんな時こそ分割代入の出番です！！

const myProfile = {
  name: "田中",
  age: 20,
};
//分割代入構文↓
const {name,age} = myProfile;

この式で何をしているのかというとmyProfileというオブジェクトからname,ageというプロパティを取り出しています。左辺が取り出したプロパティで、右辺が取り出されたオブジェクトになります。

記述する順番に気をつけてください〜。

const myProfile = {
  name: "田中",
  age: 20,
};
const {name,age} = myProfile;
const message1 = `私の名前は${name}です。年齢は${age}です。`;

コードがすっきりしましたね。console.logで変数message1の中身も見てみましょう。

さっきと同じ結果になりました。このように分割代入を使えば、コードの可読性が上がるので、ぜひ使っていきましょう！

オブジェクトだけでなく、配列にも分割代入は使うことができます。

const myProfile = ['田中', 20];
const message1 = `私の名前は${myProfile[0]}です。年齢は${myProfile[1]}です。`;

このようなコードに分割代入を利用すると

const myProfile = ['田中', 20];
const [name,age] = myProfile;
const message1 = `私の名前は${name}です。年齢は${age}です。`;

ここまで読みやすくなります！！
配列の場合、分割代入で最初に指定した変数に配列の0番目の要素が入り、２番目に指定した変数に配列の1番目の要素が入ります。配列は変数の順番が大事になってくるので気をつけてください。

分割代入はよく出てきますし、意味を知ってないと理解できないと思うので、しっかり勉強していきましょう！！！