JavaScriptのreturnを徹底解説！10選のサンプルコードで理解を深めよう

はじめに
●JavaScriptのreturnとは
- ○returnの基本
●returnを使ったサンプルコード
●returnの注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptのreturnを使いこなすことができるようになります。

JavaScript初心者にとって、returnの使い方や注意点が分かりにくいこともあるでしょう。

そこで、この記事ではreturnの基本から応用までを徹底解説し、10選のサンプルコードで理解を深めていきます。

●JavaScriptのreturnとは

returnは、関数から値を返すために使用されるキーワードです。

returnを使用することで、関数を呼び出した場所に対して、結果を返すことができます。

これにより、関数の結果を他の変数や処理で利用することが可能になります。

○returnの基本

returnは、関数内で使用されることが一般的です。

関数内でreturn文を実行すると、その時点で関数の処理が終了し、returnの後に記述された値が関数の戻り値として返されます。

●returnを使ったサンプルコード

それでは、実際にreturnを使ったサンプルコードを見ていきましょう。

○サンプルコード1：関数から値を返す

このコードでは、関数add()を使って2つの数値を足し算するコードを紹介しています。

この例では、関数内で足し算した結果をreturnしています。

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

const result = add(3, 5);
console.log(result); // 8

○サンプルコード2：条件によって異なる値を返す

このコードでは、関数isEven()を使って、引数が偶数か奇数かを判定するコードを紹介しています。

この例では、条件によって異なる値をreturnしています。

function isEven(num) {
  if (num % 2 === 0) {
    return "偶数";
  } else {
    return "奇数";
  }
}

const result = isEven(7);
console.log(result); // 奇数

○サンプルコード3：配列を返す

このコードでは、関数createArray()を使って、1から引数の値までの数値を含む配列を作成するコードを紹介しています。

この例では、配列をreturnしています。

function createArray(n) {
  const array = [];
  for (let i = 1; i <= n; i++) {
    array.push(i);
  }
  return array;
}

const result = createArray(5);
console.log(result); // [1, 2, 3, 4, 5]

○サンプルコード4：オブジェクトを返す

このコードでは、関数createPerson()を使って、名前と年齢を引数として受け取り、オブジェクトを作成するコードを紹介しています。

この例では、作成したオブジェクトをreturnしています。

function createPerson(name, age) {
  const person = {
    name: name,
    age: age
  };
  return person;
}

const result = createPerson("山田太郎", 30);
console.log(result); // { name: '山田太郎', age: 30 }

○サンプルコード5：再帰関数を使った例

このコードでは、関数factorial()を使って、引数の値の階乗を計算する再帰関数のコードを紹介しています。

この例では、関数自身を呼び出す再帰処理を行い、returnで計算結果を返しています。

function factorial(n) {
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

const result = factorial(5);
console.log(result); // 120

○サンプルコード6：無名関数とアロー関数でのreturnの使い方

このコードでは、無名関数とアロー関数を使って、引数の数値を2倍にするコードを紹介しています。

この例では、無名関数とアロー関数それぞれでreturnを使って値を返しています。

const double1 = function (num) {
  return num * 2;
};

const double2 = (num) => {
  return num * 2;
};

const double3 = (num) => num * 2;

console.log(double1(5)); // 10
console.log(double2(5)); // 10
console.log(double3(5)); // 10

○サンプルコード7：関数内でのreturnの連鎖

このコードでは、関数Aと関数Bを使って、関数内で他の関数の戻り値をreturnするコードを紹介しています。

この例では、関数A内で関数Bを呼び出し、その戻り値をreturnしています。

function A() {
  return B();
}

function B() {
  return "関数Bの戻り値";
}

const result = A();
console.log(result); // 関数Bの戻り値

○サンプルコード8：ジェネレータ関数でのreturnの使い方

このコードでは、ジェネレータ関数を用いて、1から3までの数値を順番に返す処理を実装しています。

この例では、ジェネレータ関数内でyieldを用いて値を返し、最後にreturnで終了を示しています。

function* generator() {
  yield 1;
  yield 2;
  yield 3;
  return "終了";
}

const gen = generator();

console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: '終了', done: true }

○サンプルコード9：プロミスとreturnの組み合わせ

このコードでは、プロミスを使って非同期処理を実行し、returnで値を返す処理を紹介しています。

この例では、setTimeoutを使って非同期処理を行い、成功時にはresolve、失敗時にはrejectで値を返しています。

function asyncFunction() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const num = Math.floor(Math.random() * 10);
      if (num % 2 === 0) {
        resolve("成功：" + num);
      } else {
        reject("失敗：" + num);
      }
    }, 1000);
  });
}

asyncFunction()
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  });

○サンプルコード10：returnを使ったエラーハンドリング

このコードでは、関数validate()を使って、引数の数値が正の整数であることを確認するコードを紹介しています。

この例では、条件に合致しない場合にエラーメッセージをreturnしています。

function validate(num) {
  if (typeof num !== "number" || num <= 0) {
    return "エラー：正の整数を入力してください";
  }
  return "正しい入力です";
}

console.log(validate(5)); // 正しい入力です
console.log(validate(-3)); // エラー：正の整数を入力してください
console.log(validate("abc")); // エラー：正の整数を入力してください

●returnの注意点と対処法

return文の注意点として、関数内でreturn文が実行されると、それ以降の処理は実行されず、関数の実行が終了してしまうことが挙げられます。

これを避けるために、適切な位置にreturn文を配置することが重要です。

また、return文がない場合、関数はundefinedを返すことになります。

戻り値が必要な関数では、必ず適切な値をreturnするようにしましょう。

function example1() {
  console.log("このメッセージは表示されます");
  return;
  console.log("このメッセージは表示されません");
}

function example2() {
  if (true) {
    return "Trueの場合の処理";
  }
  // このreturn文は実行されない
  return "Falseの場合の処理";
}

function example3() {
  // return文がないため、undefinedが返される
}

console.log(example1()); // このメッセージは表示されます
console.log(example2()); // Trueの場合の処理
console.log(example3()); // undefined

●カスタマイズ方法

JavaScriptの関数でreturn文を利用する際には、さまざまなカスタマイズが可能です。

例えば、条件演算子を使って、条件に応じた値を簡潔にreturnできます。

function getMessage(score) {
  return score >= 80 ? "合格" : "不合格";
}

console.log(getMessage(90)); // 合格
console.log(getMessage(70)); // 不合格

また、関数を連続して呼び出す場合には、return文を活用して、関数の戻り値を次の関数の引数として使用することができます。

function double(num) {
  return num * 2;
}

function triple(num) {
  return num * 3;
}

const result = double(triple(5));
console.log(result); // 30

まとめ

この記事では、JavaScriptのreturn文の使い方や注意点について説明しました。

return文は、関数の戻り値を返すために必要な要素であり、様々な場面で活用できます。

関数の設計やコーディング時に、適切なreturn文の使用を心がけてください。