JSでよく見る...fugaって？

Rest parametersとスプリット構文

JSを触っていると"...fuga"みたいなのよくみますよね?
出てくる場面としては２パターンあるのですが、
なんとなく理解してても実際説明してみてと言われたら困りそうなので改めて勉強してみました。

Rest parameters

関数の引数の中に(...fuga)を入れる例がRest paramerterを定義している形になります。

function hoge(...fuga){
    console.log(arguments[2]); 　// ["りんご”, "いちご”, "ばなな"]
}
hoge("りんご","いちご","ばなな");

上記を実行するとhoge関数の引数に定義した文字列が配列になることが確認できるかと思います。とても便利ですよね

function hoge(a,...fuga){
    console.log(a); 　// "りんご"
    console.log(...fuga); // ["いちご","ばなな"]
}
hoge("りんご","いちご","ばなな");

またこのように複数の引数を定義することも可能です。

スプリット構文

function hoge(a, b, c) {
	console.log(a); // プルコギ
	console.log(b); // とんかつ
	console.log(c); // すし
}
const fuga = ["プルコギ", "とんかつ", "すし"];
hoge(...fuga);

変数に定義して配列を関数の引数に入れる際...とつけることで展開している様子がわかるかと思います。

function hoge(a, b, c) {
	console.log(a); // プルコギ
	console.log(b); // とんかつ
	console.log(c); // すし
}
const fuga = ["プルコギ", "とんかつ", "すし"];
hoge(fuga[0],fuga[1],fuga[2]);

つまりこれと同じ意味を持ちます。
配列の中身が膨大になると全てを書くのは無謀ですよね！

コードを綺麗にする為にもこういった細かいテクニックを覚えていきたいですよねー！
以上...の紹介でした！

ブログの投稿ログ

# Rest parametersとスプリット構文

# Rest parameters

# スプリット構文

Rest parametersとスプリット構文

Rest parameters

スプリット構文