JavaScriptで使うreturn｜実例から注意点まで徹底解説

（最終更新月：2023年12月）

✔このような方へ向けて書かれた記事となります

✔当記事を通じてお伝えすること

• JavaScriptにおけるreturn文の役割
• return文の正確な記述法とその適用方法
• 実際のコードを用いたreturn文の事例

JavaScriptのreturn文の概要に触れつつ、その効果的な活用法を紐解いていくことが当記事の目的です。

さらに、わかりやすい実装例も交えていくので、最後までお見逃しなく。

JavaScriptとその基本

こちらでは、JavaScriptの基本的な特徴と、ステートメントと式の違いについてお伝えします。

これらの基本的な知識は、returnステートメントを含むさまざまなJavaScriptの機能を理解するうえで必要です。

• JavaScriptの概観と特徴
• JavaScriptとreturnの重要性
• ステートメントと式の基本理解

JavaScriptの概観と特徴

JavaScriptは、オブジェクト指向のスクリプト言語で、ブラウザ内での動的な動作やサーバーサイドの開発にも利用されています。

非同期処理をサポートしており、ユーザーとの対話的なウェブページを実現することが可能です。

例:

document.getElementById("button").addEventListener("click", function() {
  alert("Button was clicked!");
});

JavaScriptとreturnの重要性

JavaScriptはWebブラウザ内で実行されるプログラミング言語のひとつで、動的なウェブページを作成する際には欠かせないツールです。

その中でもreturnステートメントは、関数の実行結果を返すためのもの。

このステートメントの理解が不十分だと予期せぬバグの原因となる可能性があります。

function add(a, b) {
  return a + b;
}
console.log(add(2, 3));  // 5

ステートメントと式の基本理解

ステートメントとは、プログラムの一部として動作する命令のことを指し、式は値を返せるコードの断片を指します。

let x = 5;

x + 3は式です。

returnステートメントも、特定の式の結果を返すために使用されるものです。

“return”ステートメントの調査

こちらでは、”return”ステートメントの核心と、JavaScriptでの自動セミコロン挿入の振る舞いについてお伝えします。

“return”の正確な理解は、関数の出力をコントロールするための鍵となるでしょう。

• returnステートメントの基本解説
• “return”と自動セミコロン挿入

returnステートメントの基本解説

returnステートメントは、関数から値を返すときに使用されます。

関数は特定の処理をおこない、その結果として何らかの値を返すことが多いです。

returnを使わずに関数を終了すると、関数はundefinedを返します。

function greet(name) {
    return "Hello, " + name + "!";
}
console.log(greet("Alice"));  // "Hello, Alice!"

“return”と自動セミコロン挿入

JavaScriptは、コードの行の終わりに自動的にセミコロンを挿入することがあります。

returnの後に改行を入れたときに、意図した値が返らない理由です。

function add(a, b) {
    return
    a + b;
}
console.log(add(2, 3));  // undefined

“return”ステートメントの使い方

こちらでは、returnを用いた基本的な戻り値の操作と、戻り値を指定せずにreturn文を実行する際の挙動について解説します。

これにより、関数の出力を適切に制御する方法を学べるはず。

• 基本的な戻り値の操作
• 戻り値の指定なしでのreturn文実行

基本的な戻り値の操作

returnステートメントは、任意の式や値を返せます。

そのため、関数内での計算結果や条件に応じた結果を返すのに役立つでしょう。

function isAdult(age) {
    if (age >= 18) {
        return true;
    } else {
        return false;
    }
}
console.log(isAdult(20));  // true

戻り値の指定なしでのreturn文実行

return文に続く式や値を指定しない場合、関数はundefinedを返します。

関数の実行を中断し、特定の値を返さずに関数から出る場合に使用しましょう。

function logMessage(message) {
    if (!message) {
        return;  // No message to log, so exit the function early
    }
    console.log(message);
}
logMessage();  // Does nothing

次に、returnの実用例やエラー回避のためのガイドなど、初心者が直面するであろう課題や疑問に答えていきます。

“return”の実用例と理解強化

こちらでは、returnステートメントの実践的な使用例と、その深い理解を助ける具体的なケースを紹介します。

関数内でのreturnの正確な使用は、コードの効率と予測可能性を向上させる手助けとなるでしょう。

• 実践的なreturn用途例
• 関数を中断・返すエクサンプル

実践的なreturn用途例

returnステートメントは、データの変換、計算の結果の取得、条件に基づく判断など、さまざまな実用的なシナリオで使用されます。

function calculateTax(price, taxRate) {
    return price + (price * taxRate);
}
console.log(calculateTax(100, 0.08));  // 108

関数を中断・返すエクサンプル

特定の条件が満たされない場合に関数の実行を早期に終了したい場面があります。

returnを使えば、関数から早期の退出も可能です。

function divide(a, b) {
    if (b === 0) {
        console.log('Cannot divide by zero!');
        return;  // Exit the function early
    }
    return a / b;
}
console.log(divide(5, 0));  // Cannot divide by zero! & undefined

初心者のためのエラー回避ガイド

JavaScript初心者は、returnを使う際に一般的なミスを犯すことがあります。

ここでは、これらの一般的なミスとその解決策、さらには正確なreturnの使用方法に関するアドバイスを見ていきましょう。

• よくあるミスとその解決法
• 正確なreturn文の使用に向けたアドバイス

よくあるミスとその解決法

returnステートメントの使用時に頻発する問題のひとつに、複数のreturn文を持つ関数内での予期しない返り値があります。

return文が存在しない場合や、意図しない場所に位置している場合のエラーもよく見られるものです。

function getMax(a, b) {
    return a > b;
    return a;  // This line will never be executed
}

正確なreturn文の使用に向けたアドバイス

return文を使用する際は、関数が期待される動作を常に返すことを確認してください。

また、関数内のすべてのコードパスでreturn文が存在することを確認し、必要に応じてデフォルトの返り値を提供することも重要です。

まとめ

当記事でご紹介したことは以下のとおり。

• returnステートメントは、関数の実行結果を返すもの
• returnステートメントは、任意の式や値を返せる
• データの変換、計算の結果の取得、条件に基づく判断など、さまざまな実用的なシナリオで使用できる

returnステートメントは一定のルールに基づき記述する必要があります。

当記事の注意事項も守り、エラーを回避した正しい使い方を心がけましょう。