JavaScriptには戻り値（もどりち）を返すためのreturn文があります。戻り値を適切に使えるようになると、JavaScriptでできることが増えます。戻り値の基本ルールに加え、エラーを吐いた場合の対処法について解説します。

社内のエンジニア不⾜を解決するたった1つの解決⽅法はこちら

戻り値とreturnの意味

JavaScriptでは、「return」文を使って戻り値を呼び戻し元に返すことが可能です。複雑な計算やプログラムを組む際に戻り値への理解は必須なので、的確に理解しておきましょう。

ここではまず、「戻り値」と「retuen」のそれぞれの意味について解説します。

簡単なWebサイトの改修の内製化を目指すフロントエンド(HTML・CSS・JavaScript)入門5日はこちら

戻り値は関数などの処理で返される値

戻り値はメソッドやサブルーチン、関数などの実行が完了した際に、呼び出し元に返される値のことです。反対に関数などに最初に入力する値は「引数（ひきすう）」と言います。この二つはほぼセットで使われます。

計算結果や処理後のデータなど、複雑な計算式などでよく使います。メッセージや真偽値などを返す場合もあり、一概に数値だけとは言えません。

ひとまずは関数などによって処理された上で返却された値と覚えておきましょう。

returnは処理を終え戻り値を返す役割

returnはJavaScriptにおいては、関数の実行を終了して呼び出し元に値を返す命令文です。戻り値を返す場合はこのreturn文を使うことになります。

returnを使うことで「ある関数で算出された値を別の関数の計算に使う」といった応用が可能になり、プログラミングの幅が劇的に向上します。JavaScriptを使いこなすためにも、return文の使い方についてはきちんと把握しましょう。

returnの書き方と使い方

return文は一般的には、次のような書き方をします。「//」はコメントアウトと呼ばれ、プログラム内で注釈や説明を付けるときに用いられます。

「//」を付けプログラムコードをコメントとして無効化してあるので、プログラムの処理には全く影響しません。

function sample() { 
//計算などの処理を実行する 
return 値や式などを記述する
}

returnの後に続けて値や式を記述します。それでは実際に、return文を使った簡単なコードを記述してみましょう。

function greeting(name) {
return 'ようこそ、' + name + 'さん'; 
} 
console.log( greeting('佐藤') );

この結果を実行すると、「ようこそ佐藤さん」と表示されます。指定した名前（name)を、returnに続く「ようこそ～～さん」という文字列と組み合わせて戻り値として返しています。

このほかにも条件文と組み合わせて「true/false」で返すなど、return文にはさまざまな使い方があります。

■関連記事

戻り値として値を返すパターン

戻り値として返ってくる値は単一とは限りません。複数の値を返す方法、配列として使う方法についても見ていきましょう。

全国の若手~ベテランエンジニアが受講している個別指導のオンライン・リモート講座(入門5日・基礎10日)はこちら

複数の値をreturnで返すケース

複数の値を返すケースもあります。この場合、戻り値をオブジェクト形式にするの次のサンプルに注目してください。

function getObj(name) {
　var obj = { 
　name: name, 
　　text:function(){ 
　　console.log('わたしの名前は' + name + 'です'); 
　　} 
　} 
return obj; 
}

関数の中で任意のオブジェクト「name」を作成しています。nameの中には、指定した名前をそのまま受け取るものと、「私の名前は～～です」に当てはめて出力するメソッドを作っています。

これらのオブジェクトを一斉に「return」すると、複数の値を返すことが可能です。

「getObj('佐藤')」と記述すると、「佐藤」という名前を受け取ったオブジェクトデータを返し、「getObj('田中').text()」と記述すれば、「text」のメソッドを実行し、「私の名前は田中です」という文章を返すことができます。

戻り値を配列として使うケース

配列を戻り値とした扱うケースは「return 配列データ」という書き方のように、因数へ配列を指定した場合です。

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

例えばこの式では「指定した数値に列番を乗算する値を5個まで配列に格納する」という処理を行っています。この処理を実行すると、

[1,2,3,4,5]

という配列を返してコンソールに表示します。このように、戻り値を配列として使うことも可能です。

■関連記事

JavaScriptで戻り値を扱う際の注意点

JavaScriptで戻り値を扱う際には、以下のことに注意する必要があります。ここでは、よくある記述の失敗例と、エラーの種類について解説します。

全国の若手~ベテランエンジニアが受講している個別指導のオンライン・リモート講座(入門5日・基礎10日)資料ダウンロードはこちら

return文がない場合の戻り値はundefined

JavaScriptの場合、関数のブロック内にreturn文がないと、「undefined」という値が返されます。underfinedは（未定義）という意味です。

underfinedと表示された場合は、戻り値を返すためにreturn文を挿入しましょう。

return文と演算式との間での改行はNG

JavaScriptでは、return文と演算式の間に改行を入れることはできません。returnの後に改行があると、『;』が省略されていると解釈されてしまい、『;』が自動挿入されるためです。

『;』は前の文の終了を意味します。そのため、returnと演算式が別の文章として判断されてしまうのです。

多くのエラーは2種類に大別される

JavaScriptのエラーは大きく分けて2種類に分かれます。

一つは『文法エラー』です。コードの途中で、命令文の記述が間違っていると言った記述のエラーで、プログラムが停止してエラーを吐きます。内容はエラーメッセージに表示されます。そのため、どこが間違っているのかを比較的発見しやすいです。

二つ目は『論理のエラー』で、属性や命令文そのものが間違っている場合です。プログラムは正常に動くのですが、間違った結果が表示されます。エラーメッセージには表示されないため、エラーを発見しやすいのが特徴です。

もっと複雑なコードを作成していくようになると、違う種類のエラーが出てくるようにもなりますが、初心者のうちは、この二つのエラーが最も出やすいのではないでしょうか。

■関連記事

JavaScriptの戻り値をマスターしよう

JavaScriptでは、戻り値を使うことで複雑な計算式や、メッセージを返すことが可能になります。

短期5日・10日講座(Java・フロントエンド)研修実績はこちら

戻り値を返す場合は『return文』とセットになるので、戻り値をマスターするためには、returnの使い方もあわせてマスターしましょう。