Namespacing with IIFE in ES6?

Question

Apparently, ES6 doesn't need namespacing because each file is a separate module.

But then, how do I avoid global namespace interference?

For example, Babel compiles my scripts/main.js file by merely replacing const with var.

var alert = 'This line doesn\'t do anything.'
window.alert(alert)

A namespace (named ANS below) with an IIFE prevents name collisions:

const ANS = (function () {
  const alert = 'This works'
  window.alert(alert + '.')
  return {alert: alert + ' too.'}
})()
alert(ANS.alert)

Adding properties to the namespace ANS is cleaner than adding them to the global namespace, window, or this. And, the IIFE provides further encapsulation.

So, isn't the second way, i.e., creating a custom namespace with an IIFE, better than the first? If so, is there a newer/nicer way of doing this in ES2015? Why doesn't Babel do this for me?

Answer 1

Apparently, ES6 doesn't need namespacing because each file is a separate module.

Not exactly. Each module does have its own scope, that is correct, but not every file is a module. There still are scripts in ES6 that work just like those from ES5, and are executed in the global scope.
In those scripts, you still need to avoid globals as much as you can, typically by not declaring/assigning any variables or by wrapping your "module" in an IEFE to give it a separate variable scope.

Is there a newer/nicer way of doing this in ES6?

You can use a block and lexical variable declarations (let, const, function):

{
    const msg = 'This line doesn\'t do anything.'
    window.alert(msg);
}
// msg is not defined here

Or you can use an arrow function in your IEFE, which allow you to use this to refer to the global object without needing to use .call(this)):

(() => {
    var msg = 'This line doesn\'t do anything.'
    window.alert(msg);
})();

But then, how do I avoid global namespace interference, or name collisions?

In ES6 modules, there is nothing global except the builtin objects and maybe the global object. Avoid modifying them.

And of course you will need to take care about collisions between module names - how to do that should be explained in the docs for the resolver mechanism of your module loader.

Answer 2

But, how do I prevent overwriting globals from within a module?

You can't. Nothing changed in this regard compared to ES5. The advice still is: Avoid using globals.

Answer 3

Apparently, ES6 doesn't need namespacing because each file is a separate module.

This is misinformation. As far as I know, only files that use export are ES6 modules. Without export, an ES6 file is just an ordinary script that has access to the global scope unless it is either wrapped in an IIFE or is transformed during a build process.

Revision (12 July 2016): Apparently, I corrected misinformation with more misinformation. As Kyle Simpson clarifies below, "According to the current spec, what makes a file an ES6 module is how the environment (node, browser, etc) chooses to load it, not its contents."

In You Don't Know JS: ES & Beyond, Kyle Simpson, a.k.a. @getify, states

"Modules do still have access to window and all the "globals" that hang off it, just not as lexical top-level scope. However, you really should stay away from the globals in your modules if at all possible."

Now to your questions.

[I]sn't the second way, i.e., creating a custom namespace with an IIFE, better than the first?

That depends on the environment in which your module is running. For example, in node, there is no Window object; therefore, in that environment there is no need to worry about your modules polluting the global namespace.

On the other hand, in the browser, Window is a global web API, and your module does have access to it. Technically, anything your module attaches to Window is not, strictly speaking, global; however, anything that is attached to Window is so close to a global that it is generally considered to be a bad practice to modify it except through Window's own API.

[H]ow do I avoid global namespace interference?

and

[I]s there a newer/nicer way of doing this in ES2015?

I don't know what the best practices are for dealing with scope in ES6. For the time being, I do the following:

• If a file is a module, it's top-level scope is the file itself, so I don't concern myself with global scope.
• If a file is not a module, I wrap it in an IIFE.

Source: You Don't Know JS: ES & Beyond Also Recommended: ES6 In Depth: Modules by Jason Orendorff

Answer 4

Stumbled here through Googling the same issue. Assuming you use a module loader such as rollup, try adding this line to your rollup options:

format: 'iife'

Src: https://github.com/samccone/The-cost-of-transpiling-es2015-in-2016/blob/master/rollup-plugin-babel/rollup.config.js#L9

Docs: https://github.com/rollup/rollup/wiki/JavaScript-API#format