I am exploring ES6 module and trying to figure out what extra advantage we get using ES6 module instead of closure along with module pattern(MP).

For example util.js in ES6.

   var util ={
         abc:function(){
        //function body
    },
    def:function(){
         // function body
    }
    export default utils;   // here export is exposing the entire object
}

util.js using closure & module pattern

var util = (function(){
       function _abc(){
         console.log("abc")
           // function body
       };
    function _def(){
         // function body
      }

  return{          // each of the function will be exposed
      abc:_abc,
      def:_def

}
}(util ||{}))

someFile.js in ES6

import {utils} from "path/to/file"

In someFile.js with closure & module pattern

util.abc() // Will log "abc"

Also I know es6 module allow us to rename imports & exports Like export { a as abc} .

With closure & module pattern we can give a name whatever we like inside return statement like return { a:_abc}

My question:What extra benefit we can get by using es6 module instead of closure& MP.One i guess is reduction in lines of code.

Please excuse me if I have missed any basic difference

I am exploring ES6 module and trying to figure out what extra advantage we get using ES6 module instead of closure along with module pattern(MP).

For example util.js in ES6.

   var util ={
         abc:function(){
        //function body
    },
    def:function(){
         // function body
    }
    export default utils;   // here export is exposing the entire object
}

util.js using closure & module pattern

var util = (function(){
       function _abc(){
         console.log("abc")
           // function body
       };
    function _def(){
         // function body
      }

  return{          // each of the function will be exposed
      abc:_abc,
      def:_def

}
}(util ||{}))

someFile.js in ES6

import {utils} from "path/to/file"

In someFile.js with closure & module pattern

util.abc() // Will log "abc"

Also I know es6 module allow us to rename imports & exports Like export { a as abc} .

With closure & module pattern we can give a name whatever we like inside return statement like return { a:_abc}

My question:What extra benefit we can get by using es6 module instead of closure& MP.One i guess is reduction in lines of code.

Please excuse me if I have missed any basic difference

• javascript
• closures
• ecmascript-6

• While I understand the point of your post, your question as it is asked right now is way too broad to be a good fit for SO. Please edit your question to something more focused. – Kyll Commented Mar 4, 2016 at 10:20
• @Kyll rightly said. Even I was struggling to find an appropriate title anyway I changed it. hope it will converge to my doubt – brk Commented Mar 4, 2016 at 10:24
• "What extra benefit we can get by using es6 module instead of closure" is still too broad IMHO. Can you focus on one technical issue instead of having such an open question? – Kyll Commented Mar 4, 2016 at 10:26
• 1 Your ES6 module has a syntax error, export declarations must be top-level. Please indent your code properly. – Bergi Commented Mar 4, 2016 at 12:46
• 1 No, you can't use import {utils} from … for a default export. – Bergi Commented Mar 4, 2016 at 12:51

1 Answer 1

With var util = (function(){ bla bla bla }(util || {})); the global namespace is polluted, so that once you have used import {utils} from "path/to/file", it will remain in global namespace, i.e. you'll be have window.util everywhere, even after the module has finished it's work and replace by some other module. Now consider you have 100s of modules and you do it in the same way, then imagine how dirty would the poor window bee!

However if ES6 Module or CommonJS or even AMD is used, then

1. The global namespace is not polluted.
2. [ES6] You can use export default something to export a default value to use import from "path/to/file"
3. [ES6] You can export multiple things from ES6 Module, using export["anotherthing"]

Furthermore I would remend you to read this blog post.