{"id":9187,"date":"2015-12-23T16:11:52","date_gmt":"2015-12-23T14:11:52","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=9187"},"modified":"2018-01-10T16:34:57","modified_gmt":"2018-01-10T14:34:57","slug":"namespaces-in-javascript-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/","title":{"rendered":"Namespaces in Javascript Example"},"content":{"rendered":"<p>If you have been previously coding in programming languages other than JavaScript, such as C# or even C++, then you might be already be familiar with the concept of <strong>namespaces<\/strong> and also it&#8217;s benefits in code modularity and functionality.<\/p>\n<p>Unfortunately, this concept does not straight out exist in Javascript, as in they don&#8217;t have a dedicated syntax built-in the language, and every variable is added to the global scope of the application.<\/p>\n<p>However, we can kind of bend this rule and work around it to create our own namespaces. How? Let&#8217;s see!<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;tCIwOngQUb3zSUuF&#8217;]<\/p>\n<h2>Namespaces and why we need them<\/h2>\n<p>Namespaces can be considered as packages of code that we use to make coding easier to fix, more efficient and  understandable for whoever will maintain your website. We can use it to reduce the number of variables and functions added to our global scope, to make code modular, and so on, so they are pretty recommended. What if we don&#8217;t use them?<\/p>\n<p>Since most of the times, while coding, we use external libraries or ready-made parts of code, let&#8217;s consider this to be our situation: We are putting everything in the global scope and want to add a library. The thing is, some of our variables are named the same as in the library. But they&#8217;re different things! What do we do?<\/p>\n<p>Okay, let&#8217;s consider our options. We can put the library in the end of our code for the application, but the library&#8217;s code would overrule our own. And if we put it in the beginning of the code, then our code would overrule the library&#8217;s, which would make it&#8217;s use moot. Are you in favor of namespaces yet?<\/p>\n<h2>Syntax<\/h2>\n<p>Truthfully, namespaces don&#8217;t have a dedicated syntax in Javascript,  so this part might be more aptly named <em><strong>The creation of Namespaces<\/strong><\/em>, but let&#8217;s just go with it. To create namespaces we would have to create a single global object and make everything else a property of that object. However, if on the way we decide we want another global object we can put it outside this object we created and it will be treated as such. The workflow follows that of other programming languages such as C++, making Javascript very similar to them. <\/p>\n<p>You create a single global object like below:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar MYAPP = {\r\n   \/\/code here\r\n}\r\n<\/pre>\n<p>After doing this, you put your whole code inside the brackets like this:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar MYAPP = {\r\n       square: function (param) {\r\n           return param++;\r\n       },\r\n\r\n       yourotherfunction: function () {\r\n           this.title = 'Whatever you want to do with your code';\r\n       }\r\n}\r\n<\/pre>\n<p>Easy, right? So easy you feel cheated? Not my fault! Okay, okay, I will have to admit this is not really a namespace in the classical meaning of the word (Javascript&#8217;s fault), but it works as such, as you have to go through <code>MYAPP<\/code> to get to your code, and you can still use the space outside it as a global namespace.<\/p>\n<h2>Nested namespaces<\/h2>\n<p>This namespaces thing started out as copying other languages patterns on it, so let&#8217;s just do it again (all for the sake of good code!). This time it&#8217;s about nesting namespaces. We can just define an object inside the maing object we defined in the global namespace, and put a part of our code into it, like in the code snippet below:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar MYAPP = {\r\n\r\n    FIRSTMODULE: {\r\n           square: function (param) {\r\n               return param++;\r\n           }\r\n    },\r\n    \r\n    SECONDMODULE: {\r\n          yourotherfunction: function () {\r\n               this.title = 'Whatever you want to do with your code';\r\n           }\r\n    }\r\n}\r\n<\/pre>\n<p>You can do nesting in multiple levels to allow for better modularization, just keep in mind to not do it until you mess your code up even worse.<\/p>\n<h2>Namespace aliases<\/h2>\n<p>What if you nest your namespaces and then calling some properties of the ones in the deeper levels is a complete headache? That&#8217;s what we  use <strong>aliases<\/strong> for. Let&#8217;s suppose we have a namespace, whose property we need to use in one of the outer levels. The code for merely accessing it would be like this:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nMYAPP.FIRST.MODULE.firstproperty = function(){\r\n       \/\/code here\r\n};\r\n<\/pre>\n<p>Imagine if you had to do operations on this property. If <code>firstproperty = 12;<\/code> and <code>secondproperty = 1;<\/code>, just to add them you will have this code in your hands:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar a = MYAPP.FIRST.MODULE.firstproperty + MYAPP.FIRST.MODULE.secondproperty;\r\n<\/pre>\n<p>And this would be on a best case scenario. What if you had very complicated action that you had to do with them? You give the namespace an alias like below:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar p = new MYAPP.FIRST.MODULE.firstproperty;\r\n<\/pre>\n<p>Now you can use only the <code>p<\/code> variable for whatever you might need. This simplifies your code considerably in case you have too much work with the innermost namespaces.<\/p>\n<h2>Safe namespaces<\/h2>\n<p>While we might be creating namespaces to avoid name collisions with libraries, we still have to give our one object a name, and exactly that name might cause the collision. To avoid it, we conduct a small check before, to make sure we&#8217;re not ruining anything. The code would go like below:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nif (typeof MYAPPLICATION === &quot;undefined&quot;) {\r\n    var MYAPPLICATION = {};\r\n}\r\n<\/pre>\n<p>This way, we only create this namespace if it&#8217;s undefined. We can even shorten this code snippet more, like  below:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar MYAPP = MYAPP || {};\r\n<\/pre>\n<p>This way, we can rest assured that we haven&#8217;t accidentally crashed any part of our application, or even entirely.<\/p>\n<h2>Static Namespacing<\/h2>\n<p>Now that we know the basics of using namespaces we can go on to more refined and better coding practices regarding it. These best practices can be divided into two big groups: Dynamic Namespacing and Static Namespacing.<\/p>\n<p>With the term &#8220;Static Namespacing&#8221; we are calling all the solutions that have a hard-coded namespace label in them (even though it might be reassigned later).<\/p>\n<p><strong>Direct assignment<\/strong><\/p>\n<p>Directly assigning your variables a value is the most straightforward and safe approach there is to this, as it&#8217;s very unambiguous and clear. You can do it like below:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar myApp = {}\r\n \r\nmyApp.param = 0;\r\n \r\nmyApp.next = function() {\r\n    return myApp.param++;  \r\n}\r\n \r\nmyApp.reset = function() {\r\n    myApp.param = 0;   \r\n}\r\n<\/pre>\n<p>What we&#8217;ve done here is declare a parameter in the namespace and initialize it with the value <code>0<\/code>. We have built two functions, one of which is <code>next()<\/code> and has to increment the parameter&#8217;s value by 1, and the other is <code>reset()<\/code> which resets the parameter&#8217;s value to 0 whenever it&#8217;s invoked. If we would execute the code below we would get <code>0,1,2,undefined,0<\/code> as a result.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nwindow.console &amp;&amp; console.log(\r\n    myApp.next(),\r\n    myApp.next(),\r\n    myApp.next(),\r\n    myApp.reset(),\r\n    myApp.next()\r\n);\r\n<\/pre>\n<p>By using direct assignment we have to access the namespace whenever we want to work with a variable, and things could get really cluttered really fast. Another approach is using Object Literal Notation.<\/p>\n<p><strong>Object Literal Notation<\/strong> <\/p>\n<p>When using the object&#8217;s literal notation we only need to reference the namespace once, and then things flow from there. This would make the code easier to maintain, but it&#8217;s no safer than directly assigning variables each time we need them. The code would go like below:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar myApp = {\r\n \r\n    param: 0,\r\n \r\n    next: function() {\r\n        return this.param++;   \r\n    }\r\n}\r\n<\/pre>\n<p>Note that the usage of <code>this<\/code>, either by direct assignment or object&#8217;s literal notation is equally unsafe as it may have been re-assigned on the way. Also, while this method is better than direct assignment, it does not support logic all that much, it strictly focuses on assignment. Also it needs all the parameters to be initialized beforehand.<\/p>\n<p><strong>Module Pattern<\/strong><\/p>\n<p>It has been quite a lot of time since Eric Miraglia first introduced the so called <a href=\"http:\/\/yuiblog.com\/blog\/2007\/06\/12\/module-pattern\/\" target=\"_blank\">Module Pattern Method<\/a>, and it has since been used from many famous developers and in various important projects, and jQuery among these. This of course, for good reason. To use the Module Pattern means to wrap parts of your code in order to provide them with privacy and state throughout the course of the application in which it&#8217;s used. <\/p>\n<p>The code in our case would be like in the code snippet below:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar myApp = (function() {\r\n \r\n    var param= 0;\r\n \r\n    return {\r\n        next: function() {\r\n            return param++;    \r\n        }\r\n    };  \r\n})();\r\n<\/pre>\n<p>In this case, we have wrapped the function into brackets, as it&#8217;s one of the many ways in which the module pattern is used. While this method is really safe in that it provides privacy, it also doesn&#8217;t have the drawbacks of direct assignment and using an object&#8217;s literal notation, which makes it the better of the three. Can it get any better? It can! Let&#8217;s get on with it!<\/p>\n<h2>Dynamic assignment<\/h2>\n<p>Dynamic namespacing, or namespace injection is a method in which we represent the namespace with a proxy referenced inside the function wrapper and not out of it as usual. It makes it easier to have many independent instances of a module existing in separate namespaces, also we don&#8217;t have to scramble for a return value to assign to the namespace which makes it definition more flexible. Of course, this method supports all the perks of using module patters, and adds a lot more to it. We can put his concept to practice in two ways: By supplying with a namespace argument, or by using <code>this<\/code> as a proxy.<\/p>\n<p><strong>Giving a namespace argument<\/strong><\/p>\n<p>Supplying with a namespace argument can be done very simply. You just need to pass the namespace as an argument to a self-invoking function. Take a look at the example below: <\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar myApp = {};\r\n(function(context) { \r\n    var param = 0;\r\n \r\n    context.next = function() {\r\n        return param++;    \r\n    }\r\n})(myApp);\r\n<\/pre>\n<p>Since the variable <code>param<\/code> is not directly assigned to the <code>context<\/code>, it is a private one. However, if you want it to be public you can do it with a very minor change. Instead of the namespace passed as an argument you pass <code>this<\/code>, making the code look like below:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar myApp = {};\r\n(function(context) { \r\n    var param = 0;\r\n \r\n    context.next = function() {\r\n        return param++;    \r\n    }\r\n})(this);\r\n<\/pre>\n<p>The change is barely visible, but it changes a lot in the logic of your code. This is a common practice with the libraries that leave it to the user to decide whether they want specific variables to be private or not, namely used in jQuery.<\/p>\n<p><strong><em>this<\/em> as a proxy<\/strong><\/p>\n<p>Using <code>this<\/code> as a proxy means to use Javascript exactly as it&#8217;s designed, without all the tricks and practices you might have gained over time. Since the namespace is injected through <code>this<\/code>, it can&#8217;t be modified without you wanting it to. Take a look at the code snippet below:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar myApp = {};\r\n(function() {\r\n    var param = 0;\r\n \r\n    this.next = function() {\r\n        return param++;    \r\n    }\r\n}).apply(myApp); \r\n<\/pre>\n<p>The code doesn&#8217;t change too much from the one we used in the previous snippets, except this time we also used the method <code>apply()<\/code>, which makes it possible for the context and arguments to be separate from each other. This is quite the benefit when you want to add other arguments to the module creator, as it makes it very easy.<\/p>\n<p>Moreover you can wrap your whole code and use <code>this<\/code> as a stand-in for the namespace. This way you make it easy for the maintainer of your code or user of your library to decide the context in which they wish to run the code. You can do that like below:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar name = function() {  \r\n    \/\/your code\r\n}\r\n\r\nvar myApp = {};\r\nname.apply(myApp);\r\n<\/pre>\n<h2>Download the source code <\/h2>\n<p>This was an example of Namespaces in Javascript.<\/p>\n<p>Download the source code for this tutorial: <\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>You can download the full source code of this example here : <strong><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/12\/namespaces.zip\">namespaces<\/a><\/strong><\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you have been previously coding in programming languages other than JavaScript, such as C# or even C++, then you might be already be familiar with the concept of namespaces and also it&#8217;s benefits in code modularity and functionality. Unfortunately, this concept does not straight out exist in Javascript, as in they don&#8217;t have a &hellip;<\/p>\n","protected":false},"author":25,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-9187","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Namespaces in Javascript Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"If you have been previously coding in programming languages other than JavaScript, such as C# or even C++, then you might be already be familiar with the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Namespaces in Javascript Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"If you have been previously coding in programming languages other than JavaScript, such as C# or even C++, then you might be already be familiar with the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/era.balliu.7\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-23T14:11:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-10T14:34:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Era Balliu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@BalliuEra\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Era Balliu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/\"},\"author\":{\"name\":\"Era Balliu\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e\"},\"headline\":\"Namespaces in Javascript Example\",\"datePublished\":\"2015-12-23T14:11:52+00:00\",\"dateModified\":\"2018-01-10T14:34:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/\"},\"wordCount\":1919,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/\",\"name\":\"Namespaces in Javascript Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2015-12-23T14:11:52+00:00\",\"dateModified\":\"2018-01-10T14:34:57+00:00\",\"description\":\"If you have been previously coding in programming languages other than JavaScript, such as C# or even C++, then you might be already be familiar with the\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Namespaces in Javascript Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e\",\"name\":\"Era Balliu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g\",\"caption\":\"Era Balliu\"},\"description\":\"Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML\/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.\",\"sameAs\":[\"http:\/\/www.webcodegeeks.com\/\",\"https:\/\/www.facebook.com\/era.balliu.7\",\"https:\/\/www.instagram.com\/eraballiu\/\",\"https:\/\/www.linkedin.com\/in\/eraballiu\",\"https:\/\/www.pinterest.com\/001r2gw0jt0ln6d\/\",\"https:\/\/x.com\/BalliuEra\",\"https:\/\/www.youtube.com\/c\/eraballiu\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Namespaces in Javascript Example - Web Code Geeks - 2026","description":"If you have been previously coding in programming languages other than JavaScript, such as C# or even C++, then you might be already be familiar with the","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/","og_locale":"en_US","og_type":"article","og_title":"Namespaces in Javascript Example - Web Code Geeks - 2026","og_description":"If you have been previously coding in programming languages other than JavaScript, such as C# or even C++, then you might be already be familiar with the","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/era.balliu.7","article_published_time":"2015-12-23T14:11:52+00:00","article_modified_time":"2018-01-10T14:34:57+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Era Balliu","twitter_card":"summary_large_image","twitter_creator":"@BalliuEra","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Era Balliu","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/"},"author":{"name":"Era Balliu","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e"},"headline":"Namespaces in Javascript Example","datePublished":"2015-12-23T14:11:52+00:00","dateModified":"2018-01-10T14:34:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/"},"wordCount":1919,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/","name":"Namespaces in Javascript Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2015-12-23T14:11:52+00:00","dateModified":"2018-01-10T14:34:57+00:00","description":"If you have been previously coding in programming languages other than JavaScript, such as C# or even C++, then you might be already be familiar with the","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/namespaces-in-javascript-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Namespaces in Javascript Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/c27ecf40c810e6396ba93ffb829c7b0e","name":"Era Balliu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f6adddf7eada210f682608fea9d8159441369ec622998a5851a447e0a2bfa3f3?s=96&d=mm&r=g","caption":"Era Balliu"},"description":"Era is a Telecommunications Engineering student, with a great passion for new technologies. Up until now she has been coding with HTML\/CSS, Bootstrap and other front-end coding languages and frameworks, and her recent love is Angular JS.","sameAs":["http:\/\/www.webcodegeeks.com\/","https:\/\/www.facebook.com\/era.balliu.7","https:\/\/www.instagram.com\/eraballiu\/","https:\/\/www.linkedin.com\/in\/eraballiu","https:\/\/www.pinterest.com\/001r2gw0jt0ln6d\/","https:\/\/x.com\/BalliuEra","https:\/\/www.youtube.com\/c\/eraballiu"],"url":"https:\/\/www.webcodegeeks.com\/author\/era-balliu\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/9187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=9187"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/9187\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=9187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=9187"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=9187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}