【初学者向け】JavaScriptの三項演算子『?』について

今回はJavaScriptの三項演算子について解説していきます。

三項演算子とは

三項演算子とはif文(if~else)の記述を省力して使えるようにした演算子です。

省略できるといっても
『条件式』『trueの場合の処理』『falseの場合の処理』は必ず必要になってきますのでご注意ください。

if文と参考演算子の記述する際のイメージ

①if文の場合

if (条件式) {
trueの場合の処理
} else {
falseの場合の処理
}

[解説]条件式が
trueなら→trueの場合の処理
falseなら→falseの場合の処理

②三項演算子の場合

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

[解説]
☆条件式の後に「？」を記述
→trueなら直後のtrueの場合の処理
→falseなら「:」の後のfalseの場合の処理
となります。
だいぶ短くなりましたね！ このように三項演算子を使えばスッキリと一行で記述できるようになります。

コードで確認

最後に三項演算子のいろんなパターンに記述を確認していきましょう

①シンプルな記述
console.log内で三項演算子を記述

console.log( 10 > 0 ? "trueです" : "falseです" );
// trueです

今回の場合、それぞれ
『条件式』10 > 0
『trueの場合の処理』trueです
『falseの場合の処理』falseです
となります。

②変数に代入して文字列を返す記述

//まずは変数定義
const numCheck = 10 > 0 ? "trueやで" : "falseやで"; 
//console.logで表示
console.log(numCheck);
// trueやで

③改行して見やすくした記述

const num = 10 

num > 0 
    ? console.log("trueやで")
    : console.log("falseやで") 
/// trueやで

④数値がどうかチェックする記述

const num = "10";

const typeCheck = typeof num === 'number' ? "数値です" : "数値ではないです";
console.log(typeCheck);
/// 数値ではないです。
/// const num = 10  なら　"数値です"が表示

⑤関数のreturn部分に記述

const sum = (num1, num2) => {
    return num1 + num2 > 10 ? '10を超えています！' : '10を下回っています';
}

console.log(sum(8,3))  /// 10を超えています！
console.log(sum(8,1))  /// 10を下回っています

まとめ

『条件式』『trueの場合の処理』『falseの場合の処理』の位置をしっかり把握できれば
シンプルに記述できることがわかったと思います。