JavaScriptの論理演算による存在チェックについて

Published: 2016年3月20日 by tomsato

概要

JavaScriptの論理演算や変数の存在チェックについて
説明しなくても何となく見ればわかるかもしれないがあまり見ない書き方だったのでまとめる

JavaScript勉強シリーズ

変数の存在チェックについて

宣言していない変数を使おうとするとReferenceErrorが起きる

print(a); // Exception: ReferenceError: Can't find variable: a

var a = 1;
print(a); // 1

これを回避する方法として以下の書き方を使うことができる

// 変数aに既に値が入っていればそれを使い、入っていないなら3を代入する
var a = a || 3;
print(3); // 3

// 2行目でaに3を入れているのでbには3が入る
var b = a || 5;
print(b); // 3

実際に何をやっているかというと2行目の変数aの値が0や”(空文字)などブーリアン型に変換されて偽になる値ならば右項の3が戻されて代入される

それを確かめるための例

// ||の左項をブーリアン型に変換して真になるなら左項を評価する
print(1 || 3); // 1
print(3 || 0); // 3

// 左項が真の場合に右項は評価されない
var x = 0;
print(3 || (x = 1)); // 3
print(x);            // 0

// 左項が偽の場合に右項が評価される
print(0 || 7); // 7

応用例として関数に引数を渡さなかった時のデフォルトを指定することができる

function test(a_val) {
  var a = a_val || 7;
  print(a);
}

test();  // 7
test(3); // 3

プロパティの存在チェック

存在しないプロパティにアクセスしてもエラーにはならないでundefined値が返るので注意

var x = {};
print(x.y); // undefined

// undefined値のプロパティにアクセスするとTypeErrorになる
print(x.y.z); //Exception: TypeError: 'undefined' is not an object (evaluating 'x.y.z')

undefined値のプロパティにアクセスしないためのイディオム

var x = {};
print (x.y);         // undefined
print (x.y.z);       // Exception: TypeError: 'undefined' is not an object (evaluating 'x.y.z')
// x.yが偽だった左項を評価するだけ
print(x.y && x.y.z); // undefined

var x = {y:{z:1}}
print (x.y);         // [object Object]
print (x.y.z);       // 1
// x.yが真だったため右項を評価する
print(x.y && x.y.z); // 1

論理演算まとめ

expr1 && expr2
  • expr1が偽の場合はexpr1を返す
  • そうでない場合はexpr2を返す
  • 右項左項trueならば&&はtrueを返しそうでないならfalseを返す
expr1 || expr2
  • expr1が真の場合はexpr1を返す
  • そうでない場合はexpr2を返す
  • 右項左項どちらかがtrueならば||はtrueを返し両方ともfalseならばfalseを返す

参考

  • [JavaScriptの「&&」「   」について盛大に勘違いをしていた件](http://qiita.com/Imamotty/items/bc659569239379dded55)
  • 論理演算子

コメントを書く

※ Emailは公開されません

※ コメントは承認されると下記に表示されます

コメント一覧

最近の投稿

社内ツールなどの超小規模なAPIをGolangで実装する際にフレームワークを使うべきかを、実際にnet/httpを使った実装とフレームワークを使った実装を比較することでどれだけ優位性があるかを見ていきたいと思います。今回はフレームワークにはシンプルで使いやすそうなEchoを使うことにします。

vue-pdfを使ってNuxt.jsで作成しているアプリケーションに pdfスライドを表示させるサンプルを作成しました README.md通りに実装してもうまくいかないところがあったのでそのあたり含めてまとめます

Vue.js / Nuxt.jsにおけるログインの実装方法をまとめる Auth0やNuxt.jsのAuth Moduleとmiddlewareについて調べつつサンプルを作成することで理解を深める

コンポーネント設計について考える Atomic DesignやPresentational Component, Container Componentについてまとめつつ 自分だったらVue.js / Nuxt.jsでどういうコンポーネント設計にするかについてまとめます

Netlify Formsを使ってブログサイトにコメント機能を追加する方法を調べたので紹介 Netlify FormsはNetlifyに標準機能として用意されているフォーム機能 サーバレスなので別途コメント用にサーバを用意する必要がなくHTMLを埋め込むだけで準備できる

カテゴリ一覧

タグ一覧