JS---関数のreturn 文

return 文について

【開発環境】

OS：Win11（64ビット）

VSCode1.72.2、

クロム

 

【戻り値の基本的な使い方】
関数の定義では return 文の値に戻り値を記述することで関数の呼び出し元へ値を返すことができます。

・関数定義

function 関数名(仮引数1, 仮引数2, ...){
  実行される処理;
  ...

  return 戻り値;
}

・関数からの戻り値を変数に格納する場合

let 変数名 = 関数名(実引数1, 実引数2, ...);

・サンプル文
function calcArea(radius){
　const area = radius * radius * 3.14 return area;
}
const area = calcArea(10);

console.log(area);
> 314

console.log(calcArea(8));
> 200.96

又は

function calcArea(radius){
  return radius * radius * 3.14;
}

と書いても良い

【戻り値を指定しない場合】
return 文を実行するとき、特定の戻り値を返す必要がない場合は戻り値を省略することができます。

function 関数名(仮引数1, 仮引数2, ...){
  実行される処理;
  ...

  return;
}

サンプル文

function calsFee(old){
  if (old < 20){
    console.log('20才未満は利用できません');
    return;
  }
//return 文が実行された時点で呼び出し元に戻りますので、それ以降の処理は実行されません。
  if (old > 30){
    console.log('利用料は 2,000円です');
  }else{
    console.log('利用料は 1,800円です');
  }
}

calsFee(25);
> 利用料は 1,800円です
calsFee(18);
> 20才未満は利用できません

サプル2

function checkNum(num){
  if (num % 2 === 0){
    console.log('偶数です');
    return;
  }

  console.log('奇数です');
}

let ret;
ret = checkNum(4);
>> 偶数です
console.log(ret);
>> undefined

ret = checkNum(5);
>> 奇数です
console.log(ret);
>> undefined

今回のサンプルでは関数に渡された値が偶数だったらメッセージをコンソールに出力し、そのあとで return 文で呼び出し元に戻ります。

 

JS--関数へミュータブルな値を渡した時の注意点

関数へミュータブルな値を渡した時の注意点

 

【開発環境】

OS：Win11（64ビット）

VSCode1.72.2、

クロム

 

【イミュータブル（変更可）な値を関数へ渡す場合】

数値や文字列のようにミュータブル(変更不可)な値を引数に指定して関数を呼びだす場合、関数側で引数に対して新しい値を格納しても呼び出し元の値には影響は出ませんが、配列やオブジェクトのようなイミュータブル（変更可）の場合は、反映される。

サンプル--ミュータブルの場合

function square(num){
  num = num * num;
  console.log(num);
}

let num = 10;
square(num);
> 100

console.log(num);
> 10

サンプル---イミュータブルの場合

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

let num = [10, 15, 20];
square(num);
> [100, 225, 400]
console.log(num);//元の値が変化している
> [100, 225, 400]

関数を呼びだす時に配列が格納された変数を引数に指定しています。関数側では渡されてきた配列の各要素の値を二乗したあと配列の値をコンソールへ出力しています。このように関数内で引数に格納されたイミュータブルな値に対して何らかの変更を加えると、呼び出す時に引数に指定した変数の値にも影響がでます。