Javascriptには大量の省略型が実装されていて、前回は「配列・オブジェクト・関数」について軽く触れました。
今回はif文を中心に、ちょっとした処理なら省略して書いた方がソースがスッキリする書き方を紹介します。
なお、本稿では前回の内容で紹介した省略表記を使用していますので、未読の方は先にコチラをお読みください。
ネストするまでもない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になるパターン
| false | boolern（＝真偽値） |
|---|---|
| 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しか返しません。
- undefinedはfalseと判定される。
- falseを論理否定するとtrueになる。
- 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の型判定を思い込みで間違っており、盛大にハマった事があるので皆さんは注意しましょう。
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文・演算子・その他）でした。
コメント