Zenn
🗂

[JS/REACT]三項演算子を活用しよう(概論とネスト)

2023/05/03に公開
JavaScript
React
三項演算子
tech

三項演算子の概要

条件 (三項) 演算子は JavaScript では唯一の、3 つのオペランドをとる演算子です。
条件に続いて疑問符 (?)、そして条件が真値であった場合に実行する式、コロン (:) が続き、
条件が偽値であった場合に実行する式が最後に来ます。
この演算子は、 if 文の代替としてよく用いられます。

三項演算子とは、
if/else文を簡潔に表現するための演算子の一つです。
条件式が成立する場合と成立しない場合のそれぞれに対する処理を一つの式で表現することができる。

if/else文を簡潔に表現するための便利な記法ですが、
複雑な処理を行う場合には可読性を優先してif/else文を使用することが推奨されいる。

オペランド(Operand)とは

Operand(オペランド)とは

演算子（operator）によって操作される値または変数のこと。
"被演算子"との呼ばれたりする。　(被演算子は英語でOperand)

例えば、以下のようなコードがあったとする。

let a = 10;
let b = 5;
let c = a + b;

この場合でいくと、　+ が演算子であり、a と b がオペランドだ。
a と b を加算することで、新しい値である c が生成される。
オペランドは、演算子によって処理され、新しい値が生成される。

https://developer.mozilla.org/ja/docs/Glossary/Operand

三項演算子を使おう

【構文】

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

この構文により、if/else文を簡潔に表現することができる。
簡単な例を書くと、

let result = (condition) ? value1 : value2;

conditionが
真であれば value1、偽であれば value2 を result に代入するという処理が
この1行で可能です。

比較して見てみる

一般的なif/else文の例を以下に示す。

条件式 age >= 20 が成立しない場合に '未成年です' を、
成立する場合に '成年です' を result に代入

let age = 18;
let result;
if (age >= 20) {
  result = '成年です';
} else {
  result = '未成年です';
}
console.log(result); 
// '未成年です'

このif/else文を三項演算子を用いて表現すると、以下のようになる。

let age = 18;
let result = (age >= 20) ? '成年です' : '未成年です';
console.log(result); 
// '未成年です'

三項演算子の方が簡潔に見やすいコードになりますね！
効率よく書くことができる。

ネスト可能

三項演算子はネストすることも可能だ。

ex.

let num = 10;
let result = (num % 2 === 0) ? 
  ((num >= 10) ? '10以上の偶数です' : '偶数です') :
  ((num >= 10) ? '10以上の奇数です' : '奇数です');
console.log(result); 
// '10以上の偶数です'

この例では、まず num % 2 === 0 が成立するかどうかで、num が偶数かどうかを判定し、
num >= 10 が成立するかどうかで、num が10以上かどうかを判定している。
これにより、4種類の場合分けを一つの式で表現している。

if/else文を簡潔に表現するための便利な記法ではあるが、
闇雲にしようも良くないし、しようしてはいけないというわけでもない。

複雑な処理を行う場合には可読性を優先してif/else文を使用。
簡潔にできるコードの場合は、三項演算子をしよう

Discussion