サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

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

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

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

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

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

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

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

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

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

この記事を読むことで分かること
  • ・returnの意味
  • ・returnが必要なとき
  • ・returnがいらないとき
  • ・まとめ

– 目次 –

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!
  1. ・returnは、確定した処理の結果を戻り値として呼び出し元の関数に返す役割を果たす!
  2. ・returnを記載するとそこで処理が確定される!
  3. ・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!
  1. ・戻り値が必要な場合はreturnが必要!
  2. ・たとえば関数内で処理された計算の結果を得たい場合などが当てはまる!
  3. ・プログラムが実行された結果を利用して、さらに別の処理を行いたい場合に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!
  1. ・単に関数の処理が実行されればそれで良い場合はreturnは必要ない!
  2. ・関数の引数の指定の有無は、returnの必要・不必要と直接関係しない!
  3. ・処理の実行による戻り値を利用する必要があるかどうかで、returnの必要性を考えよう!

まとめ

今回の記事の内容を簡潔にまとめました。

returnの役割
関数の処理を確定(終了)し、結果を戻り値として呼び出し元に返す
returnが必要なとき
関数による実行の結果(戻り値)を取得し、他のところでその値を利用したいとき
returnがいらないとき
関数による実行の結果(戻り値)を必要とせず、処理が実行されればそれで良い場合

ちょっとしたDOM操作程度であれば”フワッとした曖昧な理解”でも扱えてしまいますが、少し複雑な処理のコードを理解するには、引数や戻り値といったプログラミングの基礎をしっかり理解しておく必要があります。

プログラミングを難しいと感じたら、まず基本に立ち返って基礎から見直してみると良いかもしれません!

    POINT!
  1. ・returnの役割は処理を確定し、確定した値を戻り値として返すこと!
  2. ・戻り値を取得し、その値をどこかで利用したい場合はreturnが必要!
  3. ・戻り値を必要とせず、関数が実行されるだけでOKの場合はreturnは不要!

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:応用情報技術者/基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン