【JavaScriptの入門】関数と戻り値

戻り値は、関数の実行が完了した時に呼び出し元に渡される値のことです。
JavaScriptでは、関数の中にreturn文を使って戻り値を指定します。

今回は、戻り値とは何か、またその使い方について解説します。

戻り値

関数を呼び出した時に、関数の呼び出し元に渡される値のことを戻り値と呼びます。返り値と呼ばれることもあります。
return文を使い、関数の実行結果として任意の値を返すことができます。

関数を作る際には、必ずしも戻り値を設定する必要はありません。
通常、戻り値を設定しない関数を実行すると、処理はそこで終了します。

関数を作る → 関数を呼び出す → 関数が実行される

しかし多くの場合、一部の処理の結果を更に他の処理で使用するなど、複数の処理と連携させプログラムを作ります。そこで戻り値が能力を発揮します。

... 関数が実行される → 関数の戻り値が渡される → 関数の戻り値を使って新しい関数を作る

また、戻り値は引数とセットで使われることが多いです。
そのため、戻り値と引数は混同されやすいですが、それぞれの関数との関係性をイメージすると分かりやすいです。

引数：関数に引き渡す値（材料）
関数：処理そのもの（機能）
戻り値：関数から返される値（結果）

ここでは、かんたんにお米を炊く流れに例えてみます。

材料：お米と水
機能：炊飯器で炊く
結果：炊き立てのご飯

このように、材料である引数、材料を処理する機能である関数、また、その結果である戻り値がイメージできます。

戻り値の使い方

ここからは、実際に戻り値の使い方を解説していきます。

戻り値を扱うには、returnキーワードを用います。
return文の後には、値や式を記述することが可能です。

function 関数名(仮引数1, 仮引数2, ...) {
  実行する処理;
  ... 
  return 戻り値;
}

そして、関数を呼び出す際に、変数に格納することで、戻り値を使用することができます。

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

全体を見てみましょう。

function num(x) {
  return x * 10; // 戻り値の指定
}

const result = num(5); // 関数の呼び出し
console.log(result); // 50（関数の戻り値）

このコードは、引数で受け取った値を10倍にして返す関数です。
大まかに、以下の処理が行われています。

関数に仮引数xを定義
関数呼び出し時に実引数5を渡す
仮引数xに実引数5が代入される
実引数5に10を掛けた値をreturn文で返す

値なしのreturn文

特定の戻り値を返す必要がない場合、値なしのreturn文を使うことができます。

function 関数名(仮引数1, 仮引数2, ...) {
  実行する処理;
  ... 
  return;
}

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

function empty() {
  return;
}

console.log(empty()); // undefined

では、なぜ空のreturn文が使われるのでしょうか。
それは、関数ブロック内でreturn文が実行されると、その時点で関数を終了させるためです。
次のように、関数を途中で終了させたい場合に使用します。

function checkNum(num) {
  if (num < 20) {
    console.log('処理される')
    return; // ここで関数は終了
  }
  console.log('処理されない'); // return文以降は処理されない
}

checkNum(18);
// "処理される"

上のコードは、引数に18が入るため、条件式num < 20に対してtrueの評価結果となり、if文内のコンソール出力処理が行われます。
しかし、その後にreturn文を記述することで、直ぐに関数が終了となります。
そのため、return文以降のコンソール出力は処理されないということです。

複数のreturn文

1つの関数の中で複数のreturn文を使うこともできます。

function checkAge(age) {
  if (age >= 20) {
    return 'あなたは' + age + '歳です。お酒を購入できます';
  } else {
    return 'あなたは' + age + '歳です。お酒は購入できません'
  }
}

let overAge = checkAge(22);
console.log(overAge); // "あなたは22歳です。お酒を購入できます"

let underAge = checkAge(18);
console.log(underAge); // "あなたは18歳です。お酒は購入できません"

上のコードでは、年齢が20歳以上だった場合とそうでない場合で処理を分けています。
このように条件分岐の中で戻り値を使うことができるため、より細かい処理を行うことができます。