【JavaScript】引数
この記事では「引数のデフォルト値」、「可変長引数」、「名前付き引数」の書き方について説明します。
また、ES2015記法によるargumentsオブジェクトを利用しない表現方法についても説明します。
以下のように書くと、デフォルト値を設定することが出来ます。
引数が渡されなかった場合、デフォルト値が適用されます。
js
function sample(val1,val2){
//引数が渡されなかった場合のデフォルト値を設定。
if(val1 === undefined) {val1 = 1;}
if(val2 === undefined) {val2 = 2;}
//実処理
return val1 * val2;
}
console.log(sample());// 2
ES2015記法を用いることで以下のように記述できます。
js
function sample(val1 = 1,val2 = 1){
return val1 * val2;
}
console.log(sample(3,4));// 12
console.log(sample());// 2
また、デフォルト値にはリテラルだけではなく、他の引数や、関数の結果なども指定することは出来ます。 以下は、val2のデフォルト値をval1にした例。
js
function sample(val1 = 2,val2 = val1){
return val1 * val2;
}
console.log(sample(3,4));// 12
console.log(sample());// 4
以下は、val2のデフォルト値をx * yの結果にした例
js
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を指定した場合の例です。
js
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オブジェクトを利用することで、可変長引数の処理を書くことが出来ます。
js
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
...を付けることによって可変長引数になります。
js
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とすることで、個々の値に展開できるようになりました。
そのため、今までは以下のように書いていた処理が、
js
let array = [1,2,3,4,5];
console.log(Math.max(array));//NaN
console.log(Math.max.apply(null,array));//5
以下のように書けるようになりました。
js
let array = [1,2,3,4,5];
console.log(Math.max(...array));//5
以下のメリットが有る。
引数が多くなっても、コードの意味がわかりやすい。
省略可能な引数を表現できる。
引数の順番を自由に変更できる。
js
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
js
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
分割代入を利用することによりさらにシンプルに書けるようになりました。
js
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}));
実行結果
10
20
30
6000
この場合、引数を渡さない場合は以下のように記述します。
js
function sample({val1 = 1,val2 = 1, val3 = 1}){
console.log(val1);
console.log(val2);
console.log(val3);
return val1 * val2 * val3;
}
console.log(sample({}));
実行結果
1
1
1
1
以上で記事の解説はお終い！
HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！