可読性に有利なカスケード条件付けのリファクタリング

執筆Juan Cruz Martinez ✏️
JavaScriptは、あなたが考えることができるほとんど何かを構築するのに用いられる非常に柔軟なプログラミング言語です.
JavaScriptの柔軟性は、その幅広い機能セットを考慮に入れたものです-しかし、我々が知っているように、それはまたsome strange behaviors それは開発者の想像力に火をつけた.私たちが書いたコードの一部は、スマートでエレガントな方法でこれらの奇妙な問題を解決するために一意に適していますいくつかありません.
この記事では、開発者が開発したさまざまな方法を分析することに焦点を当てますif/else if and switch 文.なぜ?なぜなら、JSでは、私たちはif .

三項演算子，および加重演算子

簡単な関数を条件式で紹介しましょうif , そして、それを使ってそれをリファクタリングしましょうternary operator .

if (condition) {
   return functionTrue();
} else {
   return functionFalse();
}

上の例では何の問題もありませんが、キーワードを繰り返して数行のコードを不必要に取り上げますreturn . 三項演算子は単純化を可能にします.

return condition ? functionTrue() : functionFalse();

そんなに簡単じゃないの?しかし、どのように動作しますか?
三項演算子は、3つのオペランドを取る唯一のJavaScript演算子です.? ), Truthy条件付きのコロンが続く式: ), そして最後に条件付きの虚偽表現.以下のようになります.

condition ? expressionIfTrue : expressionIfFalse

両方ともtrue and false 三項演算子が動作するように式を指定しなければなりません.しかし、条件が真実であるとき、我々が何かをする必要があるならば、どうですか?
JavaScriptは、演算子を使用して式を簡略化する別の方法を提供します&& and || .
条件が満たされたときにステートメントを実行する必要がある別の例を見てみましょう.

if (condition) {
   console.log("it's true!");
}

私たちは、この声明を使用して&& , 以下のように:

condition && console.log("it's true!");

この理由は、JavaScriptが条件文の左から右までオペランドを読み込み、引数を無効にすることができる瞬間を終了することです.だから、&& , 最初の文が虚偽であるならば、全体の式が虚偽であるので、次を評価する点がありません.
同様に|| 演算子はtrue , または、式全体がfalse . 以下の例を見てください.

trueCondition || console.log("Hello world!"); // does not execute the console.log
falseCondition || console.log("Hello world!"); // executes the console.log

式のための複数結果の評価

しばしば、我々がコードを読んでいるか、書くとき、我々は複数の入れ子になっているのを見つけますif 条件-次の関数などの果物の名前を取り、その色を返します.

function getColor(fruit) {
   if (fruit.toLowerCase() === 'apple') {
       return 'red';
   } else if (fruit.toLowerCase() === 'banana') {
       return 'yellow';
   } if (fruit.toLowerCase() === 'orange') {
       return 'orange';
   } if (fruit.toLowerCase() === 'blueberry') {
       return 'blue';
   } if (fruit.toLowerCase() === 'lime') {
       return 'green';
   }

   return 'unknown';
}

コードが期待通りに機能を実行しても、いくつかのことがあります.始めに、方法toLowerCase 各果実に対して複数回呼び出されますが、これはパフォーマンスに影響を与えるだけでなく、機能全体を読みにくくすることができます.
次の最適化はコンディショナーを繰り返すのを避けることです.そして、それはエラーを導入することができた例の数を減らしますtoLowerCase 我々の線の1つの方法.
関数の開始時に一度だけメソッドを呼び出し、それぞれの結果を評価することで、これをすぐに修正することができます switch 文.

function getColor(fruit) {
   switch(fruit.toLowerCase()) {
       case 'apple':
           return 'red';
       case 'banana':
           return 'yellow';
       case 'orange':
           return 'orange';
       case 'blueberry':
           return 'blue';
       case 'lime':
           return 'green';
       default:
           return 'unknown';
   }
}

これは、はるかに良い見ているが、それはまだ感じていない.多くの繰り返しのキーワードは、それを読むことを混乱させる.
以下は別のアプローチです-この記事の冒頭で議論したようなより賢く、よりエレガントなアプローチです.

function getColor(fruit) {
   const fruits = {
       'apple': 'red',
       'banana': 'yellow',
       'orange': 'orange',
       'blueberry': 'blue',
       'lime': 'green',
   };

   return fruits[fruit.toLowerCase()] || 'unknown';
}

単に美しい.これは、各果実と一致する果実を識別するのは簡単です、我々はキーワードを繰り返していない、それは明らかに読んで理解している.
カスケードを解くためのこの方法if ステートメントはジャンプテーブルと呼ばれます.これは、単純なテキストや定数よりも多くのために動作することができますもっと複雑な例を見ましょう.

マップオブジェクトの作成

ジャンプテーブルのアプローチは、シンプルなテキストや定数に最適ですが、どのように複雑な状況では、どのように動作するだろうif 文は関数呼び出しを持つ複数行のコードを持っていますか?
ステートメントを簡素化する方法を理解しているので、これらのより複雑なシナリオのアプローチは簡単です.
を作りましょうcalculate 関数を引数として2つの数値と演算し、演算結果を2つの数値で返します.

function calculate(number1, number2, operation) {
   const operations = {
       '+': (a, b) => a + b,
       '-': (a, b) => a - b,
       '*': (a, b) => a * b,
       '/': (a, b) => a / b,
   }

   return operations[operation]?.(number1, number2) ?? 'invalid operation';
}

予想通り、コードは非常にきれいに見えます、そして、機能は明らかに我々の望ましい結果を得るために必要な計算を実行するために各々の操作に割り当てられます.
何が少し異なって、おそらく奇妙に見えるreturn 声明しかし、その背後にあるアイデアは簡単ですので、それを壊そう.

operations[operation]?.(number1, number2)

式の最初の部分は、単に指定された操作を辞書から返し、キーがあればその関数を実行します.キーが存在しない場合、undefined . この最後の部分はoptional chaining operator .
番目の部分はnullish coalescing operator , は右側のオペランドを返す.null or undefined それ以外の場合は左側のオペランドを返す.

?? 'invalid operation';

したがって、我々の場合では、操作が辞書の中に存在するとき、それは操作の結果を返しますinvalid operation .

結論

JavaScript is a flexible language それは問題を解決するために複数の方法を提供しています.この記事では、伝統的な様々な選択肢を学びましたif あなたがより明確に、より良いコードを書くのを助けることができる声明.
すべての状況に適切である単一の解決策がないので、あなたのコードアーセナルで複数のオプションを持つことは重要です.また、JavaScriptは進化しており、新しい方法が導入されるか、新しいバージョンのロールとして発見されるので、それは接続を維持し、最新の記事を最新の状態に滞在を読むのに役立つ.
読書ありがとう!

デバッグのJavaScriptエラーを簡単にコンテキストを理解することによって

デバッグコードは常に退屈な作業です.しかし、より多くのあなたのエラーを理解しやすく、それを修正することです.
LogRocket 新しいユニークな方法でこれらのエラーを理解することができます.当社のフロントエンド監視ソリューションは、ユーザーがあなたの能力を正確に何がエラーにつながったかを見つけるために能力を与えるためにJavaScriptフロントエンドとのユーザーの関与を追跡します.

LogRocketレコードコンソールログ、ページの読み込み時間、StackTraceは、低速ネットワークのリクエスト/応答ヘッダー/本文、ブラウザのメタデータ、およびカスタムログ.JavaScriptコードの影響を理解することは容易になります!
Try it for free .