LOADING

mail icon

saco blog logo

Webコーダー日記

TOP＞blog＞勉強記録＞【JavaScript】 戻り値 / return文

【JavaScript】 戻り値 / return文

2024.11.08

勉強記録
JavaScript

JavaScriptの戻り値について調べた内容をメモします。
なるべくシンプルに記述してみました。

戻り値/return文とは

戻り値とは、関数のreturn文で設定する値で、関数の実行が完了した際に呼び出し元に渡される値のこと。
戻り値を返せることで、他の関数で戻り値を利用したり、処理を早期終了させて無駄な処理なく記述をすることができる。（詳しくは後述）

以下の例では、sum関数が2+2の計算結果の4を返しており、その戻り値をnumberに代入しています。

function sum (val1, val2){
//戻り値設定
  return val1 + val2;
}

const number = sum(2,2);//戻り値4がnumberに代入された
console.log(number)//4 が表示される

return文は複数記述できる

複数記述できるが、最初のreturn文が呼び出された時点で処理が終了する。

function checkNumber(num) {
  if (num < 0) {
    return "負の数です"; // 最初の return
  }
  if (num === 0) {
    return "ゼロです"; // 2番目の return
  }
  return "正の数です"; // 3番目の return
}

console.log(checkNumber(-5)); // "負の数です"
console.log(checkNumber(0));  // "ゼロです"
console.log(checkNumber(10)); // "正の数です"

return文は省略できる

関数を作る際、戻り値が必要ない場合は、return文がなくても問題はない。
その際の戻り値は、関数の処理が最後まで実行された時点で、デフォルトでundefinedが返される。

function greet(name) {
  console.log(`こんにちは、${name}さん`);
  // return文がないため、関数は自動的に undefined を返す
}

let result = greet("太郎");  // 挨拶は表示されるが、戻り値は undefined
console.log(result);  // undefined

returnの後述の処理は実行されない

return文の後に処理を記述しても、実行されないので注意。

function sumNum(val1,val2){
  return vel1 + val2;//ここで処理が終了
  console.log("これは実行されません")
}

早期returnと戻り値undefined

function greet(name) {
  if (!name) return;  // 名前がない場合、ここで処理を終了
  console.log(`こんにちは、${name}さん`);
}

const result = greet("");
console.log(result);//戻り値としてundefinedが入る

const result2 = greet("太郎");
console.log(result2);//最終行まで処理が行われ、undefinedが戻り値となる

上記例は、引数に値がない場合にreturn文で処理を終了させている。（早期return）
return文に戻り値を記述していないため、この場合の戻り値は自動的にundefinedとなる。
return文に戻り値を記述しない場合の戻り値がundefinedとなるのは、デフォルトの挙動。
この記述は、関数の処理を早期に終了させたい場合に役立つ書き方。

複数の値をreturnする

オブジェクトや配列を利用して、複数の値をまとめて戻り値として扱うことが可能。

function profileInfo(){
  return {
    name: "yamada",
    age: 22,
    city: "tokyo"
  }
}

const profile = profileInfo();
console.log(profile.name);//yamada

return文を利用するメリット

値を呼び出し元に返すことで、値を再利用できる

関数の戻り値を関数の外で利用できるため、DOM操作や他の処理に活用させることができる。

function add(a, b){
  return a + b;//引数の計算結果をreturn
}

let sum = add(5,3);//戻り値を変数に代入
console.log(sum);//8

処理を途中で終了させることができる

return文が実行されると、そこで処理が終了するので無駄な処理を避けることができる。

if文などと組み合わせて、強制的に関数の中身の処理を終了させるためにreturn文が利用される。

function checkNum(num){
//numが0以下だった場合
  if(num < 0) return "負の整数です";//早期終了し、戻り値を返す

  return "正の整数です";
}

console.log(checkNum(-5));//負の整数です
console.log(checkNum(10));//正の整数です

DOM操作とreturn文

return文を利用したDOM操作の例として、if文を利用して条件を満たない場合に処理を早期終了したり、DOM操作の結果を他の処理に返して再利用する方法などがあります。

DOM操作とreturn文の利用例

テキストボックスが空の場合にエラーメッセージを表示し、空でなければメッセージを更新するという利用例です。

  <input type="text" id="nameInput" placeholder="名前を入力して下さい">
  <!-- ↓ボタンをクリックしたら関数が発動 -->  
  <button onclick="updateMessage()">送信</button>
  <!-- ↓入力した値が表示される -->
  <p id="message"></p>

  <script>
    function updateMessage(){
      const nameInput = document.getElementById("nameInput");
      const input = nameInput.value;
      const message = document.getElementById("message");

      //inputが入力されていなければ処理を終了
      if(!input) {
        message.textContent = "名前を入力して下さい"
        return;
      }

      message.textContent = `こんにちは、${input}さん`;
    }
  </script>

まとめ

  • return文は関数内に記述することで、戻り値を呼び出し元に返すことができる
  • return文を利用するタイミングは、関数による実行結果を取得し、その値を利用したいとき
  • return文の後述の処理は実行されない
  • 戻り値が必要ない時は、return文は省略できる
  • return文を利用すれば、処理を途中で終了させることができる

以上、戻り値の基本的な挙動を見ていきました。
DOM操作におけるreturn文の利用例を見ていくことで、実務での利用パターンの一例を垣間見ることができました。

この記事がもしお役に立てたならとても嬉しいです！
もし記事の内容に誤りを発見された方は、Xまでお知らせいただけるとありがたいです。

本日は以上です。

記事一覧に戻る

NEWS

【JavaScript】コールバック関数

2024.11.12

【JavaScript】Null合体演算子とNull合体代入

2024.11.11

【JavaScript】 戻り値 / return文

2024.11.08

CATEGORY

Google コーディング もりけん塾 作業効率化 勉強記録

TAG

Git GitHub Googleアナリティクス4 GSAP IPアドレス JavaScript Nuxt.js Visual Studio Code Vite Vue.js アニメーション ショートカットキー 内部トラフィック 環境構築 読書

PROFILE

saco profile img

SACO

1990年12月生まれ / 岡山県在住

WEBコーダーです。
2019年から独学でweb製作の勉強を開始し、2020年にコーダーに転身しました。
製作の備忘録など記していきます。
ショートカットキー、notionが好きです。

ポートフォリオサイトです

saco portfolio logo