▲TOPへ戻る

【javascript】三項演算子 「if文」の処理を簡単かつ効率よく記述しよう

json

三項演算子とは?

三項演算子を使えば、「IF文」と同じような処理を簡単かつ効率よく記述できます。

if文だと5行で書いていたものが、三項演算子を使うと1行で書くことができます。

書き方や、どんな場合に使うかを解説していきます。

三項演算子の書き方

基本

三項演算子 javascript 三項演算子 javascript

時刻が10時前なら、おはよう!
10時以降なら、こんにちは! が変数greetingに格納されます。

let time = 7;
let greeting = time <= 10 ? "おはよう!" : "こんにちは!";

上と下は全く同じ処理をしています。三項演算子で書くとスッキリします。

let time = 7;
let greeting;
if (time < 10) {
  greeting = "おはよう!";
} else {
  greeting = "こんにちは!";
}

else if

else if も三項演算子で書くことができます。

let greeting = time <= 10 ? "おはよう!": time <=18 ? "こんにちは!" : "こんばんは!";

一行が長くなる場合は、改行して書くこともできます。しかし、分岐が多い場合はやはりif文で書いた方が見やすいです。

let greeting = time <= 10 ? "おはよう!"
  : time <=18 ? "こんにちは!" 
  : "こんばんは!";

関数を指定する

以下のように、条件式により関数を呼び出すこともできます。

let language = "e";
language == "ja" ? japanese() 
  : language == "e" ? english()
  : console.log("undifind");;
// => Hello!
  
function japanese(){
  console.log("こんにちは!");
}
  
function english(){
  console.log("Hello!");
}

使用例

文字列かどうかの判定

let judge = typeof 3 == "string" ? true : false;
console.log(judge);  // => false

時間表示で、1~9の時、01,02,03と表示させたい場合。

time = time < 10 ? "0" + time : time;
0あり :
00
0なし :
0

配列(array)からn個取り出す時、 選択した数字(n)がarray.lengthを超えなければ、 n = n
超えれば、 n = array.lengthとする場合。

let n = n < array.length ? n : array.length;

まとめ

  1. 三項演算子 javascript
  2. if文を簡潔に記述することができる。
  3. else if も書くことができる。
  4. 条件式により、関数を呼び出すこともできる。
  5. 分岐が多い時はコードが読みにくくなるのが欠点

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ