ワンライナーで書ける!JavaScriptでif文を省略して書く3つの演算子

@ハクト 2022-09-19 12:56:50に投稿

if文を省略できワンライナーで書ける演算子を3つ紹介します。

素のJavaScriptの場合、可読性を考えるとif文で書いたほうが保守がしやすくなることもあります。

ただVueやReactなどのフレームワークでは「JavaScript式」で書く場面が多々あり、if文等が動作しません。

フロントエンド開発を行うのであれば以下の演算子を覚えておくことでスムーズに開発できるかと。

 

論理演算子(&&) 

let num=1
if(num == 1){
  console.log(num + num); //2
}
//左辺がtrueならば右辺を実行する
(num == 1) && console.log(num + num); //2 

三項演算子

let str2;
if (str1 == 'a'){
  str2='b';
}else{
  str2='c';
}
let str2 = str1 == 'a' ? 'b':'c';

Null合体演算子

let str2;
if (str1 === null || str1 === undefined){
  str2='';
}else{
  str2=str1;
}
let str2 = str1 ?? '';
//以下のようなメソッド指定にも使える
str2 = (str1 ?? '').substr(0,2);

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter