【JavaScript】三項(条件)演算子の使い方について解説

三項演算子

【JavaScript】三項(条件)演算子の使い方について解説

こんにちは、よーすけです。

今回は三項(条件)演算子について解説していきます。

目次

三項(条件)演算子とは?

簡単にいうとif文のショートカットバージョンです。

使用例を見た方がわかりやすいので使用例を紹介します。

使い方

三項(条件)演算子の使い方は以下のようです。

条件式 ? 式1 : 式2

条件式の値がtrueの場合は式1を条件式がfalseの場合は式2を返します。要は

if(条件式){
    式1
} else {
    式2
}

と同じ意味です。

例えば

let age = 20;
if(age >= 18){
    let message = "選挙権があります";
} else {
    let message = "選挙権はありません";
}
console.log(message);
>> 選挙権があります

このようなJavaScriptの例文を以下のように書き換えることが出来ます。

let age = 20;
let message = (age >= 18) ? "選挙権があります" : "選挙権はありません";
console.log(message);
>> 選挙権があります

このように三項(条件)演算子を用いるとif文を1行で書くことができコードを短縮することが出来ます。

また、式1、式2が長くなってしまった場合は以下のように改行することも可能です。

let message = (age >= 18) 
    ? "選挙権があります" 
    : "選挙権はありません";

使用する時の注意点

参考(条件)演算子を使用する上での注意点を説明します。

0 」「 null 」「 NaN 」「 undefined 」「 “” は全てfalseを返す。

let message1 = 0 ? true : false;

let message2 = null ? true : false;

let message3 = NaN ? true : false;

let message4 = undefined ? true : false;

let message5 = "" ? true : false;

console.log(message1);
>> false
console.log(message2);
>> false
console.log(message3);
>> false
console.log(message4);
>> false
console.log(message5);
>> false

三項演算子の中では「 ; 」は使わなくていい。

if文の時は

if(age >= 18){
    let message = "選挙権があります";
} else {
    let message = "選挙権はありません";
}

2行目、4行目のように文末に「 ; 」をつけていましたが三項(条件)演算子の場合は「 ; 」を省略することが出来ます(文末の「 ; 」は必要)。

まとめ

今回は三項(条件)演算子について解説しました。

簡単なif文を用いるときはぜひ三項演算子を導入してみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

よーすけのアバター よーすけ プログラマー

2022年4月 大阪自社開発会社入社
使用言語:JavaScript / PHP / Laravel / Vue.js / (WordPress)
勉強中:React / Next.js / TypeScript

Web制作実績:6件
デザインからコーディング、運用まで幅広く行います
ご依頼はお問い合わせフォームからお願いします。

コメント

コメントする

目次