JavaScript namespace object literal

Question

I've recently come across JavaScript Namespaces and how you can use them to create namespaces like other popular OOP languages. I have confusion on how they are declared. For example,

var myNamespace = myNamespace || {};

creates a namespace called myNamespace if it hasn't already been created. If it was created, just pass it into var myNamespace.

I have trouble understanding what myNamespace || {} actually does.

Wouldn't myNamespace be undefined at first? How would you compare that in a Boolean expression.

Also, how does the object literal {} work? Does it create an empty object and assign that to myNamespace to work as a namespace?

I've tried looking for the answer on SO, but there's too much saturation about the practices on how to declare different types of namespaces.

`||` is "or". "if `myNamespace` is already defined, assign it to `myNamespace`, otherwise, assign `myNamespace` an empty object." — Sterling Archer, Aug 10 '17 at 19:19
see this post: https://stackoverflow.com/questions/4576867/javascript-or-operator-with-a-undefinded-variable — McHat, Aug 10 '17 at 19:21
@torazaburo What is the best approach to creating namespacing in ES6 then? — Jimenemex, Aug 10 '17 at 19:25
@JustinJmnz Sounds like a good question, however is irrelevant to this one. — jdmdevdotnet, Aug 10 '17 at 19:28
@JustinJmnz For all practical purposes, an ES6 module (file) can be considered a namespace. It behaves almost precisely like a namespace if it is imported as `import * as myNamespace from 'foobar';`. — , Aug 10 '17 at 19:30

score 1 · Answer 1 · answered Aug 10 '17 at 19:19

var myNamespace = myNamespace || {};

Does exactly what you said it does.

|| is an or operator as seen here

So what this is doing is, saying var myNamespace = myNamespace however, if myNamespace is undefined, then it will just go to the right hand side of the operator and just create an empty object like this (you were right about this):

var myNamespace = {}

Let me know if I seem confused, I think I addressed your points.

score 1 · Accepted Answer · answered Aug 10 '17 at 19:35

Although || was originally intended to work with booleans, it is implemented in a very handy way that allows it to work to set default values:

function or(a, b) {
  if (a) return a
  else return b
}

You can test this in your head and see that it works with booleans: if a is true, the result is true so the result is the same as a. If a is false then the result depends on b.

Variable declarations with var in JavaScript work a bit strangely. You are allowed to redeclare a variable with the same identifier in the same scope. So the way the code works is:

If myNamespace is already declared, you redeclare the variable without assigning to it yet. You get the value from the old declaration of myNamespace. This value is assumed to be truthy, so the || will return it.
If myNamespace is not yet declared, you declare it and then myNamespace will be undefined, a falsy value. So the || will return the second value, the {}, and that is the value that will get assigned to myNamespace.

It may make sense to read it in two separate steps:

//Declare the variable if it doesn't exist,
//without overwriting an existing value
var myNamespace
//Take the value of myNamespace (undefined if it didn't exist yet)
//and replace it with {} if it is falsy
myNamespace = myNamespace || {}

score 1 · Answer 3 · answered Aug 10 '17 at 19:50

Take a look at the definition of || from here:

expr1 || expr2

Returns expr1 if it can be converted to true; otherwise, returns expr2.

Now try

console.log(undefined == true);

This will print false, which means that undefined cannot be converted to true (we are using the == operator to let JavaScript use type coercion). As a result, if myNamespace is undefined, an empty object literal will by assigned to it (which is equivalent to expr2 from the quote).

JavaScript namespace object literal

3 Answers3