Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

  1. トップページ
  2. JavaScript中級編 - return文の使い方

return文の使い方

みなさまどうも。いかがお過ごしでしょうか。

続きまして『return文』というものを使ってみましょう。

『return文』を使用すると関数(メソッド)が実行されたときにどの値を返すか指定することができます。そしてそれと同時にその関数の処理も終了させることができますので非常によく使われる構文になります。

プログラミング言語では『値を返す』という表現をされることが多いです。『値を返す』とは『(演算式に)演算結果を返して(教えて)もらう』といった意味になります。

少し数学を思い出してみましょう。以下のような計算式があったとします。

1 + 2

これは『1 + 2』なので答えが『3』になるわけですが、プログラミングでは「『1 + 2』の演算式(計算式)は『3』を返す」という表現をします。

数学における『演算式(計算式)』が『関数』で『答え』が『値』に該当するような感じですね。

ちょっとした言葉のニュアンスとなりますが、プログラミングに慣れていないと混乱しがちなのでよく分からなくなったら単純な計算式に当てはめてみるとイメージが掴みやすいかもしれません。

では『return文』を使った処理を書いてみましょう。まず関数を普通に定義し、その中に『return』と記述し続けて返したい値を指定します。以下のサンプルは『0』を返している感じになりますね。

function hoge(){
    return 0; // 『0』を返すよう定義します。
}
var x = hoge(); // 変数『x』には関数『hoge』から返ってきた『0』が代入されます。

console.log(x); // 『0』が出力されます。

関数を実行させ返ってきた値のことを『返り値』(戻り値)といいます。以下の場合ですと『0』が『返り値』になりますね。

function hoge(){ // この関数の返り値は『0』です。
    return 0;
}

『return文』に続く記述は演算式でもOKです。

function hoge(){
    return 1 + 2; // 『1 + 2』の演算結果『3』を返します。
}
var x = hoge(); // 変数『x』には関数『hoge』から返ってきた『3』が代入されます。

console.log(x); // 『3』が出力されます。

なので以下のように引数を加算して返す、といった処理も構築可能です。

function hoge(text1, text2){
    return text1 + text2; // 『text1』と『text2』を加算(文字連結)して返します。
}
var x = hoge("Hello ", "World"); // 変数『x』には『Hello 』と『World』が文字連結された値が代入されます。

console.log(x); // 『Hello World』が出力されます。

ちなみに『return文』を書いたからといってその返ってきた値を変数などで必ず受け止めなければいけない、というわけではありません。『return文』が書かれている関数を以下のように普通に実行させることもできます。

function hoge(){
    return 0; // 『0』を返します
}
hoge(); // 関数『hoge』を実行させると『0』が返ってきますがその値を代入させたりしなくてもOKです。

JavaScriptでの『return文』は何も値を返さない構文も許可されていますので『return;』とだけ記述してもOKです。その場合は『undefined』が返ってきます。

function hoge(){
    return; // 空の『return文』です。空なので『undefined』を返します。
}
var x = hoge(); // 変数『x』には関数『hoge』から返ってきた『undefined』が代入されます。

console.log(x); // 『undefined』が出力されます。

注意点として『return文』は関数(メソッド)の中でしか書くことができません。以下は関数の外に記述しているのでエラーになります。

return; // 関数の外に『return文』を記述するとエラーになります。

function hoge(){
    return; // 空の『return文』です。空なので『undefined』を返します。
}
var x = hoge(); // 変数『x』には関数『hoge』から返ってきた『undefined』が代入されます。

console.log(x); // 『undefined』が出力されます。

そして『return文』を記述すると値を返した時点でその関数の処理が停止になります。

function hoge(){
    return; // ここで処理が停止されます。
    alert("Hello World"); // 手前に『return文』があるのでこの処理は実行されません。
    alert("Hello World2"); // 手前に『return文』があるのでこの処理は実行されません。
}
var x = hoge(); // 変数『x』には関数『hoge』から返ってきた『undefined』が代入されます。

console.log(x); // 『undefined』が出力されます。

これを応用すると『要素が見つからなかった場合は処理を終了(エスケープ)させる』といった処理を構築することができます。

function changeColor(id, color){ // 要素の文字色を変更する処理です。
    var x = document.getElementById(id); // 要素を取得します。要素が取得できなかった場合『null』が返ってきます。
    if(x === null) return; // 変数『x』が『null』だった場合『return文』を実行させ処理を終了させますのでエラーを回避できます。
    x.style.color = color;
}

この『処理を終了させるためのreturn文』のアルゴリズム(考え方)は非常によく使われるので覚えておいてください。JavaScriptでの『return文』の98%くらいは『関数の処理を停止するため』に書かれている気がします。

JavaScriptで『return文』が書かれていない関数は『undefined』を返します。実装上、あまり使われないかと思いますが念のため覚えておきましょう。

function hoge(){} // 空の関数を定義します。

var x = hoge(); // 『return文』が組み込まれていない関数は『undefined』が返ってきます。
console.log(x); // 『undefined』と出力されます。

JavaScriptでは配列か、オブジェクトを使って複数の値を返り値として設定することが可能です。

function hoge(){
    return [0, 1]; // 『[0, 1]』を返します。
}
var x = hoge(); // 『[0, 1]』が代入されます。配列になりますので注意してください。
console.log(x); // 『[0, 1]』と出力されます。

function hoge2(){
    return {"hoge": 0, "hoge1":1}; // 『{"hoge": 0, "hoge1":1}』を返します。
}
var y = hoge2(); // 『{"hoge": 0, "hoge1":1}』が代入されます。オブジェクトになりますので注意してください。
console.log(y); // 『{"hoge": 0, "hoge1":1}』と出力されます。

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

function hoge(){
    return // 『;』が自動挿入されてしまいますので返り値は『undefined』になってしまいます。
    0;
}

var x = hoge();
console.log(x); // 『undefined』と出力されます。

ちなみに演算式の中での改行は可能です。以下の様なパターンですね。

function hoge(){
    return { // これはOKです。
        "hoge": 0,
        "hoge1":1
    };
}
var x = hoge();
console.log(x); // 『{"hoge": 0, "hoge1":1}』と出力されます。

ちょっとややこしいですが注意するようにしましょう。

というわけで『return文』の解説は以上となります。他のプログラム言語でも『return文』は存在していますが、言語によって挙動がかなり違うため返り値には注意するようにしてください。

続いての記事では『null』と『undefined』について解説していきたいと思います。引き続き頑張っていきましょう。ではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。