JavaScriptの三項演算子：ステップバイステップガイド

JavaScriptの三項演算子はステートメントを評価し、2つの値のいずれかを返します。ステートメントがtrueまたはfalseのいずれかに評価された場合、値を返すように3項演算子を指示できます。三項演算子の構文は次のとおりです。ステートメント？ if_true：if_false;。

特定の条件が満たされたときにのみ特定のコードを実行したい場合があります。

たとえば、eコマースウェブサイトに生年月日フィールドがあるとします。また、18歳以上の顧客のみがウェブサイトで商品を購入できるようにするとします。ユーザーがサイトを使用する前に、ユーザーが適切な年齢であることを確認する必要があります。

潜在的な結果は真または偽であるため、三項演算子を使用して、ユーザーが適切な年齢であるかどうかを確認できます。

このチュートリアルでは、三項演算子の使用方法について説明します。開始に役立つ例を参照します。

JavaScriptの三項演算子とは何ですか？

条件付き三項演算子として知られるJavaScriptの三項演算子は、JavaScriptのif…elseステートメントに似ています。三項演算子は、条件が満たされているかどうかを確認し、その条件が満たされているかどうかに応じて何かを行います。

三項式の構文は次のとおりです。

(condition) ? if true, then run : if false, then run

条件が最初に来て、次に疑問符が来ます。条件が満たされた場合、最初の式が実行されます。 2番目の条件2番目の条件は、条件が満たされない場合に実行されます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

基本に戻る：ifステートメント

最も基本的なJavaScript条件演算子は、「if」ステートメントです。このステートメントは、条件が満たされた場合にコードのブロックを実行できるようにします。それ以外の場合、プログラムはオプションの「else」ステートメントの内容を実行します。

ifステートメントの例を次に示します。以前に説明したユーザーの年齢を確認するeコマースサイトのシナリオを使用します。

// Declare our customer object
let customer = {
	name: "Joe",
	age: 15
}

if (customer.age >= 18) {
	user_is_right_age = true;
} else {
	user_is_right_age = false;
}

ifステートメントが実行され、 user_is_right_age falseに設定されます 。プログラムはまず、顧客の年齢が18歳以上かどうかを確認します。ユーザーが18歳を超えていないため、else句が実行され、 user_is_right_ageが設定されます。 false 。

このコードは機能しますが、たくさんのコードです！お客様の年齢を確認するには5行かかります。

これと同じ機能を1行のコードで実行する方法があると言ったらどうでしょうか。そこで、三項演算子が登場します。

JavaScriptの三項演算子の例

三項演算子を使用すると、前のifステートメントを簡略化できます。

user_is_right_age = customer.age >= 18 ? true : false;

このコードを実行すると、上記のコードと同じ結果が得られます（ false ）、ただし行数は少なくなります。条件が真の場合（ユーザーの年齢が18歳以上の場合）、プログラムは trueを返します。 。

上記の例では、プログラムはユーザーが適切な年齢であるかどうかをチェックします。コードはfalseを返します ユーザーが18歳未満であるため、条件が満たされていません。

別の例に移りましょう。当サイトの顧客が速達の対象かどうかを確認したいとします。これは、JavaScriptの三項演算子を使用して行うことができます：

let userIsExpressCustomer = true;

let shippingTimeForCustomer = userIsExpressCustomer ? 48 : 72;

三項演算子は、ユーザーがエクスプレス顧客であるかどうかを確認し、ユーザーの配送時間を決定します。上記のように、ユーザーはエクスプレス顧客であるため、条件がtrueと評価され、48時間の配達が行われます。私たちの顧客がエクスプレス顧客ではなかった場合、私たちのコードはfalseと評価されます。したがって、顧客は72時間の配達を受け取ります。

ネストされたJavaScriptの三項演算子

ネストされたJavaScript三項演算子は、別の三項内の三項です。これらのステートメントは、複数の操作を評価する場合に役立ちます。ただし、注意しないとすぐに読みにくくなる可能性があります。

私たちが3つの配達時間を提供するeコマース会社であるとしましょう：標準（72）、速達（48時間）。そして1日（24時間）。この場合、3つのオプションがあるとすると、三項演算子をどのように使用しますか？ if…elseを使用する必要があります 代わりにステートメント？

心配しないでください。3つの式でJS三項演算子を使用することもできます。上記の例の実際の例を次に示します。

let userIsExpressCustomer = false;
let userIs24HourCustomer = true;

let shippingTimeForCustomer = userIsExpressCustomer ? 48 : userIs24HourCustomer ? 24 : 72;

この場合、お客様の発送時間は24時間になります。このプログラムは、最初にユーザーがエクスプレス顧客であるかどうかをチェックしますが、そうではありません。次に、彼らが24時間の顧客であるかどうかをチェックします。これは本当です。つまり、 shippingTimeForCustomer 変数には値24が割り当てられます。

ユーザーがエクスプレスまたは24時間制の顧客でない場合、配達時間は72時間になります。

結論

JavaScriptの三項演算子は、条件がtrueかfalseかを評価する場合に、ifステートメントの代わりになります。複数の三項演算子を別の演算子で囲むことができます。

三項演算子のような条件文は、特定の条件が満たされた場合にのみ特定のコードを実行します。これらは、ほぼすべてのプログラミング言語の主要コンポーネントの1つであり、作成するほぼすべてのJavaScriptプログラムで使用されます。

JavaScriptについてもっと知りたいですか？私たちはあなたをカバーしました。 JavaScriptを学ぶ方法についての完全なガイドがあります。このガイドでは、JavaScriptの知識をさらに深めるために必要なすべてのリソースを紹介しています。