【JavaScript】条件（三項）演算子 とは（備忘録）

１．はじめに

・条件式の判定結果に応じて、異なる結果（値）を返すことができる演算子です。

三項演算子の書き方

条件式 ? 真の時の値 : 偽の時の値

２．サンプルプログラム

〇例１：簡単な三項演算子プログラム

Sample_1.js

const age = prompt('年齢を、数値のみで入力してください。', '');
// 入力した文字列を数値に変換
const modify_age = Number(age);

// 三項演算子
const result = modify_age >= 18 ? '成人' : '未成年';

console.log(result);

if/else 文を使用して、上記の三項演算子プログラムを修正。

Sample_2.js

const age = prompt('年齢を、数値のみで入力してください。', '');
// 入力内容を数値に変換
const modify_age = Number(age);

if (modify_age >= 18){
    console.log('成人');
} else {
    console.log('未成年');
}

備考：
prompt() の返り値は、文字列です。
数値として判定する場合、Number() や parseInt() を使用して変換します。

〇例２：複数の疑問符（?）を使用した三項演算子プログラム

Sample_3.js

const score = prompt('0～15までの値を、数値のみで入力してください。', '');
// 入力内容を数値に変換
const modify_score = Number(score);

const result =
    (modify_score >= 16) ? '0～15の値を入力してください' :
    (modify_score >= 10) ? '素晴らしい' :
    (modify_score >= 5 && modify_score <= 9) ? '普通' :
    '頑張ろう';

console.log(result);

〇例３：オブジェクト・空文字列・null を使用した三項演算子プログラム

Sample_4.js

const greeting = (visitor) => {
    // 三項演算子
    const result = (typeof visitor === 'object' && visitor !== null) ? visitor.name : 'お客';
        return `はじめまして、${result}様`;
};

console.log(greeting({name: '山本'})); 
console.log(greeting('山本'));
console.log(greeting(''));
console.log(greeting());

実行結果

はじめまして、山本様
はじめまして、お客様
はじめまして、お客様
はじめまして、お客様

解説：
①． 先ず、console.log(greeting({name: '山本'})); で、greeting 関数を呼び出します。
　　※関数 greeting の visitor に、オブジェクト {name: '山本'} を渡しています。
　↓
②． 関数 greeting 内部の三項演算子で、 visitor がオブジェクトかどうか/null かどうかの判定が行われます。
　↓
③． visitor がオブジェクトであり null でない場合、定数 result には visitor.name の値が代入されます。
　↓
④． 生成された文字列を、console.log に返します。
　　 ※以降、①～④の処理が繰り返されます。

３．まとめ

重要： 三項演算子 と if 文の使い分けについての注意点です。
①． 三項演算子を使用してプログラムの行数を少なくするより、他の人が少しでも早く理解できるプログラムを作成する。
②． 基本的には、if/else 文を使用する。
三項演算子は、三項演算子を使用することでプログラムが簡潔になる場合にのみ使用する。

４．参考

・条件分岐: if, '?'
・条件 (三項) 演算子
・三項演算子の適切な使い方（条件演算子）
・Window.prompt()

５．その他

・実行環境