SyntaxFix

[javascript] Javascript ES6 export const vs export let

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

Examples related to javascript

• need to add a class to an element • How to make a variable accessible outside a function? • Hide Signs that Meteor.js was Used • How to create a showdown.js markdown extension • Please help me convert this script to a simple image slider • Highlight Anchor Links when user manually scrolls? • Summing radio input values • How to execute an action before close metro app WinJS • javascript, for loop defines a dynamic variable name • Getting all files in directory with ajax

Examples related to ecmascript-6

• "Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6 • where is create-react-app webpack config and files? • Can (a== 1 && a ==2 && a==3) ever evaluate to true? • How do I fix "Expected to return a value at the end of arrow function" warning? • Enums in Javascript with ES6 • Home does not contain an export named Home • How to scroll to an element? • How to update nested state properties in React • eslint: error Parsing error: The keyword 'const' is reserved • Node.js ES6 classes with require

Examples related to es6-modules

• How can I use an ES6 import in Node.js? • Using import fs from 'fs' • ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import • What is difference between Axios and Fetch? • How can I alias a default import in JavaScript? • `export const` vs. `export default` in ES6 • Javascript ES6 export const vs export let • Is it possible to import modules from all files in a directory, using a wildcard?