Javascript ES6 export const vs export let

by

In ES6, imports are live read-only views on exported-values. As a result, when you do import a from "somemodule";, you cannot assign to a no matter how you declare a in the module.

However, since imported variables are live views, they do change according to the “raw” exported variable in exports. Consider the following code (borrowed from the reference article below):

//------ lib.js ------
export let counter = 3;
export function incCounter() {
    counter++;
}

//------ main1.js ------
import { counter, incCounter } from './lib';

// The imported value `counter` is live
console.log(counter); // 3
incCounter();
console.log(counter); // 4

// The imported value can’t be changed
counter++; // TypeError

As you can see, the difference really lies in lib.js, not main1.js.

To summarize:

  • You cannot assign to import-ed variables, no matter how you declare the corresponding variables in the module.
  • The traditional let-vs-const semantics applies to the declared variable in the module.
    • If the variable is declared const, it cannot be reassigned or rebound in anywhere.
    • If the variable is declared let, it can only be reassigned in the module (but not the user). If it is changed, the import-ed variable changes accordingly.

Reference:
http://exploringjs.com/es6/ch_modules.html#leanpub-auto-in-es6-imports-are-live-read-only-views-on-exported-values

More Related Contents:

  1. Is it possible to import modules from all files in a directory, using a wildcard?
  2. Pass options to ES6 module imports
  3. `export const` vs. `export default` in ES6
  4. Node.js plans to support import/export ES6 (ECMAScript 2015) modules
  5. using brackets with javascript import syntax
  6. ES6 Modules: Undefined onclick function after import
  7. ES2015 import doesn’t work (even at top-level) in Firefox
  8. Which browsers support import and export syntax for ECMAScript 6?
  9. ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import
  10. ES6: import module from URL
  11. ES6 Destructuring and Module imports
  12. Is using an ES6 import to load specific names faster than importing a namespace?
  13. ES6 module Import giving “Uncaught SyntaxError: Unexpected identifier”
  14. How can I alias a default import in JavaScript?
  15. Are ES6 module imports hoisted?
  16. Not recommended to use “use strict” in ES6?
  17. Inlining ECMAScript Modules in HTML
  18. What is the defined execution order of ES6 imports?
  19. What is the difference between importing a function expression or a function declaration from a ES6 module?
  20. How will browsers handle ES6 import/export syntax
  21. ES2015 “import” not working in node v6.0.0 with with –harmony_modules option
  22. Re-export default in ES 6 modules
  23. Output an ES module using webpack
  24. How does JavaScript import find the module without an extension?
  25. setState doesn’t update the state immediately
  26. Private properties in JavaScript ES6 classes
  27. Why can I change a constant object in javascript
  28. Can I use arrow function in constructor of a react component?
  29. What is an “internal slot” of an object in JavaScript?
  30. ES6 destructuring object assignment function parameter default value

Leave a Comment