【Javascript基礎】三項(条件)演算子について

こちら、未だに?とかみると、頭がこんがらがります。
ちょうど他の人が書いたソースをみると、三項演算子の嵐でわけが分からなかったので、勉強し直しました。

三項演算子とは？

if文を簡略できる記述の方法です。よく？や < >こんな記号であるやつです。ソースをみていたら、必ず目にすると思います。

構文は、下記です。

条件式 ? Trueの処理 : Falseの処理

きちんとした概念だとこちら。文章でみると難しいので、実際のソースで確認します。

条件に続いて疑問符 (?)、そして条件が真値であった場合に実行する式、コロン (:) が続き、条件が偽値であった場合に実行する式が最後に来ます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_operator

こちらに、if文と三項演算子で書いてみました。ageの数値を変更すると、切り替わって表示されます。

See the Pen 三項演算子 by komame (@komame) on CodePen.

ソースを見ていると、わかるように、三項演算子で書くと、一文で再現することができます！

const age = 25;
const ageElement = document.getElementById("age");
const ageElement2 = document.getElementById("age2");
//こちらが三項演算子の記述
const result = age >= 18 ? "三項演算子の大人だよ" : "三項演算子の子どもだよ";
ageElement.innerHTML = result;

//こちらがif文で書いた記述
if(age >= 18){
  ageElement2.innerHTML = "if文の大人だよ。";
} else {
  ageElement2.innerHTML = "if文の子どもだよ。";
}

こちらは、ageの値が18以上だと、コロン(：)の左側の処理(trueの処理)が走ります。

const result = age >= 18 ? "三項演算子の大人だよ" : "三項演算子の子どもだよ";
ageElement.innerHTML = result;

正直、わたしはまだif文の記述のほうがみやすいのですが、なれるとこちらのほうがソースを簡略化できるし、返ってきた値を変数に格納することができるので、使い所によったら、こっちの記述のほうがいいときもありそうです。

まとめ

今回は、三項演算子についてまとめました。今だに、論理演算子の以上と表現するときに、=(イコール)はどっちに配置するんだっけ？となるので、使ってなれていきたいと思いました。