最新の JavaScript を最速で学ぶ!

プログラミングアカデミー ゼロプラスワン

JavaScript

JavaScript 三項演算子

投稿日:

今回は、三項演算子、というものについて学んでおきます。

三項演算子は、if () {} else {} の仕組みを、短く書ける記述方法になります。

サンプルを載せます。

順番に説明します。

まず、[1]の内容。
isEven関数というのを定義していて % は、割り算の余りを求める演算子です。2で割って余りが0 だったら true を返す、そうでなければ、false を返すです。偶数かどうかわかりますね。

そして[2]の内容。
10 が 偶数かどうかを判定。当然偶数です。
そこで、三項演算子の、[?] と [:] を使っています。

三項演算子はこのような意味になります。

これは、ほぼ

この書き方と同じことになります。if は処理を行って、三項演算子では、値を返す、というところが少しことなるところです。

ほとんど同じことを、違う書き方でできてしまう、というのは、少しプログラミングを複雑にする要素ではあるのですが、場合場合で、このように書くことができるということだと学んでおくとよいでしょう。

[3]は、[2]と同じ内容ですが、value1 の値が異なる場合の動作です。
9は、偶数ではない、から、そのように表示されるんですね。

[4]は、isEvenの応用で、任意の指定した数値の倍数かどうかを判定する関数です。radixに 2 を指定すると、isEventと同じですが、radix に 3 を指定すると、3の倍数かどうかを判定することができます。

[5]と[6]は、[4]を使って、三項演算子を多段階で使ったときの例です。動作を確認するための一例なので、三項演算子で書くのが適切かどうかってのおいておいてください。if () で書いた方がきれいにかけるかもです。
[5]の場合は、最初のisMultiples(value1, 3) が true になるので、[9は 3の倍数です]と表示されます。

[6]の場合は、値10や値11は3の倍数ではなく、値12が3の倍数になるので、[12は 3の倍数です]という表示になります。

何段階も条件が重なった場合は、三項演算子は少しわかりにくくなるのですが

この形を意識して書くと、処理がわかりやすい、というところになります。

読みにくい、ということで積極的に使わない人もいるのですが、他の人が三項演算子を使ったコードを書いたときに正確に読みこなす必要があるので、理解しておきましょう。

しっかり理解しておけば、他の人が複雑な三項演算子で書いている場合、書き直して(リファクタリングして)、読みやすくしてあげるようなスキルもみにつけていけます。

今回は、こんな感じです。

-JavaScript

Copyright© プログラミングアカデミー ゼロプラスワン , 2019 All Rights Reserved Powered by STINGER.