ともブロ。

Rails, Vue.js, React.js, JavaScript等、日々学んだ技術・知識を備忘録的に記していきます。

【JavaScript】残余引数について Rest parameters

JSの残余引数についてのメモ。

残余引数とは

ES2015から追加された機能。使用することでより柔軟な関数を作ることができる。 通常、関数において引数は指定した数のみ渡すことができるが、 残余引数を使用すると、不定数の引数を渡すことができる。

使用方法

例1

const book = (...pages) => {
    console.log(pages);
}

book(1, 2, 3, 4, 5); // => [1, 2, 3, 4, 5]

通常の引数と併用できる

残余引数は通常の引数と併用可能。

例2

const book = (title, ...pages) => {
    console.log(title);
    console.log(pages);
}

book("ハリーポッター",1, 2, 3, 4);

上記では、titleがハリーポッター、pagesに1,2,3,4という配列が渡される。 残余という意味合いでは、単独で利用するより理解しやすい。

注意点

残余引数を利用する場合、単独であれば問題ないが、例2のように複数の引数と併用する場合は、必ず最後の引数で残余引数を指定する必要がある。

つまり、

不可の例

const book = (...pages, title) => {
    console.log(title);
    console.log(pages);
} // ×

というように、第一引数に残余引数を持ってくることはできない。