【JavaScript】returnって何なの？必要な時といらない時

ホーム

JavaScript

この記事にはプロモーションが含まれています。

投稿：2023・01・06

更新：2023・01・06

JavaScriptを始めとしたプログラミングの学習においては、関数と呼ばれるものが頻繁に出てきます。

JavaScriptにおける関数の仕組み自体は難しいものではないので、基本的な処理程度であれば細かいところまで理解していなくても”何となく”で関数を扱うことができてしまいます。

なので、関数の引数や戻り値の理解が曖昧なままになってしまいがちで、『簡単なDOM操作はできるけど、複雑な処理になると全然理解できない』といった事態に陥ってしまいやすいと言えます。

そしてこの辺りの理解が曖昧だと、returnの必要性や意味の理解も曖昧になってしまいます。

『returnってよく出てくるかと思えば関数に記載されていない場合もあって、一体何なの！？』…と思ったことがある方も多いのではないでしょうか？

そこで今回は、returnの意味と必要性について解説していきます。

この記事を読むことで分かること

・returnの意味
・returnが必要なとき
・returnがいらないとき
・まとめ

– 目次 –

▼returnについての基本
returnの役割
returnが必要なとき
returnが不要なとき
まとめ

▼動画解説は下のサムネイルから（YouTubeに飛びます）

returnの役割

returnとは、関数における処理を確定（終了）し、確定した結果を戻り値として呼び出し元に返すという意味を持ちます。

例えば、第一引数（a）と第二引数（b）を加算する関数で考えてみましょう。

plusNumberという関数名をつけて、そこに処理内容を記載してみたいと思います。

JavaScript

function plusNumber(a,b) {
        return a + b;
}

console.log(plusNumber(1,2)); //3

とてもシンプルな処理ですね。

上の例の場合、a + b という処理内容を確定すると共に、確定した a + b の結果を戻り値として返しています。

returnで戻り値を返さなければ、関数内で実行した処理の結果を渡す相手がいないという状況になるため、関数を実行してもundefinedになってしまいます。

JavaScript

function plusNumber(a,b) {
        a + b;
}

console.log(plusNumber(1,2)); //undefined

またreturnを記載するとそこで処理と戻り値が確定するため、その後に記載された処理は実行されません。

たとえば、下の例では a – b は実行されず、a + b のみを実行するための関数となります。

JavaScript

function plusNumber(a,b) {
        return a + b;
        a - b; // 実行されない
}

console.log(plusNumber(1,2)); //3

以上、
・処理の結果を戻り値として返す
・記載場所で処理を確定（終了）させる
というのがreturnの持つ役割と意味です。

POINT!

・returnは、確定した処理の結果を戻り値として呼び出し元の関数に返す役割を果たす！
・returnを記載するとそこで処理が確定される！
・returnを記載した後の処理は実行されない！

returnが必要なとき

では具体的に、関数でreturnによる戻り値が必要な場合とはどのような場合があるかを考えてみましょう。

まず、戻り値が必要ということは当然ですが、処理の結果（戻り値）を利用したい場合であるということが言えますね。

前章で紹介した、第一引数（a）と第二引数（b）を加算する関数をもう一度確認してみましょう。

JavaScript

function plusNumber(a,b) {
        return a + b;
}

console.log(plusNumber(1,2)); //3

上の例では関数に第一引数と第二引数が指定されていて、それを元に引数を足すという処理をしています。

そしてこの関数を利用することで得たいのは、引数を足し合わせた結果＝戻り値です。

関数で処理された結果（戻り値）を何らかの形で利用したいという場合はreturnの記述が必要になります。

また数値の計算以外にも、引数を配列とし、変数を使って配列の値などを処理した結果を得たい場合も同様です。

たとえば、配列の一番最後の値を取得する関数を例に考えてみましょう。

JavaScript

let arr = [0, 1, 2, 3, 10];

function arrLastNumber(array) {
    //変数lastNumを宣言
    let lastNum;

    //変数lastNumに配列の一番最後の値を格納
    lastNum = array[array.length - 1];

    //lastNumを戻り値として返す
    return lastNum;
}

console.log(arrLastNumber(arr)); //10

上の例では、lastNumという変数に配列データ(array)の一番最後の値を格納するという関数を定義しています。

この関数の実行によって得たいものは、lastNumに格納された値＝処理の結果ですよね。

処理の結果（戻り値）を必要とするということは、returnが必要ということになります。

上の例でもreturnで戻り値を返さなければ、関数を実行してもundifinedとなってしまいます。

プログラムが実行されるだけでOKというわけではなく、実行された上で得られる結果（データ）を使ってさらに何らかの処理をしたい場合にreturnが必要…と理解しておくと良いかと思います。

POINT!

・戻り値が必要な場合はreturnが必要！
・たとえば関数内で処理された計算の結果を得たい場合などが当てはまる！
・プログラムが実行された結果を利用して、さらに別の処理を行いたい場合にreturnが必要と理解しておこう！

returnが不要なとき

関数には必ずreturnを記さなければならないわけではありません。

関数内に書かれた処理が実行されればそれでよい場合…すなわち戻り値が必要ない場合は、returnは省略することが可能です。

例えば下のように、ただ単にコンソールにメッセージを表示するだけの関数の場合、特に戻り値は必要としません。

JavaScript

function consoleMessage() {
    console.log('メッセージを表示');
}

consoleMessage(); //メッセージを表示

上の例の関数はコンソールにメッセージを表示させることが目的なのであって、実行の結果（戻り値）を受け取ってそれを別の場所で再利用したいとか、そういうわけではありませんよね。

このような場合はreturnは必要なく、returnの記載がなくても問題なく関数は実行されます。

もう一つ別の例で考えてみましょう。

配列に任意の数値を追加するという処理を行う関数を宣言→実行してみたいと思います。

JavaScript

let arr = [0, 1, 2, 3, 4];

function arrPlusNumber(array,num) {
     array.push(num);
}

//配列に10を追加
arrPlusNumber(arr, 10);

console.log(arr); //[0, 1, 2, 3, 4, 10]

上の例の場合、関数で第一・第二引数を指定しているので、一見するとなんだか戻り値が必要な気がしてしまいますが、処理の内容を考えると戻り値は必要としないことがわかります。

処理の内容はあくまで、配列に任意の数値を追加することです。

任意の数値を追加した上で配列の合計値を求めたいとか、そういうわけではありませんよね。

合計値を求めるような場合であれば、合計値を格納する変数を宣言してそこに計算式を代入し、それを戻り値として返す必要がありますが、単に配列に数値を追加するだけであれば戻り値は必要ありません。

よって、関数の引数の有無と、戻り値が必要かどうかは関係ないということが言えます。

何か関数を宣言してreturnによる戻り値が必要かどうか悩んだ時は、戻り値として返された値を利用する必要があるかどうかで考えるとわかりやすいかもしれません。

POINT!