【JavaScript超入門】関数の引数について詳しく解説！

引き続き、関数について学習していきましょう。

前回の記事をまだ読まれていない方は、こちらもあわせてどうぞ。

【JavaScript超入門】関数をマスターしよう今回はJavaScriptの関数について学習していきましょう。 関数は、パラメータを渡し、関数内で何かしらの処理を行い、その結果を...

今回は、関数の引数について、少し詳しく解説します。

基本的な引数の使い方

まずは基本的な引数の使い方について確認しましょう。

function add(num1, num2) {
    return  num1 + num2;
}

let sum = add(1, 2);
console.log(sum); // 3

関数の（）の中に引数を定義することができます。

引数は複数、定義することができます。

定義した引数より少ない値を渡す場合

定義した引数が足りない場合も関数を呼べます。

function add(num1, num2) {
    console.log(num2); // undefined
    return  num1 + num2;
}

let sum = add(1);
console.log(sum); // NaN

定義した引数より多い値を渡す場合

定義した引数より多い値を渡す場合も関数を呼べます。

function add(num1, num2) {
    return  num1 + num2;
}

let sum = add(1, 2, 3, 4, 5);
console.log(sum); // 3

引数のデフォルト値を設定

引数にデフォルト値を設定することができます。

function add(num1 = 1, num2 = 2) {
    return  num1 + num2;
}

let sum = add();
console.log(sum); // 3

引数に値を渡さなかった場合は、デフォルト値が適用されます。

 

可変長引数で複数の値を一度に渡す

もし引数が多い場合、

function add(num1, num2, num3, num4, num5, num6) {

このように引数を定義するのは大変です。また、引数が多くなるほど、可読性が悪くなると言われています。

可変長引数を使用することで、もっと短く書くことができます。

可変長引数は、「…」のようにドット３つ書くことで定義することができます。

function add(...nums) {
    let sum = 0;
    for(const num of nums) {
        sum += num
    }
    return  sum;
}

let sum = add(1, 2 , 3, 4, 5);
console.log(sum); // 3

「…」の書き方は、JavaScriptでよく使う書き方で、配列や、オブジェクトの展開でも使用するので、ぜひ慣れておきましょう。

名前付き引数

引数を名前付きで渡すこともできます。オブジェクトで渡すことで、受け渡し先の引数が明確になります。これを名前付き引数と言います。

また、名前付き引数を使用すると引数の順番が違ってもOKです。

function greet({name, word}) {
    console.log(name, word);
}

greet({word : 'good morning!', name:'suzuki'})