JavaScriptのブラケット記法について少し調べてみた

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

JavaScriptではオブジェクトのプロパティにアクセルする際、ドット記法とブラケット記法という方法があります。例えばユーザーエージェントの取得は『navigator.userAgent』とドット記法で記述することが多いですが、これは『navigator[‘userAgent’]』と記述することもできます。ようは、配列のような書き方です。

このブラケット記法の利点として、ドット記法では表せないプロパティ名でもアクセスできるというメリットがあります。例えば以下の様なオブジェクトがある場合、

ドット記法やブラケット記法でのアクセスは下記のようになります。

//=>より右がコンソールに出力される結果です。『am-yu』や『1』や『10px』はドット記法ではエラーとなりますが、ブラケット記法だとアクセスできました。これは、ドット記法の『am-yu』の『-』がマイナスの演算子だと思われてしまったためです。対してブラケット記法だと’am-yu’の文字列として扱うのでエラーになりませんでした。『1』や『10pz』はそもそも数値ではじまるのがダメなようです。ブラケット記法では『1』については文字列ではなく、数値でもアクセスできるのが分かります。ちなみに、普通の配列でも文字列型の数値をいれてもアクセスできます。

実は言うと『if』や『true』などの予約語はドット記法でエラーになるかと思ったのですが、なりませんでした(調べてみると、エラーになると書かれてるところばかりなのだけど、最新のブラウザではエラーにならないということなのだろうか)。しかも、ブラケット記法では『true』は文字列の’true’でも真偽値のtrueでもどちらでもアクセスできました。これはちょっと意外でした。なぜなら厳密でない比較演算子(==)を使うと、数値の場合、『1==’1’』とすれば結果はtrueとなりますが、『true==’true’』の結果はfalseになるからです。

ちなみに、ブラケット記法のカッコ内は式として扱うので、下記のようなこともできます。

trueとfalseのプロパティについては工夫次第で面白い使い方ができそうな気もします。

なお、「falseが『ファルス』だってwww。英語も読めないのかよ、『フォールス』だろwww」というツッコミはうけておりません(参考:UDCblog: 今さら人には聞けない「false」「null」の読み方)。

2014/08/17追記:nullやundefinedやNaNもやってみた

Chrome DevToolsのSnippets機能がすごい便利そう

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] を読んで知ったのですが、ChromeのDevTools(開発者ツール)にはSnippetsという、コンソールでデバッグの際に使うスクリプトを保持してくれる機能があるようです。普段、よく使う機能でもConsoleパネルで打ち込んだりコピペしたりしてて面倒だなと思ってたのでこれは便利出す。早く知りたかったです・・・。

とりあえず、jQueryが読み込まれていないサイトでもjQueryが動くようにSnippetsに登録してみます。

ChromeのDev Toolsを開き(Ctrl+Shift+IかF12キーを押す)、Sourcesパネルを開いてその中のSnippetsタブをクリック。その後、左側の空白欄を右クリックしてメニューを表示し、その中の『New』をクリック。
snippets2

そうすると新しいsnippetが追加され、真ん中にコード記入欄ができるのでsnippetの名前を『jqueryfy』、コード下記のように記入し保存。

『フロントエンドエンジニア養成講座』に記載してあったコードには『else if』の内容は記載してありません。ただ、なぜかここのブログではjQueryはあるのに$がないといわれてしまうため、仕方なくelse ifを追加しています。

とりあえず、保存したsnippetを実行してみます。jqueryfyの箇所を右クリックしてメニューを表示し、『Run』をクリックするだけ。以下の画像は、当ブログで実行してみた結果です。
snippets3
当ブログの場合は、実行するとコンソール画面に『’$’ is jQuery 』と表示されます。通常のjQueryがないサイトでは『jQuery loaded! 』と表示されると思います(すでに、jQueryが動いているサイトでは実行されません)。

この他にも、下記ページに登録しておくと便利なスニペットがまとめてあります。
DevTools Snippets
思った以上に汎用性がありそうです。

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)
フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)