JavaScript: Namespace vs Scope

Question

I have a fairly good grasp of the concepts of scope and closures in JavaScript.

Moreover, the following sites provide examples of how JavaScript namespaces can be implemented:

1. Everything you wanted to know about JavaScript scope
2. Namespacing in JavaScript

What I still do not understand is how many people seem to mix the concepts of scope and namespace. Furthermore, the same people often also mention how one should not "pollute the global namespace" and not "create global variables / variables in the global scope".

Questions

• Is it not correct that scope and namespace are two completely different concepts?
  • Namespace: Grouping of code such that names within the group are unique and cannot collide with similar names in other namespaces
  • Scope: Defines the accessibility of variables. JavaScript has two scopes, global and local/function scope (ES 2015 introduced block scope with let/const)
• Is it correct that the following object literal creates a new namespace for bar, avoiding to pollute the global namespace (except for foo), but that bar is still in the global scope: var foo = { bar: 42 }
• Is it not wrong to say "don't create global variables so you do not pollute the global namespace"? Global vs local variables (scope) is different from namespacing. As seen, it is perfectly possible to shield a variable in a new namespace, and still have it be in the global scope.
• If avoiding to pollute the global namespace is the only reason for why we should not create global variables, is it not enough to just create new namespaces and still keep it all global?

Answer 1

Is it not correct that scope and namespace are two completely different concepts?

I would not say that scopes and namespaces are completely unrelated. If we take the literal meaning of "namespace", it's a space of distinct names - unique and not colliding with names from other spaces, as you say.

A scope definitely forms a name space in that regard - the variable names are distinct and don't collide with names from other scopes. However, a scope is internal and can't be accessed from outside, so it's not particularly interesting for organising things.

An object also forms a name space - the property names are distinct and don't collide with names on other objects. This is why objects are used for structuring code into modules, and this is the traditional meaning of "namespace" in JavaScript.

Is it correct that the following object literal creates a new namespace for bar, avoiding to pollute the global namespace (except for foo), but that bar is still in the global scope: var foo = { bar: 42 }

No, bar is not a member of the global scope. It's a property of some object.

Is it not wrong to say "don't create global variables so you do not pollute the global namespace"? Global vs local variables (scope) is different from namespacing.

Globals are a bit special in JS: they are both properties of the global object and variables in the global scope. That's why we talk of "the global namespace" to encompass all - and specifically to emphasise that the names must not collide.

If avoiding to pollute the global namespace is the only reason for why we should not create global variables, is it not enough to just create new namespaces and still keep it all global?

Creating namespaces, like {bar: 42} in your example above, does still create global variables: foo. It just creates fewer variables - one per module. Also it creates a certain naming convention, namely that global variables should refer to modules and not to mundane variables. We wouldn't use var i, increment, decrement; but var counter = {i: …, increment(){…}, decrement(){…}};, and refer to the purpose of them in the name counter.