【JavaScript入門】引数

この記事では「引数のデフォルト値」、「可変長引数」、「名前付き引数」の書き方について説明します。
また、ES2015記法によるargumentsオブジェクトを利用しない表現方法についても説明します。

引数にデフォルト値を設定する方法（従来）
引数にデフォルト値を設定する方法（ES2015）
- undefinedを渡した場合
可変長引数（従来）
可変長引数（ES2015）
- 引数の展開
名前付き引数（従来）
- 明示的に引数を省略する
名前付き変数（ES2015）

引数にデフォルト値を設定する方法（従来）

以下のように書くと、デフォルト値を設定することが出来ます。
引数が渡されなかった場合、デフォルト値が適用されます。

function sample(val1,val2){
    //引数が渡されなかった場合のデフォルト値を設定。
    if(val1 === undefined) {val1 = 1;}
    if(val2 === undefined) {val2 = 2;}

    //実処理
    return val1 * val2;
}
console.log(sample());// 2

引数にデフォルト値を設定する方法（ES2015）

ES2015記法を用いることで以下のように記述できます。

function sample(val1 = 1,val2 = 1){

    return val1 * val2;
}
console.log(sample(3,4));// 12
console.log(sample());// 2

また、デフォルト値にはリテラルだけではなく、他の引数や、関数の結果なども指定することは出来ます。以下は、val2のデフォルト値をval1にした例。

function sample(val1 = 2,val2 = val1){

    return val1 * val2;
}
console.log(sample(3,4));// 12
console.log(sample());// 4

以下は、val2のデフォルト値をx * yの結果にした例

let x = 10;
let y = 20;
function sample(val1 = 2,val2 = (x * y) ){

    return val1 * val2;
}
console.log(sample(3,4));// 12
console.log(sample());// 400

`undefined`を渡した場合

null、false、0を明示的に渡した場合はデフォルト値が適用されませんが、
undefinedを指定した場合はデフォルト値が適用されます。以下はデフォルト値に0を指定した場合とundefinedを指定した場合の例です。

let x = 10;
let y = 20;
function sample(val1 = 2,val2 = (x * y) ){

    return val1 * val2;
}
console.log(sample(0,0));// 0
console.log(sample(undefined,undefined));// 400

可変長引数（従来）

argumentsオブジェクトを利用することで、可変長引数の処理を書くことが出来ます。

function sample(){
    let result = 1;
    for (let val of arguments){
        result *= val
    }
    return result;
}
console.log(sample(1,2,3,4,5));//120
console.log(sample(10,20,30));//6000

可変長引数（ES2015）

...を付けることによって可変長引数になります。

function sample(num, ...args){
    for (let val of args){
        console.log(val);
    }
    return num;
}

console.log(sample(100,'a','b','c'));

実行結果

a
b
c
100

引数の展開

配列を...arrayとすることで、個々の値に展開できるようになりました。
そのため、今までは以下のように書いていた処理が、

let array = [1,2,3,4,5];

console.log(Math.max(array));//NaN
console.log(Math.max.apply(null,array));//5

以下のように書けるようになりました。

let array = [1,2,3,4,5];

console.log(Math.max(...array));//5

名前付き引数（従来）

以下のメリットが有る。
引数が多くなっても、コードの意味がわかりやすい。
省略可能な引数を表現できる。
引数の順番を自由に変更できる。

function sample(args){
    console.log('x: '+ args.x);
    console.log('y: '+ args.y);
    console.log('z: '+ args.z);
    return args.x * args.y * args.z;
}
console.log(sample({z:3,x:1,y:2}));

実行結果

x: 1
y: 2
z: 3
6

明示的に引数を省略する

function sample(args){
    //引数の初期値の設定
    if(args.x === undefined) {args.x = 1;}
    if(args.y === undefined) {args.y = 1;}
    if(args.z === undefined) {args.z = 1;}

    //実処理
    console.log('x: '+ args.x);
    console.log('y: '+ args.y);
    console.log('z: '+ args.z);
    return args.x * args.y * args.z;
}
console.log(sample({z:3,x:1}));

実行結果

x: 1
y: 1
z: 3
3

名前付き変数（ES2015）

分割代入を利用することによりさらにシンプルに書けるようになりました。

function sample({val1 = 1,val2 = 1, val3 = 1}){
    console.log(val1);
    console.log(val2);
    console.log(val3);
    return val1 * val2 * val3;
}
console.log(sample({val3:30, val1:10, val2:20}));

実行結果

この場合、引数を渡さない場合は以下のように記述します。

function sample({val1 = 1,val2 = 1, val3 = 1}){
    console.log(val1);
    console.log(val2);
    console.log(val3);
    return val1 * val2 * val3;
}
console.log(sample({}));

実行結果