JavaScriptのプログラミング言語において関数内の処理について値を返したい場合、”return“を使うとされています。

console.logで戻り値の確認をする

function double(x) { return x * 2; }
console.log(double(5));    // 10

例えば、上記コードのようにdouble関数の引数として5を入れたとしましょう。関数処理の結果をデバッグすると”10″が表示されます。一方で”return”を入れなかった場合はどうなるでしょうか？

function double(x) { x * 2; }
console.log(double(5));    // undefined

この場合は”10″ではなく、”undefined”が表示されます。

関数を呼び出す仕組み

ではなぜ”return”がない場合において、”10″ではなく”undefined”が表示されるのでしょうか？　この理由を関数を呼び出す仕組みから考えてみましょう。

function double(x) { 
    return x * 2; 
}
double(5);

上記で”return”を使った関数定義内で処理したプログラムが実行される順番は、以下の通りです。

• 1. 任意で作成したdouble関数に実引数の”5″が入力される
• 2. 実引数の”5″が仮引数のxに値渡しされる
• 3. 関数定義内の”x * 2″の処理を行う
• 4. 戻り値として”10″を返す

returnを使うと関数定義内の処理結果を、戻り値として表示できるようになります。

function double(x) { 
    x * 2; 
}
double(5);

一方、return”を使わない関数定義内で処理したプログラムが実行される順番は、以下の通りです。

• 1. 任意で作成したdouble関数に実引数の”5″が入力される
• 2. 実引数の”5″が仮引数のxに値渡しされる
• 3. 関数定義内の”x * 2″の処理を行う

こちらのプログラミングでは、値を戻すために必要な”return”が使われていません。そのため”10″は表示されず、代わりに”undefined”が表示されることになります。