初心者による ES6 引数

引数のデフォルト

ES6では引数のデフォルト値を宣言するには、「仮引数=デフォルト値」という形式で宣言します。

sample.js

function getPluss(a = 0,b = 0){
 return a + b
}

console.log(getPluss(1, 2))

デフォルト値を使う場合の注意点

1. デフォルト値が適用される場合、されない場合

デフォルト値が適用されるのは、引数が渡されなかった場合です。null, false, 0, 空文字列であっても、引数に渡されているのであればデフォルト値は適用されません。ただし、undefinedは大丈夫です。undefinedは「定義されていない = 渡されていない」だからです。

null / false / 0 / ' ' --> デフォルト値が発動しない
undefined --> デフォルト値が発動する

デフォルト値を持つ仮引数は、引数リストの末尾に置く

これは慣例として、デフォルト値を持つ引数の後方に持たない引数を記述するべきではない。

sample.js

//よい例
function getPluss(a = 0,b = 0){
 return a + b
}

//よい例
function getPluss(a ,b = 0){
 return a + b
}

//悪い例
function getPluss(a = 0,b ){
 return a + b
}

可変長引数の関数を定義する

ES6では、仮引数の前に「...(ピリオド3つ)」を書くことで可変長引数になります。可変長引数とは、渡された任意個の引数を配列としてまとめて受け取る機能です。

たとえば、

sample.js

//...numsで引数を配列として受け取る
function sum(...nums) {
 let result = 0
 for(let num of nums) {
  if(typeof num !== 'number'){
   throw new Error('これは数値ではありません: ' + num)
  }
 result += num
 } 
 return result
}

try {
 console.log(sum(1, 2, 3, 4, 5))
}catch(e){
 window.alert(e.massage)
}

この可変長引数を用いることのメリットは

1. 関数が可変長引数を取ることがわかりやすい

関数ブロック内でも、numsという可変長引数の名前でアクセスできるのでコードの可読性が上がる。

2. すべての配列操作が可能

可変長引数の配列は、Arrayオブジェクトであるためこれによる配列操作は可能であるため扱いやすい。

「...」演算子による引数の展開

「...」演算子は、実引数で利用することで、配列を個々の値に分解することができます。

sample.js

console.log(Math.max(1, 2, 3, 4, 5)) -> 5

console.log(Math.max([1, 2, 3, 4, 5])) -> NaN(エラー)

console.log(Math.max(...[1, 2, 3, 4, 5])) -> 5

実引数の前方に(...)を添えることで、きちんとmaxメソッドが使えるようになる。

名前付き引数でコードを読みやすくする

ES6では、分割代入を利用することで名前付きでよりシンプルに可読性高く表現できる。

sample.js

function getPluss({ a = 1, b = 1}){
 return a + b
}

console.log(getPluss({a : 2, b : 2}))

ここで重要なことは、仮引数を

{プロパティ名 = デフォルト値, ...}

で宣言することで、オブジェクトとして渡された引数を分解！して、関数の配下では個別の引数としてアクセスできることができる。

参考資料

山田祥寛様　「javascript本格入門」