JS 引数とreturn文の基本を分かりやすく解説

今回は関数における、「引数」と「return文」について見ていきます。

JavaScriptでは引数の自由度が非常に高いので、使い方をしっかり覚えておくようにしましょう。

引数
1. 引数の数が異なる場合
引数のデフォルト値
レストパラメーター
引数の値の変化
return 文
1. 複数の値を返す
2. 戻り値のない return文
あとがき

引数

ここでは関数の「引数」について、もう少し詳しく見ていきましょう。

引数の数が異なる場合

const sales = function(item, price){
    console.log('商品 : ' +item);
    console.log('売上金額 : '+price);
}
sales('ジャケット',10000);
 商品 : ジャケット
 売上金額 : 10000

ここでは、「item」と「price」という2つの引数を設定しています。

「sales(‘ジャケット’,10000)」で関数を呼び出し、「商品：ジャケット」、「売上金額：10000」と表示させています。

では売上金額が分からない場合はどうなるでしょうか。

sales('ジャケット');
 商品 : ジャケット
 売上金額 : undefined

このように、2つの引数が設定されているにも関わらず、値を1つしか指定しない場合でもエラーとならずに、「undefind」が表示されるようになっています。

元々の引数に対して少ない値を指定したときは、「undefind」が表示されますが、値が複数（ここでは3つ以上）ある場合は、どうなるでしょうか。

この場合は最初に書かれた2つの値が表示されるだけで、3つ目以上の値は表示されることはありません。

実際にコードを書いて試してみてください。

なお、表示されなかった値を参照する方法はありますが、これは別の機会にご紹介させて頂く予定です。

引数のデフォルト値

const sales2 = function(item, price=0){
    console.log('商品 : ' +item);
    console.log('売上金額 : '+price);
}

sales2('シャツ');
 商品 : シャツ
 売上金額 : 0

先程、値を1つしか書かなかった場合は、2番目の値に「undefind」と表示されていましたが、この表示を防ぐために、引数にデフォルト値を設定しておくことが出来ます。

書き方はとても簡単で、「(item, price=0)」と2番目の引数に、「=」でつないでデフォルト値を設定しておくだけです。

1番目の引数にデフォルト値を設定することは出来ますが、1番目だけにデフォルト値を設定すると、値を1つしか書かない場合は、2番目の値は「undefind」が表示されます。

レストパラメーター

const count = function( ...number){
    for( let i = 0; i<number.length; i++){
        console.log(i + number[i]);
    }
}

count(1,2,3,4);
 1
 3
 5
 7

「レストパラメーター（Rest Parameters)」について見ていきましょう。

レストパラメーターとは、引数の前に「…」ドットを３つ付けると、指定した引数の値をすべて格納してくれるものになります。

ここでは「count(1,2,3,4);」と4つの値を指定していますが、値を増やせば増やした分だけ格納して返してくれます。

count(1,2,3,4,5,6,7,8);
 1
 3
 5
 7
 9
 11
 13
 15

このように値を増やしてもきちんと返してくれます。

ここでは、レストパラメーターとご紹介させて頂いておりますが、「可変長引数」として紹介されることもあると思います。

似たような動作をする「arguments オブジェクト」というものがありますが、基本的には今回学習した「レストパラメーター」を使用するようにしてください。

ただし、「arguments オブジェクト」の概念は覚えておく必要があるかと思います。

JS arguments 関数の中だけで使えるオブジェクト引数がなくても使える

「レストパラメーター」の登場により、使用頻度が減っている「arguments オブジェクト」ですが、その使い方を学習しておくことは大切です。以前に書かれたコードを編集したり、チームでコードを作成したりする際に必要となること...

引数の値の変化

const plus = function(number){
    number = number * number;
    console.log(number);
}

let number = 10;
plus(number);
 100

console.log(number);
 10

引数の指定の仕方によって値が変化することがあります。

まずは「number」に対して、「10」を指定した後に関数を実行します。

関数の中身は、引数×引数なので、計算結果は「100」と返されます。

その後、引数をコンソールに表示してみます。

結果は「10」と表示されています。

このように、特定の数値や文字列を指定したときは、関数を実行しても最初に指定した数値に影響を与えることはありません。

const test = function square(num){
  for (let i = 0 ; i < num.length ; i++){
    num[i] = num[i] * num[i];
  }
  console.log(num);
}

let num = [10,20];

test(num);
(2) [100, 400]

console.log(num);
 (2) [100, 400]

一方、こちらのように配列を使って値を指定した場合はどうでしょうか。

引数「num」に[10,20]を指定して関数を実行すると、「100」と「400」を返します。

その後、コンソールに「num」を表示させると、[100,400]が返されます。

このように配列やオブジェクトを使って引数に値を指定すると、最初に指定した数値に影響を与えます。

return 文

複数の値を返す

return文は関数内で使用すると関数の実行が停止します。

値が指定されていれば、その値を呼び出し元に返します。

const plus = function(a,b){
    return a + b;
};console.log(plus(1,2));
    
 3

return文の戻り値には通常、「値（計算式）」を一つしか記述することが出来ません。

そのため複数の値を返すことが出来ません。

では複数の複数の値を返すにはどうしたら良いでしょうか。

const mathArray = function(num1,num2,num3){
    let plus = num1 * num1;
    let plus1 = num2 * num2;
    let plus2 = num3 * num3;

    return [plus,plus1,plus2];
}

let mathArray1 = mathArray(2,4,6);

console.log(mathArray1);
 (3) [4, 16, 36]

複数の値を返したい場合は、このように「配列」を使うと返すことが出来るようになります。

戻り値のない return文

const division = function(num){
    if(num % 2 === 0){
        console.log('偶数');
        return;
    }
    console.log('奇数');
}

division(2);
 偶数

division(3);
 奇数

値が偶数なのか奇数なのかを表示します。

最初に2で割り切れれば偶数となるので、「偶数」と表示されます。

偶数であればこの時点で関数の処理は終了です。

もし２で割り切れなければ、次の「console.log」で「奇数」と表示されます。

ここでは単純な例なので関数全体の処理が短いため、「return」がなくても問題ありません。

しかし、もっと条件が増えた場合は、「return」があることで、途中で処理を中断することが出来、残りのコードを実行する必要がないので負担を軽減することが出来ます。