関数から呼び出し元へ値を返す

関数の中で return 文を使用することで呼び出し元へ値を返すことができます。また必要なければ return 文を実行するときに戻り値を省略して呼び出し元へ処理を戻すこともできます。ここでは JavaScript にて関数から呼び出し元へ値を返す方法について解説します。

(Last modified: )

戻り値の基本的な使い方

関数の定義のところでも解説しましたが、もう一度関数からの戻り値についてご説明します。関数の定義では 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

この関数では引数の値を元に面積を計算し、戻り値として呼び出し元へ返しています。なお return 文の後には値だけではなく式を記述できるので次のように記述しても同じ結果となります。 

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

戻り値を指定しないでreturn文を実行した場合

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

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

  return;
}

戻り値を省略した場合、呼び出し元には undefined が返されます。

なお、関数のブロック内に記述した処理が最後まで実行されると自動的に関数の呼び出し元に処理が戻りますので、関数のブロックの最後に return 文を記述する必要はありません。 return 文が実行されず、ブロックの最後まで到達して呼び出し元に戻る場合も undefined が返されます。

戻り値のない return 文の使い方ですが、関数のブロックの中で return 文が実行されると関数ブロック内での処理はそこで終了し呼び出し元に戻ります。その為、関数ブロック内で処理を途中で終了させたい場合に使用します。

次のサンプルを見てください。 

function calsFee(old){
  if (old < 20){
    console.log('20才未満は利用できません');
    return;
  }

  if (old > 30){
    console.log('利用料は 2,000円です');
  }else{
    console.log('利用料は 1,800円です');
  }
}

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

今回のサンプルでは関数に渡された値が 20 未満だった場合にはコンソールにメッセージを出力し return 文を実行します。 return 文が実行された時点で呼び出し元に戻りますので、それ以降の処理は実行されません。

もう一つサンプルを見てください。 

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 文で呼び出し元に戻ります。また奇数だったらメッセージをコンソールに出力し、ブロックの最後まで到達して呼び出し元に戻ります。それぞれの場合で関数から戻された値を変数に一度格納したあとコンソールに出力してみると、どちらも undefined が返されていることが確認できます。

-- --

JavaScript にて関数から呼び出し元へ値を返す方法について解説しました。

( Written by Tatsuo Ikura )

プロフィール画像

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。