【JavaScript】戻り値 - 関数で値を返す

JavaScriptの戻り値をご紹介します。

戻り値

戻り値は関数の処理結果を呼び出し元に返す仕組みです。

基本構文

戻り値は関数のブロック内に定義します。

function 関数名( 引数変数 ) {
    // 処理........
    return 戻り値;
}

return 戻り値;の部分が戻り値の定義です。
１つの関数に複数の戻り値を定義することができます。
戻り値がないreturn;のみも可能です。
その場合、戻り値はなく、return;に到達した時点で関数の処理を終了します。

関数の呼び出しは、戻り値がない関数と同じです。

サンプル

function addition( x, y ) {
    let total = x + y;
    return total;
}
 
let z = addition(3, 7);
 
console.log(z);

10

戻り値の定義は３行目のreturn total;です。

addition関数は引数x、yを受け取り、それらの値を加算し、変数totalに記憶します。
最後に変数totalを戻り値として返します。

また、戻り値は変数に代入可能です。。
６行目のように変数 = 関数呼び出しとすることで変数に戻り値を記憶できます。

コンソールの出力結果からも変数zに戻り値10が記憶されていることが分かります。

イメージ

コードの作成・解釈の時は戻り値の動きをイメージすると分かりやすくなります。
『関数の呼び出しの部分が戻り値に置き変わる』イメージです。

例えば先ほどのサンプルコードでは、実行すると６行目のaddition(3, 7)が10に置き変わるイメージです。

あくまでもイメージですが、このイメージを掴むことで、複雑なプログラムも読みやすくなります。

注意点

戻り値（return）は１つの関数に複数定義できます。
ただし、returnが実行されると関数の処理が終了することに注意点してください。

function division( x, y ) {
    if( y == 0 ) {
        return;
    }
    
    let result = x / y;
    
    return result;
}

let z = division(8, 0);

console.log(z);

undefined

calc関数は引数で与えた２つの値で除算します。
変数yが0の場合、if文のブロック内のreturnを実行するため、その時点で関数処理を終了します。

そのため、戻り値はなく、変数zの出力はundefinedとなります。