🚀

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

1 min read

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

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

おわりに


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

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

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

おわり

Discussion

ログインするとコメントできます