if文を短く書く！三項演算子とは？

今回は三項演算子で短くif文を書こう！どうやって書くのか？という記事です。

三項演算子という言葉自体なんとなく知っていて、

どうやらif文を短く記述できるらしいぞ、という所までは知っていました。けれど・・・

「今のifやelseで十分じゃないか？」という考えが首をもたげており、覚えようとまではしていませんでした(笑)

しかし、サンプルプログラムなどでソースコードを読むときに三項演算子らしきものが使われているのを見ても正直わからない、読めない・・・

初心者とは言え、調べれば分かる事をそのままにしておくのはよくないなぁと思い記事にして学んでみます。

これから必ず役立つ筈ですし！

それでは参りましょう・・・

MDNのリファレンスによれば、「条件 (三項) 演算子は JavaScript では唯一の、3 つのオペランドをとる演算子です。この演算子は、 if文のショートカットとしてよく用いられます。」とあります。

気になる構文を見ていきましょう。

条件式 ? trueの場合の処理 : falseの場合の処理

ということで・・・

おお・・・

一行で済んだ！

↓いつもの自分はこのような書き方をしていましたが↓

if(条件式) {

    trueの処理;

}else {

    falseの処理;

}

else ifなしでも5行使ってますね。

2セット書けば10行、4セット書けば20行…

対して三項演算子の場合は、

2セット書いても2行、4セット書いても4行…

条件分岐の際に三項演算子を用いることにより、

ソースコードがコンパクトになる効果が期待できそうです。

ちょっとnumの偶奇判定をしてみます。

"use strict";
const num = 15;//判定される数
let result;//偶数か奇数かの結果

num % 2 === 0 ? result = "偶数です。" : result = "奇数です。";

document.write(num + "は" + result);

注目すべきはやはり

num % 2 === 0 ? result = "偶数です。" : result = "奇数です。";

の部分ですね。条件式は、

num % 2 === 0 //2で割り切れるか

trueならば結果を表示する変数resultに"偶数です"、

falseならば"奇数ですね"を格納します。

「条件式」「真」「偽」の三つの項を用いるので

三項演算子という名称のようですね！（たぶん！）

ちょっと敬遠していましたが、習慣にしてしまえば当たり前に書けるようになりそうな気がするので積極的に使っていきたいと思います。

デメリットもあるのかな？とか安易に上位互換とも言えないのかな？とも現時点では思いますが。。。

条件式のバリエーションが増えました（^。^）

あれ、else ifの場合に触れてないな・・・

またの機会に触れたいと思います。

これから学ぶJavaScript

いちばんやさしいJavaScriptの教本 人気講師が教えるWebプログラミング入門【電子書籍】[ 岩田宇史 ]

ではまた次回！

閲覧ありがとうございました(๑•̀ㅂ•́)و✧