How to Use the return Statement - Japanese Only

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

続きまして『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』について解説していきたいと思います。引き続き頑張っていきましょう。ではー。

This article was written by Sakurama.

Author's beloved small mammal

桜舞 春人 Sakurama Haruto A Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him.

If you find any errors or copyright issues, please contact us.

Home

Previous

Next

Tweet

シェアする