【JS】分割代入の方法まとめ
JavaScriptにおいて分割代入を知っている、とコードがとても読みやすくなります。
逆に分割代入を使わないと、コードが冗長になってしまいがちです。
なので、今回は分割代入の方法についてまとめていきたいと思います。
配列編
const skills = ["Ruby", "JavaScript", "Java", "Python"];
//例１ Ruby Javaが出力
const [first, , third] = skills;
console.log(first, third);
//例２ Ruby JavaScript Java Python undefined COBOLが出力
const [one, two, three, four, five, six = "COBOL"] = skills;
console.log(one, two, three, four, five, six);
//例３ Ruby [JavaScript, Java, Python]が出力
const [reFirst, ...restArr] = skills;
console.log(reFirst, restArr);
例１
左に[]を使って変数を宣言することで、配列の中身を簡単にとってくることができます。
代入される順番は配列のインデックス順になります。
今回のように１番目と３番目だけを変数に格納したいという場合は、,,を使って対象以外のインデックスを飛ばすことができます。
例２
配列の要素数が4個しかないのにそれ以上の数の変数を宣言した場合は、undefinedが格納されます。
また、=hogeとしておくことでデフォルトの値を格納することができます。
例３
...のレストパラメーターを使うことで、残りの要素を配列として変数に格納することができます。
オブジェクト編
const userInfo = {
userName: "shinya",
lastName: "Hinohara",
firstName: "Shinya",
sex: "male",
age: 26,
admin: true
};
// 例１ shinya male undefined 173が出力
const { userName, sex, hoby, height = 173 } = userInfo;
console.log(userName, sex, hoby, height);
// 例２ 26が出力
const {age: years} = userInfo;
console.log(years);
// 例３ Shinya {userName: "shinya", lastName: "Hinohara", sex: "male", age: 26, admin: true} が出力
const { firstName, ...restObj } = userInfo;
console.log(firstName, restObj);
例１
配列と同じように、{}を使って宣言することで、分割して変数に値を代入できます。
存在しないプロパティ名を指定するとundefinedが代入され、=hogeでデフォルトの値を設定できます。
例２
対象のオブジェクトに無いプロパティ名を変数名として使いたい場合は、{hoge: foo}のように指定すれば実現できます。
例３
配列と同じように、レストパラメーターを使うことで残りの値をオブジェクトして宣言することができます。
おわりに
今回は分割代入の方法についてまとめました。
これを上手く使うことで、冗長なコードを読みやすいコードにリファクタできるかと思います。
ぜひ、使ってない人は使ってみてください。
ちなみに、"[]"で囲った場合のスプレッド演算子は、イテレーターというメソッドの処理が実行されます。
けれど、"{}"で囲った場合は、別のメソッドによる処理が実行されます。
こちらはよく分からない方も多いと思うので、そこまで意識しなくても良いことですが一応補足でした。
最後に宣伝です。
0からエンジニアになるためのノウハウをブログで発信しています。
また、YouTubeでの動画解説も始めました。 YouTubeのvideoIDが不正です
インスタの発信も細々とやっています。
興味がある方は、ぜひリンクをクリックして確認してみてください！
おわり
Discussion