JavaScriptのreturn文完全ガイド｜使い方・注意点・FAQ付き

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. はじめに

JavaScriptは、ウェブサイトやアプリケーションのインタラクティブな機能を実現するために欠かせないプログラミング言語です。その中でも「return」文は、関数の制御や値の返却において非常に重要な役割を果たします。

この記事では、「JavaScriptのreturn文」について、基本的な使い方から応用例、注意点、トラブルシューティングまで詳しく解説します。初心者がよく抱く疑問やエラーを回避するためのヒントも紹介するので、JavaScriptのスキルをさらに向上させる参考にしてください。

さらに、具体例やサンプルコードを多数取り入れ、実際の開発シーンでも役立つ知識を提供します。最後にはFAQセクションも用意しているので、疑問を素早く解決できる内容となっています。

2. return文とは？

JavaScriptの「return」文は、関数の実行結果を呼び出し元に返したり、関数の処理を終了させるために使用されます。プログラムの中で頻繁に登場するこの文は、コードの効率性と可読性を向上させるうえで欠かせません。

2.1 return文の基本構文

JavaScriptの「return」文は次のように記述します。

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

このコードでは、関数addが2つの引数aとbを受け取り、それらの合計を返しています。「return」文によって計算結果が呼び出し元に返され、後続の処理に利用できるようになります。

ポイント:

• 「return」の後に値や式を書くことで、その結果を返すことができます。
• 値を返さない場合はundefinedが返されます。

2.2 return文の役割

「return」文には主に以下の2つの役割があります。

1. 値の返却:
   関数内で処理した結果を呼び出し元に返します。

function square(num) {
    return num * num;
}

let result = square(4);
console.log(result); // 出力: 16

この例では、関数squareが計算した結果を「return」文で返し、その値が変数resultに格納されます。

2. 処理の終了:
   「return」文が実行されると、その時点で関数の処理は終了します。

function isEven(num) {
    if (num % 2 === 0) {
        return true; // 偶数ならここで終了
    }
    return false; // 奇数ならfalseを返す
}

このコードでは、条件に応じて「return」文が即座に処理を終了させ、結果を返します。このように条件分岐で使うと、コードを簡潔にできます。

注意:
「return」文の後に続くコードは実行されません。そのため、処理終了後に実行したいコードは「return」文の前に記述する必要があります。

3. return文の使い方

「return」文は、JavaScriptの関数において最も重要な役割の一つを担っています。このセクションでは、具体的な使用例を取り上げて解説します。

3.1 関数からの値の返却

関数は、計算やデータ処理を行った結果を返すために使用されます。以下の例では、掛け算の結果を返します。

function multiply(a, b) {
    return a * b;
}

let product = multiply(3, 4);
console.log(product); // 出力: 12

解説:

• 関数multiplyは、2つの引数を受け取り、それらを掛けた結果を返します。
• 呼び出し元では、multiply関数の結果をproduct変数に格納し、後続の処理で利用できます。

応用例:
配列の合計を計算する関数：

function sumArray(numbers) {
    let total = 0;
    for (let num of numbers) {
        total += num;
    }
    return total;
}

let result = sumArray([1, 2, 3, 4, 5]);
console.log(result); // 出力: 15

このように、複雑な計算処理も「return」文で結果を返すことでシンプルに扱えます。

3.2 処理の終了

「return」文は、特定の条件で関数の処理を終了させるのにも使われます。

function checkAge(age) {
    if (age < 18) {
        return "未成年です";
    }
    return "成人です";
}

解説:

• 18歳未満の場合は「未成年です」と返し、それ以降のコードは実行されません。
• 条件に応じて異なる結果を返す場合に非常に便利です。

エラーハンドリングの応用:

function divide(a, b) {
    if (b === 0) {
        return "エラー: 0で割ることはできません";
    }
    return a / b;
}

console.log(divide(10, 2)); // 出力: 5
console.log(divide(10, 0)); // 出力: エラー: 0で割ることはできません

このコードでは、0での割り算を回避し、安全に処理を終了できます。

4. return文の注意点

JavaScriptの「return」文は便利で強力なツールですが、使い方によっては予期しない挙動やエラーを引き起こすことがあります。ここでは、「return」文を使用する際の注意点を詳しく解説します。

4.1 戻り値がない場合の挙動

JavaScriptでは、「return」文に値を指定しない場合、自動的にundefinedが返されます。これは意図しないバグを引き起こす可能性があるため、特に注意が必要です。

例1: 値を返さない関数

function doNothing() {
    return;
}

console.log(doNothing()); // 出力: undefined

例2: 戻り値のない関数の利用例

function logMessage(message) {
    console.log(message);
}

let result = logMessage("Hello");
console.log(result); // 出力: undefined

4.2 自動セミコロン挿入によるエラー

JavaScriptではセミコロンを省略できる場合がありますが、プログラムの解釈によって予期しない挙動を招くことがあります。「return」文では特に注意が必要です。

問題例:

function getValue() {
    return
    {
        value: 10
    };
}

console.log(getValue()); // 出力: undefined

解決策:

function getValue() {
    return {
        value: 10
    };
}

console.log(getValue()); // 出力: { value: 10 }

4.3 return文の後のコードは実行されない

「return」文が実行されると、関数内の処理はそこで終了します。そのため、「return」文の後に記述されたコードは無視される点に注意しましょう。

例1: 処理終了後のコード

function example() {
    return "処理終了";
    console.log("このコードは実行されません");
}

console.log(example()); // 出力: 処理終了

4.4 コールバック関数でのreturn文

JavaScriptでは、コールバック関数内で「return」文を使用する際に特有の注意点があります。

例: 配列のフィルタリング

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(num) {
    return num % 2 === 0;
});

console.log(evenNumbers); // 出力: [2, 4]

エラー例:

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(num) {
    num % 2 === 0; // returnを省略
});

console.log(evenNumbers); // 出力: []

改善策:

let evenNumbers = numbers.filter(function(num) {
    return num % 2 === 0;
});
console.log(evenNumbers); // 出力: [2, 4]

5. よくある誤解とトラブルシューティング

JavaScriptの「return」文はシンプルな構文でありながら、意図しない使い方をすると予期しない挙動を招くことがあります。このセクションでは、初心者がよく陥りがちな誤解とその対処法を具体的なコード例を交えて解説します。

5.1 誤解1: return文を使わないと値は返らない？

誤解:
「return」文を省略した場合、関数は値を返さない。

実際:
「return」文を省略した関数は、自動的にundefinedを返します。

例: returnなしの関数

function noReturn() {
    console.log("処理のみ実行");
}

let result = noReturn();
console.log(result); // 出力: undefined

5.2 誤解2: return文の後のコードは実行される？

誤解:
「return」文の後にもコードを記述すれば実行される。

実際:
「return」文が実行された時点で関数の処理は終了します。そのため、「return」文の後のコードは無視されます。

例: 処理終了後のコード

function testReturn() {
    return "ここで終了";
    console.log("このコードは実行されません");
}

console.log(testReturn()); // 出力: ここで終了

5.3 誤解3: 複数の値を直接返せる？

誤解:
「return」文で複数の値を直接返せる。

実際:
JavaScriptでは、複数の値を直接返すことはできません。ただし、配列やオブジェクトを利用することで複数の値をまとめて返すことが可能です。

改善例1: 配列を使う

function getValues() {
    return [1, 2, 3];
}

let values = getValues();
console.log(values); // 出力: [1, 2, 3]

改善例2: オブジェクトを使う

function getUserInfo() {
    return {
        name: "佐藤",
        age: 25
    };
}

let user = getUserInfo();
console.log(user.name); // 出力: 佐藤
console.log(user.age);  // 出力: 25

6. まとめ

この記事では、JavaScriptの「return」文について基本から応用、注意点、トラブルシューティングまで詳しく解説しました。「return」文は関数の結果を返すだけでなく、処理の流れを制御する役割も果たします。

特に初心者が誤解しやすいポイントや実際のコード例を交えた解説を通して、次のような重要な知識を整理しました。

6.1 記事のポイントまとめ

1. return文の基本的な役割

• 関数から値を返す。
• 処理を途中で終了させる。

1. 具体的な使い方

• 値の返却には数値や文字列、配列、オブジェクトなどが使える。
• コールバック関数や条件分岐でも役立つ。

1. 注意点とトラブル回避

• 戻り値を明示しないとundefinedが返される。
• 自動セミコロン挿入による予期しない動作を防ぐためには、オブジェクトリテラルを括弧で囲む。
• 「return」文の後のコードは実行されないため、不要なコードは書かない。

1. 誤解しやすいポイントの克服

• 「return」文を使わない場合の挙動や、複数の値を返す際のテクニックを理解。
• 条件分岐で「return」を忘れないようにすることで、エラーや予期しない結果を防止。

6.2 実践のすすめ

この記事を参考に、実際にJavaScriptコードを書いて「return」文の使い方を試してみてください。特に以下のような課題に挑戦することで、理解が深まります。

課題例:

1. 与えられた配列から偶数だけを抽出する関数を作成する。
2. 入力された数値が偶数か奇数かを判定する関数を作成する。
3. オブジェクトリテラルを返す関数を使ってユーザー情報を取得するシミュレーションを行う。

これらの課題を通して、「return」文の役割や挙動をさらに確認し、実践的なスキルを習得してください。

7. FAQ

Q1: JavaScriptの「return」文を使わないとどうなりますか？

A: 「return」文を使わない場合、関数は暗黙的にundefinedを返します。返却値を明示的に指定しないと、呼び出し元で結果を利用できない可能性があります。

例:

function noReturn() {
    console.log("何も返さない関数");
}

console.log(noReturn()); // 出力: undefined

この例では、「return」文がないため、関数はundefinedを返します。

Q2: return文の後にコードを書くとどうなりますか？

A: 「return」文の後のコードは実行されません。

例:

function testReturn() {
    return "終了";
    console.log("この行は実行されません");
}
console.log(testReturn()); // 出力: 終了

このコードでは、「return」文の後のconsole.logは実行されません。処理は「return」文で終了するため、注意が必要です。

Q3: return文で複数の値を返すことはできますか？

A: JavaScriptでは、複数の値を直接返すことはできませんが、配列やオブジェクトを使えばまとめて返すことができます。

配列を使う場合:

function getNumbers() {
    return [1, 2, 3];
}
console.log(getNumbers()); // 出力: [1, 2, 3]

オブジェクトを使う場合:

function getUser() {
    return {
        name: "田中",
        age: 30
    };
}
let user = getUser();
console.log(user.name); // 出力: 田中

これにより、複数の値を一度に返すことができ、管理やアクセスが簡単になります。

Q4: return文の注意点はありますか？

A: 注意点はいくつかあります。

1. 戻り値を指定しないとundefinedが返される。
2. 自動セミコロン挿入により予期せぬエラーが発生する可能性があるため、オブジェクトを返す場合は括弧で囲む。
3. 「return」文の後にコードを記述しても実行されない。

Q5: コールバック関数では「return」文が必要ですか？

A: はい。コールバック関数では、条件に基づいた結果を返す必要があるため、「return」文を忘れると期待した動作が得られません。

誤りの例:

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(num) {
    num % 2 === 0; // returnを省略しているため、結果が空配列
});
console.log(evenNumbers); // 出力: []

正しい例:

let evenNumbers = numbers.filter(function(num) {
    return num % 2 === 0;
});
console.log(evenNumbers); // 出力: [2, 4]

コールバック関数では「return」を使うことで、条件に合致する結果を正しく返せます。