return文の使い方

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

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

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

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

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

console.log(x); // 『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%くらいは『関数の処理を停止するため』に書かれている気がします。

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

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

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}』と出力されます。

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時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

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

トップページへ

前の記事へ

次の記事へ

Tweet

シェア