戻り値の取得は、色々なプログラムで利用されます。JavaScriptにおける戻り値の使い方について学んでいきましょう。function（関数）の戻り値についての基本的な書き方をはじめ、戻り値に関する基本を解説します。技術研修などでJavaScriptを学ばれている方はしっかり理解しましょう。

functionの戻り値とは？

JavaScriptの「function」は、処理をまとめた関数のことです。JavaScriptでは、functionの中で戻り値を返すよう処理を記載する場合が多く存在します。

そもそも、戻り値とは何でしょうか？戻り値の役割と書き方について見ていきましょう。

理解度に合わせた個別指導でJavaScriptも学べるオンライン・リモート講座(入門5日・基礎10日はこちら

functionの処理結果で返される値

戻り値とは、function（関数）が実行された結果、呼び出し元に渡される値のことです。

let sample = 'I am a man';
let Gender = sample.replace('man', 'woman');
console.log(Gender);

上記のコードでは、sampleの文字列の上でreplaceの関数を実行し、「man」と「woman」の2つの関数を引き渡しています。この関数の処理が完了した際に、戻り値を「Gender」という変数に代入するという処理を行っています。

戻り値とはこのように、計算の途中で値を別の関数に渡すために返すようなことを行うためのものです。

呼び出し元へ返すにはreturnを使う

戻り値を呼び出し元へ返すには、「return」を使います。基本的な戻り値の記述は以下です。

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

JavaScriptでは、returnの記述がない関数は「undefined」として返します。また、return文の後には改行を入れることができず、改行があった場合は「;」が省略されているものとして判断されてしまいます。

戻り値を扱う上で注意しましょう。

■関連記事

戻り値のパターンによる処理の違い

戻り値が1つとは限りません。複数の戻り値を扱う場合や、配列として扱う場合など、さまざまなパターンがあり、それによって処理が異なります。

ここでは、代表的な戻り値のパターンと、それによる処理の違いについて見ていきましょう。

通年開講プロエンジニア育成コース(Java1~3ヶ月)－株式会社ジョブサポート

戻り値が複数の場合

複数の戻り値を返す場合は、オブジェクトの形式にしてしまうのがもっともシンプルです。

function getgreet(name) {
　var greet = {
　　name: name, text:function() {
　　　console.log('おはようございます,' + name + 'さん');
　　}
　} 
　return greet;
}
console.log( getgreet('田中') );
getgreet('佐藤').text();

上記のコードでは、関数の中で任意のオブジェクトを作成しています。

オブジェクトの中身は、関数を実行する際に名前を受け取る「name:name」のメソッドと、受け取った名前を使ったテキストとして出力する出力する「console.log」のメソッドがあります。

この複数のメソッドを「return」すると、複数の値が入ったオブジェクト構造を、そのまま返すことができます。

上記のコードで、「console.log( getgreet('田中') );」と記述するとオブジェクトデータが、「getgreet('佐藤').text();」と記述すると、オブジェクトデータの中にあるtextのメソッドを実行します。

戻り値が配列の場合

戻り値を配列として返す場合は、引数に配列を指定します。

function getnumber( num ) {
　var results = [];
　for(var i=1; i<6; i++) {
　　results.push( i + num );
　}
　return results;
}
console.log( getnumber(2) );

上記では、指定した数字に1ずつ加算した値を5個まで格納する関数を作っていますので、[ 3, 4, 5, 6, 7 ]が返されます。

■関連記事

さまざまな戻り値の返し方

戻り値について、return文を使わない場合や、関数を指定する場合、そのほか、さまざまな戻り値の返し方について見ていきましょう。

戻り値を指定せずreturn文実行

戻り値を指定せずにreturn文を記述した場合は、underfindが返ってきます。

なお、function内の処理が最後まで実行されると、JavaScriptでは自動的に関数の呼び出し元に処理が戻るので、functionの最後であればreturnの記述は不要です。

return文が実行された場合、そこでfunctionの処理が終了して呼び出し元に処理が戻るため、returnはfunctionの処理を途中で中断させたい場合などにも使われます。

function（関数）を戻り値に指定することもできる

function（関数）自体を戻り値として指定することもできます。次のコードを見てみましょう。

function count(number) {
　return function(number) {
　　return number + 1;
　}
}
var result = count();
console.log( result(3) );

このコードでは、「引数にプラス1をする」という簡単な処理のオブジェクトを作っています。関数がresultに代入され、上記の例では3の値に1がプラスされて4の値を返してきます。

この仕組みを応用して、もっと複雑なfunctionを戻り値として指定して、Webアプリやショッピングサイトなどを制作することもあります。

戻り値をtrueかfalseで返すことはできる？

以下のサンプルコードとと共に見ていきましょう。

function greet( name ) {
　var result = name + 'さん、おはようございます';
　if( name ) {
　　return true;
　}
　else {
　　return false;
　}
}
console.log(greet() );

この例では、引数である名前が記述されていません。そのため、通常の処理をすると関数内のnameはunderfindとして出力されますので、if文に当てはめると、falseの値が実行されます。

returnの値が真（true）でない場合はfalseの値を返す、という処理を入れておけば、上記のコードではfalseの値を返します。

戻り値を使った条件分岐

戻り値をそのまま条件分岐に当てはめてみましょう。

function Jud( countA, countB ) {
　return countA + countB;
}
if( Jud(5, 7) > 10) {
　console.log( '10より上' );
}
else {
　console.log( '10以下');
}

この式では、countAとcountBの合計値を戻り値として返し、続くif文で「それが10より大きいなら'10より上'というログを出す」「10以下なら'10以下'というログを出す」ということを行っています。

このように、戻り値を条件分岐に当てはめてその後の処理を変えるという記述はJavaScriptではよく使いますので、覚えておくと良いでしょう。

■関連記事

functionや戻り値、returnを覚え先に進もう

戻り値は、JavaScriptではよく使います。戻り値を使った条件分岐を行うことで、例えば「1000円以上の場合は配送料無料」というような、ショッピングで見られるような処理も行えるようになるためです。

戻り値は、JavaScriptを使う上では大切な要素なので、必ず使えるようになっておきましょう。基本的な書き方だけでなく、戻り値が複数である場合や配列である場合、戻り値を返さなかった場合など、いくつものパターンを覚えることが重要です。