🚀

【JS】分割代入の方法まとめ

2021/09/20に公開

JavaScriptにおいて分割代入を知っている、とコードがとても読みやすくなります。

逆に分割代入を使わないと、コードが冗長になってしまいがちです。

なので、今回は分割代入の方法についてまとめていきたいと思います。

配列編


const skills = ["Ruby", "JavaScript", "Java", "Python"];

//例1 Ruby Javaが出力
const [first, , third] = skills;
console.log(first, third);

//例2 Ruby JavaScript Java Python undefined COBOLが出力
const [one, two, three, four, five, six = "COBOL"] = skills;
console.log(one, two, three, four, five, six);

//例3 Ruby [JavaScript, Java, Python]が出力
const [reFirst, ...restArr] = skills;
console.log(reFirst, restArr);

例1

左に[]を使って変数を宣言することで、配列の中身を簡単にとってくることができます。

代入される順番は配列のインデックス順になります。

今回のように1番目と3番目だけを変数に格納したいという場合は、,,を使って対象以外のインデックスを飛ばすことができます。

例2

配列の要素数が4個しかないのにそれ以上の数の変数を宣言した場合は、undefinedが格納されます。

また、=hogeとしておくことでデフォルトの値を格納することができます。

例3

...のレストパラメーターを使うことで、残りの要素を配列として変数に格納することができます。

オブジェクト編


const userInfo = {
  userName: "shinya",
  lastName: "Hinohara",
  firstName: "Shinya",
  sex: "male",
  age: 26,
  admin: true
};

// 例1 shinya male undefined 173が出力
const { userName, sex, hoby, height = 173 } = userInfo;
console.log(userName, sex, hoby, height);

// 例2 26が出力
const {age: years} = userInfo;
console.log(years);

// 例3 Shinya {userName: "shinya", lastName: "Hinohara", sex: "male", age: 26, admin: true} が出力
const { firstName, ...restObj } = userInfo;
console.log(firstName, restObj);

例1

配列と同じように、{}を使って宣言することで、分割して変数に値を代入できます。

存在しないプロパティ名を指定するとundefinedが代入され、=hogeでデフォルトの値を設定できます。

例2

対象のオブジェクトに無いプロパティ名を変数名として使いたい場合は、{hoge: foo}のように指定すれば実現できます。

例3

配列と同じように、レストパラメーターを使うことで残りの値をオブジェクトして宣言することができます。

おわりに


今回は分割代入の方法についてまとめました。

これを上手く使うことで、冗長なコードを読みやすいコードにリファクタできるかと思います。

ぜひ、使ってない人は使ってみてください。

ちなみに、"[]"で囲った場合のスプレッド演算子は、イテレーターというメソッドの処理が実行されます。

けれど、"{}"で囲った場合は、別のメソッドによる処理が実行されます。

こちらはよく分からない方も多いと思うので、そこまで意識しなくても良いことですが一応補足でした。

最後に宣伝です。

0からエンジニアになるためのノウハウをブログで発信しています。
https://hinoshin-blog.com/

また、YouTubeでの動画解説も始めました。
YouTubeのvideoIDが不正ですhttps://www.youtube.com/channel/UCqaBUPxazAcXaGSNbky1y4g

インスタの発信も細々とやっています。
https://www.instagram.com/hinoshin_enginner/

興味がある方は、ぜひリンクをクリックして確認してみてください!

おわり

Discussion