公開日： 2018/10/23
最終更新日：2018/10/23

【JavaScript】名前付き引数のサンプル

JavaScript
名前付き引数を利用することで、第二引数だけ指定して第一引数はデフォルト値にするなど、柔軟に引数を指定することができるようになる。

ECMAScript2015より前の書き方

function getAdded(args) {
    if(args === undefined) { args = { val1:1, val2:2 }; }
    if(args.val1 === undefined) { args.val1 = 1; }
    if(args.val2 === undefined) { args.val2 = 2; }
    return args.val1 + args.val2;
}

console.log(getAdded());   //3(1 + 2)
console.log(getAdded({ val1:10 }));   //12(10 + 2)
console.log(getAdded({ val2:10 }));   //11(10 + 1)
console.log(getAdded({ val1:10, val2:5 }));    //15(10 + 5)

function getAdded(args) {

if(args === undefined) { args = { val1:1, val2:2 }; }

if(args.val1 === undefined) { args.val1 = 1; }

if(args.val2 === undefined) { args.val2 = 2; }

return args.val1 + args.val2;

}

console.log(getAdded()); //3(1 + 2)

console.log(getAdded({ val1:10 })); //12(10 + 2)

console.log(getAdded({ val2:10 })); //11(10 + 1)

console.log(getAdded({ val1:10, val2:5 })); //15(10 + 5)

ECMAScript2015以降の書き方

javascriptの新仕様であるECMAScript2015では、より簡潔に記述することができるようになっている。
上記と同じコードを以下のように記述することができる。

function getAdded( {val1 = 1, val2 = 2} ) {
    return val1 + val2;
}

console.log(getAdded({ val1:10 }));   //12(10 + 2)
console.log(getAdded({ val2:10 }));   //11(10 + 1)
console.log(getAdded({ val1:10, val2:5 }));    //15(10 + 5)