JavaScript switch ステートメントをマスターする — SitePoint

May 30, 2023

JavaScript switch ステートメントは、さまざまな条件に基づいてコード内で決定を行う方法です。 これは、複数の if-else ステートメントを使用するよりも、より整理された簡潔な代替手段です。 switch ステートメントは、指定された式 (変数または値) を評価し、それをいくつかの考えられるケースと比較します。 式の値がいずれかのケースに一致する場合、関連するコード ブロック (命令のセット) が実行されます。 一致するものが見つからない場合は、オプションのデフォルト ケースをフォールバックとして実行できます。つまり、他のケースがいずれも適用されない場合に実行されます。

たとえば、day という変数の値をチェックする単純な switch ステートメントを次に示します。

switch ステートメントをマスターすると、よりクリーンで効率的、よりよく整理された JavaScript コードを作成できるようになり、最終的に全体的なプログラミング スキルが向上します。

switch ステートメントはキーワード switch で始まり、その後に括弧内の式が続きます。 この式は、switch ブロックで囲まれた一連の case ラベルと比較されます。 各 case ラベルは個別の値を表し、式が case ラベルの値と一致すると、case に続くコード ブロックが実行されます。 通常、break ステートメントは、一致するケースが実行された後に switch ブロックを終了するために使用され、意図したコード ブロックのみが実行されるようにし、次のケースへのフォールスルーを防ぎます。 オプションで、デフォルトのケースを含めて、どのケース ラベルも式に一致しない場合にフォールバック アクションを提供し、未知の値に対する応答を保証できます。

switch ステートメントは、処理する条件が複数ある場合に if-else ステートメントを使用する代わりに使用できます。 if-else ステートメントは、true または false として表現できる一連の条件をチェックするのに適していますが、複数の異なる値を取ることができる 1 つの式を処理する場合は switch ステートメントの方が効率的です。 基本的に、switch ステートメントを使用すると、管理する関連する条件が複数ある場合に、コードがより整理され、より整理され、読みやすくなります。

たとえば、次の if-else 構造を考えてみましょう。

同等の switch ステートメントは次のようになります。

switch ステートメントは、特に多数のケースを処理する場合に、複数の条件を処理するためのより体系的で読みやすい方法を提供します。 switch ステートメントでは、評価される式は括弧内の変数または値 (この例では変数 color) です。

switch と if-else はどちらも同様の問題を解決しますが、ユースケースに応じて長所と短所があります。 意思決定を支援するために、簡単な switch ステートメントを作成しました。

switch ステートメントは、コードのパフォーマンス、読みやすさ、簡潔さを向上させるために使用できる追加の機能と概念を提供します。

switch ステートメントのデフォルトのケースは、他のケースが指定された式に一致しない場合に実行されます。 これは、予期しない値または不明な値を処理するためのフォールバックとして機能し、一致するケースがない場合でも応答が提供されるようにします。

Break キーワードは、一致するケースが見つかって実行されたときに switch ブロックを終了するために switch ステートメントで使用されます。 これにより、コードが残りのケースの実行を続行することがなくなり、正しい出力のみが生成されるようになります。

ケースの switch ステートメントに複数の条件を含めることはできません。 1 つのケースに複数の条件を組み込むには、フォールスルー手法の使用を検討してください。 時間を節約できるだけでなく、同じことを繰り返すことがなくなります。

switch ステートメントのフォールスルーは、ケース内の Break キーワードを意図的に省略した場合に発生し、ブレークが検出されるか switch ブロックの終わりに到達するまで、コードの実行が次のケースに継続されることを可能にします。 これは、複数のケースが同じ出力またはアクションを共有する場合に便利です。

switch ステートメントを使用するときによくある間違いは、各ケースの後に Break ステートメントを含めないことです。 このエラーにより、意図しないフォールスルーが発生し、目的のケースだけではなく複数のケースが実行されます。

修正方法:フォールスルーを防ぐために、各ケースの後に Break ステートメントを追加します。

Switch ステートメントでは厳密な比較が使用されるため、異なるデータ型を比較す​​るときに予期しない結果が生じる可能性があります。 以下の例では、文字列「2」は数値 2 と等しくありません。この落とし穴により、ケースが意図したとおりに実行されない可能性があります。

修正方法: 変数の型を考慮し、厳密に評価されることを覚えておいてください。 大規模なプロジェクトに取り組んでいる場合は、TypeScript が役立つ場合があります。

switch ステートメントでよくある落とし穴は、ブロック スコープなしで変数を宣言したり、スコープが正しくなかったりして、他の場合に変数にアクセスできてしまったり、構文エラーが発生したりすることです。 複数の句で同じ変数を再宣言しようとすると、Uncaught SyntaxError: ... が発生する可能性があります。

修正点:

句のスコープをブロックします。

switch ステートメントとは何か、どのように機能するか、いつ使用するかがわかったので、実装を開始します。 この記事を楽しんでいただければ幸いです。 この記事や JavaScript 全般について質問がある場合は、SitePoint コミュニティに参加してください。

Mark は SitePoint.com のゼネラル マネージャーです。 彼はテクノロジー、スタートアップ、プログラミング言語、ノーコード ツールについて読んだり書いたりするのが大好きです。