<p>I've frequently encountered sites that put all of their JavaScript inside a <code>namespace</code> structure along the lines of:</p>

<pre><code>namespaces = { com : { example: { example.com's data} }
</code></pre>

<p>However, setting this up safely with respect to other namespaced frameworks seems to require a relatively hefty amount of code (defined as > 2 lines).  I was wondering whether anyone knows of a concise way to do this? Furthermore, whether there's a relatively standard/consistent way to structure it? For example, is the <code>com</code> namespace directly attached to the global object, or is it attached through a namespace object?</p>

<p>[Edit: whoops, obviously <code>{com = { ... } }</code> wouldn't accomplish anything close to what I intended, thanks to Shog9 for pointing that out.] </p>

[{'answer_id': 13193, 'author': 'Shog9', 'author_id': 811, 'author_profile': 'https://Stackoverflow.com/users/811', 'pm_score': 5, 'selected': True, 'text': '<p>Javascript doesn\'t have stand-alone namespaces. It has functions, which can provide scope for resolving names, and objects, which can contribute to the named data accessible in a given scope. </p>\n\n<p>Here\'s your example, corrected:</p>\n\n<pre><code>var namespaces = { com: { example: { /* example.com\'s data */ } } }\n</code></pre>\n\n<p>This is a variable <code>namespaces</code> being assigned an object literal. The object contains one property: <code>com</code>, an object with one property: <code>example</code>, an object which presumably would contain something interesting.</p>\n\n<p>So, you can type something like <strong>namespaces.com.example.<em>somePropertyOrFunctionOnExample</em></strong> and it\'ll all work. Of course, it\'s also ridiculous. You don\'t have a hierarchical namespace, you have an object containing an object containing an object with the stuff you actually care about.</p>\n\n<pre><code>var com_example_data = { /* example.com\'s data */ };\n</code></pre>\n\n<p>That works just as well, without the pointless hierarchy. </p>\n\n<p><strong>Now</strong>, if you actually <em>want</em> to build a hierarchy, you can try something like this:</p>\n\n<pre><code>com_example = com_example || {};\ncom_example.flags = com_example.flags || { active: false, restricted: true};\n\ncom_example.ops = com_example.ops || (function()\n    {\n       var launchCodes = "38925491753824"; // hidden / private\n       return {\n         activate: function() { /* ... */ },\n         destroyTheWorld: function() { /* ... */ }\n       };\n    })();\n</code></pre>\n\n<p>...which is, IMHO, reasonably concise.</p>\n'}, {'answer_id': 13194, 'author': 'Brendan', 'author_id': 199, 'author_profile': 'https://Stackoverflow.com/users/199', 'pm_score': 2, 'selected': False, 'text': '<p>The <a href="http://developer.yahoo.com/yui/yahoo/" rel="nofollow noreferrer">YUI library</a> library has code which handles namespacing using a function which you may find preferable. Other libraries may do this also.</p>\n'}, {'answer_id': 13522, 'author': 'Joseph Pecoraro', 'author_id': 792, 'author_profile': 'https://Stackoverflow.com/users/792', 'pm_score': 4, 'selected': False, 'text': '<p>Here was an interesting article by Peter Michaux on <a href="http://peter.michaux.ca/article/7944" rel="noreferrer">Javascript Namespacing</a>.  He discusses 3 different types of Javascript namespacing:</p>\n\n<ol>\n<li>Prefix Namespacing</li>\n<li>Single Object Namespacing</li>\n<li>Nested Object Namespacing</li>\n</ol>\n\n<p>I won\'t plagiarize what he said here but I think his article is very informative.</p>\n\n<p>Peter even went so far as to point out that there are performance considerations with some of them.  I think this topic would be interesting to talk about considering that the new ECMAScript Harmony plans have dropped the 4.0 plans for namespacing and packaging.</p>\n'}, {'answer_id': 13583, 'author': 'Polsonby', 'author_id': 137, 'author_profile': 'https://Stackoverflow.com/users/137', 'pm_score': 3, 'selected': False, 'text': "<p>I try to follow the Yahoo convention of making a single parent object out in the global scope to contain everything;</p>\n\n<pre><code>var FP = {};\nFP.module = {};\nFP.module.property = 'foo';\n</code></pre>\n"}, {'answer_id': 14085, 'author': 'Mark Cidade', 'author_id': 1659, 'author_profile': 'https://Stackoverflow.com/users/1659', 'pm_score': 1, 'selected': False, 'text': '<p>As an alternative to a dot or an underscore, you could use the dollar sign character:</p>\n\n<pre><code>var namespaces$com$example = "data"; \n</code></pre>\n'}, {'answer_id': 14748, 'author': 'Ricky', 'author_id': 653, 'author_profile': 'https://Stackoverflow.com/users/653', 'pm_score': 3, 'selected': False, 'text': "<p>To make sure you don't overwrite an existing object, you should so something like:</p>\n\n<pre><code>if(!window.NameSpace) {\n    NameSpace = {};\n}\n</code></pre>\n\n<p>or</p>\n\n<pre><code>var NameSpace = window.NameSpace || {};\n</code></pre>\n\n<p>This way you can put this at the top of every file in your application/website without worrying about the overwriting the namespace object. Also, this would enable you to write unit tests for each file individually.</p>\n"}, {'answer_id': 1015213, 'author': 'dfa', 'author_id': 89266, 'author_profile': 'https://Stackoverflow.com/users/89266', 'pm_score': 1, 'selected': False, 'text': '<p>I like also this (<a href="http://code.google.com/apis/ajax/playground/#anonymous_function_for_clean_namespace" rel="nofollow noreferrer">source</a>):</p>\n\n<pre><code>(function() {\n    var a = \'Invisible outside of anonymous function\';\n    function invisibleOutside() {\n    }\n\n    function visibleOutside() {\n    }\n    window.visibleOutside = visibleOutside;\n\n    var html = \'--INSIDE Anonymous--\';\n    html += \'&lt;br/&gt; typeof invisibleOutside: \' + typeof invisibleOutside;\n    html += \'&lt;br/&gt; typeof visibleOutside: \' + typeof visibleOutside;\n    contentDiv.innerHTML = html + \'&lt;br/&gt;&lt;br/&gt;\';\n})();\n\nvar html = \'--OUTSIDE Anonymous--\';\nhtml += \'&lt;br/&gt; typeof invisibleOutside: \' + typeof invisibleOutside;\nhtml += \'&lt;br/&gt; typeof visibleOutside: \' + typeof visibleOutside;\ncontentDiv.innerHTML += html + \'&lt;br/&gt;\';\u200b\n</code></pre>\n'}, {'answer_id': 9847719, 'author': 'Paul Sweatte', 'author_id': 1113772, 'author_profile': 'https://Stackoverflow.com/users/1113772', 'pm_score': 0, 'selected': False, 'text': '<p>Use an object literal and either the <code>this</code> object or the explicit name to do namespacing based on the sibling properties of the local variable which contains the function. For example:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>var foo = { bar: function(){return this.name; }, name: "rodimus" }\r\nvar baz = { bar: function(){return this.name; }, name: "optimus" }\r\n\r\nconsole.log(foo.bar());\r\nconsole.log(baz.bar());</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>Or without the explicit <code>name</code> property:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>var foo = { bar: function rodimus(){return this; } }\r\nvar baz = { bar: function optimus(){return this; } }\r\n\r\nconsole.log(foo.bar.name);\r\nconsole.log(baz.bar.name);</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>Or without using <code>this</code>:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>var foo = { bar: function rodimus(){return rodimus; } }\r\nvar baz = { bar: function optimus(){return optimus; } }\r\n\r\nconsole.log(foo.bar.name);\r\nconsole.log(baz.bar.name);</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>Use the <code>RegExp</code> or <code>Object</code> constructor functions to add name properties to counter variables and other common names, then use a <code>hasOwnProperty</code> test to do checking:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code> var foo = RegExp(/bar/);\r\n \r\n/* Add property */\r\nfoo.name = "alpha";\r\n\r\ndocument.body.innerHTML = String("&lt;pre&gt;" + ["name", "value", "namespace"] + "&lt;/pre&gt;").replace(/,/g, "&amp;#09;");\r\n\r\n/* Check type */\r\nif (foo.hasOwnProperty("name")) \r\n  {\r\n  document.body.innerHTML += String("&lt;pre&gt;" + ["foo", String(foo.exec(foo)), foo.name] + "&lt;/pre&gt;").replace(/,/g, "&amp;#09;");\r\n  }\r\n\r\n/* Fallback to atomic value */\r\nelse \r\n  {\r\n  foo = "baz";\r\n  }\r\n\r\nvar counter = Object(1);\r\n\r\n/* Add property */\r\ncounter.name = "beta";\r\n\r\nif (counter.hasOwnProperty("name")) \r\n  {\r\n  document.body.innerHTML += String("&lt;pre&gt;" + ["counter", Number(counter), counter.name] + "&lt;/pre&gt;").replace(/,/g, "&amp;#09;");\r\n  } \r\nelse \r\n  {\r\n  /* Fallback to atomic value */\r\n  counter = 0;\r\n  }</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>The DOM uses the following convention to namespace HTML and SVG Element interface definitions:</p>\n\n<ul>\n<li>HTMLTitleElement</li>\n<li>SVGTitleElement</li>\n<li>SVGScriptElement</li>\n<li>HTMLScriptElement</li>\n</ul>\n\n<p>JavaScript core uses prototypes to namespace the <code>toString</code> method as a simple form of polymorphism.</p>\n\n<p><strong>References</strong></p>\n\n<ul>\n<li><a href="https://stackoverflow.com/questions/17216847/1113772">Does javascript autobox?</a></li>\n<li><a href="https://stackoverflow.com/questions/17216496/1113772">Getting sibling value of key in a JavaScript object literal</a></li>\n<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method" rel="nofollow noreferrer">MDN: JavaScript Operators - this as an object method</a></li>\n<li><a href="https://www.lua.org/notes/ltn007.html" rel="nofollow noreferrer">Lua: technical note 7 - Modules and Packages</a></li>\n<li><a href="https://github.com/mozilla/gecko-dev/blob/master/dom/webidl/HTMLTitleElement.webidl" rel="nofollow noreferrer">HTMLTitleElement.webidl</a></li>\n<li><a href="https://github.com/mozilla/gecko-dev/blob/master/dom/webidl/SVGTitleElement.webidl" rel="nofollow noreferrer">SVGTitleElement.webidl</a></li>\n<li><a href="https://github.com/mozilla/gecko-dev/blob/master/dom/webidl/SVGScriptElement.webidl" rel="nofollow noreferrer">SVGScriptElement.webidl</a></li>\n<li><a href="https://github.com/mozilla/gecko-dev/blob/master/dom/webidl/HTMLScriptElement.webidl" rel="nofollow noreferrer">HTMLScriptElement.webidl</a></li>\n<li><a href="http://www.2ality.com/2015/09/function-names-es6.html" rel="nofollow noreferrer">The names of functions in ES6</a></li>\n<li><a href="http://www.ecma-international.org/ecma-262/6.0/#sec-function-instances-name" rel="nofollow noreferrer">ECMAScript 2015 Language Specification - 19.2.4.2 Function Instances: name | ECMA-262 6th Edition</a></li>\n</ul>\n'}]
['https://Stackoverflow.com/questions/13021', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/784/']