WebDesign Dackel

JSで変数定義をちょっとだけ短く書く方法を覚えた

Hatena0
Google+0
Pocket0
Feedly0

最近、仕事が忙しくてなかなかブログが書けず…。 出来るだけ多く書きたいなぁなんて思っていたのにぃ〜。無念。。

仕事ではスマホサイトの対応が多くて、HTMLはワンソースでCSSを切り替える、いわゆるレスポンシブサイトの構築が多かったです。
その際、PHPが使えずJS、CSSのみで切り替えをしなくちゃならなくて、PC表示とスマホ表示の時を別々のCSSで管理するというスタイルで進めていました。
これまでベタ書きで書いていた処理を勉強がてらプラグインにしよ〜という事で、今CSSを切り替えるプラグインを作っているのですが、その際他のjQueryプラグインを参考に色々見てると勉強になることが沢山あったので、今日はその中の一つを書いておこうかと思います。

三項演算子っぽいけどちょっと違う!

プラグインの中の、変数を定義する部分でよく見たのは

var array = value || [];

こんな形で、valueの後に「||」でつないで空の配列が指定されています。
他の言語でもよく見る三項演算子に置き換えるとコードはこちら。

var array = value ? value : [];

どういう事かというと、valueを評価して、真(true)ならvalueをarrayに代入。
偽(false)なら、配列を代入しています。
最初に紹介したコードでも同じことをしていて、まずvalueを評価してtrueならそのままvalueを代入して、falseなら配列を代入します。
普通の三項演算子よりも、短く書けますね!
ちなみに、今は評価対象が一つでしたがいくつでもいけます。

var array = value || foo || bar || test || [];

左から順に評価していって、trueとなるものがある場合にその値を代入してくれます。

具体例を書いてみる

function varDump(values){
  var arr = values || [];
  var str = "";
  for(var i=0; i<arr.length; i++){
    str += arr[i];
  }
  console.log(str);
}

varDump();

上記の例では引数をconsoleに出力する簡単な例です。
大体こんな感じで使えるのではないでしょうか?

ちなみにざっと調べてみたのですが、この書き方の「三項演算子」の様な名称がわかりませんでした。。