はじめに
この記事を読めば、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文の使用を心がけてください。
