主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

JavaScriptの、空のオブジェクトリテラル

JavaScriptのコードを読んでいたら、下記のような空の変数宣言みたいなのがあって

var App = { };

なんやこれって思って調べたんですけども、空のオブジェクトリテラルというようです。

windowオブジェクトはどこからでもアクセス出来るので、名前が重複した場合に上書きされてしまいます。 また、可読性も非常に低く、機能が増えればメンテナンスが大変になってくるでしょう。 これを防ぐ為に、一つのオブジェクトを宣言し、それを名前空間のように使い閉じ込めるという方法をよく使います。
引用元:"Javascriptの基本:リテラル表現 | ENGINE04

といったように、ひとつのJSファイルに複数の用途が違う関数などが書いてある時などに使われるようです。というか、基本的にはこういう書き方をするのがベターな気がします。

CSSでいうところの、idで括るようなことですね。

var App = { };

// あとからTestObjという関数が入ったプロパティとして追加している
App.TestObj = function(e) {
    console.log(e);
}

// Appオブジェクトから呼び出し
App.TestObj('Hello World!');

という感じ。

JavaScriptにおけるオブジェクトは、名前と値のセット(プロパティ)を複数もったもの、だそうですけど、オブジェクトとプロパティと関数とメソッドとかがよくごっちゃになって、結局JavaScriptでは全部がオブジェクトで、変数にはなんでも入るとか(入らないかもしれないけど)言われたりして、わけがわからなくなります。

それだけJavaScript自体が自由だから、最近はAlt.jsやらフレームワークなどがたくさん出てきている、ということがわかってきただけでも、かなり理解が広がってきていると思っておきます。

参考:オブジェクトリテラル - オブジェクト - JavaScript入門