Javascriptの省略型の書き方2(if文・演算子・その他)

スポンサーリンク

Javascriptには大量の省略型が実装されていて、前回は「配列・オブジェクト・関数」について軽く触れました。

今回はif文を中心に、ちょっとした処理なら省略して書いた方がソースがスッキリする書き方を紹介します。

 

なお、本稿では前回の内容で紹介した省略表記を使用していますので、未読の方は先にコチラをお読みください。

Javascriptの省略型の書き方1(配列・オブジェクト・関数)
Javascriptには多くの省略型が存在し、時折「やり過ぎて読めないコード」が発生する事があります。本稿では配列・オブジェクト・関数の省略型の基本的な書き方と、省略しても良い「程々の線引き」を提案します。

 

スポンサーリンク

ネストするまでもないif-elseを省略

言語の種類に関わらず「if」は最も使用頻度の高い命令文と言えます。

const hoge = (str) => {
	if(str.length > 0) {
		return str;
	} else {
		return false;
	}
};

window.console.log(hoge("yes")); // yes

文字入力チェックを雑に実装したサンプルコードを使って、色々略してみましょう。

 

三項演算子を使う

if-elseの省略表記で、最も柔軟な書き方が出来るのが三項演算子となります。

早速これを使ってサンプルコードを略してみましょう。

const hoge = (str) => {
	return (str.length > 0) ? str : false;
};

window.console.log(hoge("yes")); // yes

凄くスッキリしたね!

前提条件として「if-elseそれぞれのネスト内に式が1つしか無い時」にしか使えません、if-elseの結果をコロンで区切るので、式を二つ書く事が出来ないのは直感的に理解出来ます。

 

例によって丸括弧は省略出来ますので、一応覚えておきましょう。

const str = "yes";
let hoge;

// condition(=条件式)の丸括弧は省略出来る
hoge = str.length > 0 ? str : false;

window.console.log(hoge); // yes

// conditionが2つ以上でも省略出来る
hoge = str.length > 0 && str === "yes" ? str : false;

window.console.log(hoge); // yes

個人的には丸括弧を付けた方が読みやすいと思うけどね、特に2つ以上の条件式を書くとごちゃごちゃするので。

 

短絡演算子を使う

十分短く書けていますが、この処理内容の場合は更に短い書き方が可能です。

const hoge = (str) => {
	return str || false;
};

window.console.log(hoge("yes")); // yes

更にスッキリしたね!

短絡演算子の||(=OR)を使う事と、以下のコードと等価になります。

if(str) {
	return str;
} else {
	return false;
}

元の条件式だと、引数が渡されなかった時などに「lengthプロパティが無いよ!」ってエラーが出てしまいますが、この書き方なら寛容に処理されます。

ただ、この書き方には1つだけ仕様上の注意があります。

const hoge = (str) => {
	return str || false;
};

// 数値型の0を渡すと「偽」と判定される
window.console.log(hoge(0)); // false

// 文字列型の0を渡すと「真」と判定される
window.console.log(hoge("0")); // 0

プログラミングの世界では「0=false」「1=true」絶対正義なのです。

 

おまけ(全力で略する)

前回の記事で「returnは明示的にしよう」と書きましたが、第三者が初見でも分かるような単純処理、かつコメントを書いておくならセーフと言う考え方も当然アリです。

せっかくなので、このコードを限界まで小さくしてみよう。

// 渡された値をチェックして結果を返す
const hoge = (str) => str || false;

window.console.log(hoge("yes")); // yes

ここまで短くなるなら、そのうち何も書かなくて良くなりそうだね!

AI技術の進歩で「何も書かなくても良い訳ないだろ!」と言い切れないのが怖い所です。

 

if文のcondition(=条件式)を省略する

if文を理解する簡単な方法は、falseになる5つのパターン(※多分)だけを覚える事です。

白か黒しか無い世界だからね、単純に「黒じゃないのは全部白です」って言い換える事が出来ますよと。

 

falseになるパターン

falseboolern(=真偽値)
undefined定義されていない変数
null中身が空の変数
0数値型の0
“”空の文字列

こんだけ、後は全部trueです。

簡単だね!

 

そのまま使う

取りあえず渡された値がfalseじゃない時に何かしたいって言う単純な処理の場合は、そのまま渡された値だけをconditionに書けばOKです。

let hoge = "aaa";

if(hoge) {
	hoge = "bbb";
}

window.console.log(hoge); // bbb

まぁ普通ですね。

 

論理否定で使う

今度は逆に渡された値がfalseなら何かしたいって言う単純な処理の場合、頭に!を一つ書いてあげます。

let hoge;

if(!hoge) {
	hoge = "bbb";
}

window.console.log(hoge); // bbb

この場合hogeはundefined(=何も定義されていない)だからbbbが代入されていますね。

何らかの関数を実行した返り値がfalseの時に処理する、とかで使う事が比較的多い気がします。

 

おまけ(二重否定で使う)

Dreamweaverとかを使っていると、conditionでは「===」「!==」を使って厳密に比較しなさい!と怒られる事があります。

その場合、コードによっては先ほど覚えた「5つのパターンはfalse」ってのが破綻してしまいます。

let hoge;

if(hoge === false) {
	hoge = "bbb";
}

window.console.log(hoge); // undefined

先ほどと同じくhogeはundefined(=何も定義されていない)だから、falseとは違うと判定されてbbbが代入されずに終わってしまう。

そう言う時は!!(=二重否定)を使うと望む結果になります。

let hoge;

if(!!hoge === false) {
	hoge = "bbb";
}

window.console.log(hoge); // bbb

論理否定は例の「5つのパターンはfalse」を用いて、くっつけた値の真偽値をひっくり返す命令で、常にtrueかfalseしか返しません。

  1. undefinedはfalseと判定される。
  2. falseを論理否定するとtrueになる。
  3. trueを更に論理否定するとfalseになる。

反対の反対は表、結果は真偽値のみ。

つまりundefinedがBoolean型のfalseに変換されたって事になります。

よく分かりません!

二重否定すると常にtrueかfalseの2通りしか返って来ないって覚えておきましょう。

 

その他

複数の言語を扱うエンジニアは、ちょくちょく「ど忘れ」と言う謎の現象に出くわす事がある。

今回はJavascriptのif文絡みの投稿なので、私がちょくちょく出くわす謎の現象の忘備録を残しておきます。

 

typeofが返してくるのは文字列

これね、たまに忘れてtypeof hoge !== undefinedとか書いちゃって「んん?」ってなったりする。

この手の間違いは、気付かずに放置すると大変危険です。

true“boolean”
false“boolean”
null“object”
undefined“undefined”
NaN“number”
数値“number”
文字列“string”
配列“object”
オブジェクト“object”
関数“function”

数年前の案件でNaNの型判定を思い込みで間違っており、盛大にハマった事があるので皆さんは注意しましょう。

Not a Numberの略名なのに、なんでnumber型やねん。

 

indexOfをスタイリッシュに書く

去年ぐらいに知って、今では超使ってるチルダ演算子。

これを用いて正数をビット反転させると「符号を反転&正数を-1する」と言う演算が行われるようです。

例えば~3なら3*-1-1=-4~-4なら-4*-1-1=3と言った具合。

この演算の「答えが0になるのは~-1の時だけ」と言う特徴が、indexofの「見つからなかったら-1が返って来る」と噛み合った結果こう言う記述が可能に。

let hoge = "abc";
const str = !~hoge.indexOf("d") ? "nai" : "aru";

window.console.log(str);

hoge(=”abc”)に”d”は含まれていないから-1が返って来てチルダ演算子で0になる、そして0はfalseだから論理否定するとtrueになるので、三項演算子の真が実行された。

 

ちなみに正式名称(?)はビット反転演算子だそうです、ガンダムチックなネーミングでカッコイイね。

 

以上、Javascriptの省略型の書き方2(if文・演算子・その他)でした。

忘備録
スポンサーリンク
theuriをフォローする
THE-URI Studio

コメント

タイトルとURLをコピーしました