JavaScript 三項演算子 | プログラミングアカデミーゼロプラスワン

今回は、三項演算子、というものについて学んでおきます。

三項演算子は、if () {} else {} の仕組みを、短く書ける記述方法になります。

サンプルを載せます。

//[1]偶数かどうか判断する関数
const isEven = function(number) {
  return (number % 2) === 0;
};

//[2]
var value1 = 10;
console.log(isEven(value1));  // true と表示
console.log(
  isEven(value1) ? '偶数です。' : '偶数ではありません。'
);  // 偶数です。 と表示

//[3]
var value1 = 9;
console.log(isEven(value1));  // false と表示
console.log(
  isEven(value1) ? '偶数です。' : '偶数ではありません。'
);  // 偶数ではありません。 と表示

//[4]指定値の倍数かどうかを調べる関数
const isMultiples = function(number, radix) {
  return ((number % radix) === 0);
};

//[5]
var value1 = 9;
console.log(
  isMultiples(value1, 3) ? '9は 3の倍数です'
  : isMultiples(value1+1, 3) ? '10は 3の倍数です'
  : isMultiples(value1+2, 3) ? '11は 3の倍数です'
  : '3の倍数がみつかりません'
);  // 9は 3の倍数です  表示

//[6]
var value1 = 10;
console.log(
  isMultiples(value1, 3) ? '10は 3の倍数です'
  : isMultiples(value1+1, 3) ? '11は 3の倍数です'
  : isMultiples(value1+2, 3) ? '12は 3の倍数です'
  : '3の倍数がみつかりません'
);  // 12は 3の倍数です  表示

//[1]偶数かどうか判断する関数

const isEven = function(number) {

return (number % 2) === 0;

};

//[2]

var value1 = 10;

console.log(isEven(value1)); // true と表示

console.log(

isEven(value1) ? '偶数です。' : '偶数ではありません。'

); // 偶数です。と表示

//[3]

var value1 = 9;

console.log(isEven(value1)); // false と表示

console.log(

isEven(value1) ? '偶数です。' : '偶数ではありません。'

); // 偶数ではありません。と表示

//[4]指定値の倍数かどうかを調べる関数

const isMultiples = function(number, radix) {

return ((number % radix) === 0);

};

//[5]

var value1 = 9;

console.log(

isMultiples(value1, 3) ? '9は 3の倍数です'

: isMultiples(value1+1, 3) ? '10は 3の倍数です'

: isMultiples(value1+2, 3) ? '11は 3の倍数です'

: '3の倍数がみつかりません'

); // 9は 3の倍数です表示

//[6]

var value1 = 10;

console.log(

isMultiples(value1, 3) ? '10は 3の倍数です'

: isMultiples(value1+1, 3) ? '11は 3の倍数です'

: isMultiples(value1+2, 3) ? '12は 3の倍数です'

: '3の倍数がみつかりません'

); // 12は 3の倍数です表示

順番に説明します。

まず、[1]の内容。
isEven関数というのを定義していて % は、割り算の余りを求める演算子です。2で割って余りが0 だったら true を返す、そうでなければ、false を返すです。偶数かどうかわかりますね。

そして[2]の内容。
10 が偶数かどうかを判定。当然偶数です。
そこで、三項演算子の、[?] と [:] を使っています。

三項演算子はこのような意味になります。

(判定値) ? [判定値が true なら この値を返す] : [判定値が false なら この値を返す]

1	(判定値) ? [判定値が true ならこの値を返す] : [判定値が false ならこの値を返す]

これは、ほぼ

if (判定値) {
  [判定値が true なら ここの処理を行う]
} else {
  [判定値が false なら ここの処理を行う]
}

if (判定値) {

[判定値が true ならここの処理を行う]

} else {

[判定値が false ならここの処理を行う]

}

この書き方と同じことになります。if は処理を行って、三項演算子では、値を返す、というところが少しことなるところです。

ほとんど同じことを、違う書き方でできてしまう、というのは、少しプログラミングを複雑にする要素ではあるのですが、場合場合で、このように書くことができるということだと学んでおくとよいでしょう。

[3]は、[2]と同じ内容ですが、value1 の値が異なる場合の動作です。
9は、偶数ではない、から、そのように表示されるんですね。

[4]は、isEvenの応用で、任意の指定した数値の倍数かどうかを判定する関数です。radixに 2 を指定すると、isEventと同じですが、radix に 3 を指定すると、3の倍数かどうかを判定することができます。

[5]と[6]は、[4]を使って、三項演算子を多段階で使ったときの例です。動作を確認するための一例なので、三項演算子で書くのが適切かどうかってのおいておいてください。if () で書いた方がきれいにかけるかもです。
[5]の場合は、最初のisMultiples(value1, 3) が true になるので、[9は 3の倍数です]と表示されます。

[6]の場合は、値10や値11は3の倍数ではなく、値12が3の倍数になるので、[12は 3の倍数です]という表示になります。

何段階も条件が重なった場合は、三項演算子は少しわかりにくくなるのですが

(条件1) ? (条件1がtrue のときの値)
: (条件2) ? (条件2がtrue のときの値)
: (条件3) ? (条件3がtrue のときの値)
: (条件4) ? (条件4がtrue のときの値)
: (全ての条件がfalse のときの値)

(条件1) ? (条件1がtrue のときの値)

: (条件2) ? (条件2がtrue のときの値)

: (条件3) ? (条件3がtrue のときの値)

: (条件4) ? (条件4がtrue のときの値)

: (全ての条件がfalse のときの値)

この形を意識して書くと、処理がわかりやすい、というところになります。

読みにくい、ということで積極的に使わない人もいるのですが、他の人が三項演算子を使ったコードを書いたときに正確に読みこなす必要があるので、理解しておきましょう。

しっかり理解しておけば、他の人が複雑な三項演算子で書いている場合、書き直して(リファクタリングして)、読みやすくしてあげるようなスキルもみにつけていけます。

今回は、こんな感じです。