es6 import for side effects meaning

by

When you need to import something that doesn’t export anything, but does something else, this is a side effect only module. You import it only to initialize it.

Pure and Non Pure Modules

If you think about modules as functions, a module that only effects the scope by exporting it’s content is like a function that always returns the same thing (a pure function without parameters). No matter how many times you’ll import react 15.01, you’ll always get an object that contains the same methods.

A module with side-effects is one that changes the scope in other ways then returning something, and it’s effects are not always predictable, and can be affected by outside forces (non pure function). A polyfill for example, might not do anything, because it finds that the feature that it enables is already supported by the browser.

Examples of side effects:

  • Angular binds to the global window object, but doesn’t export
    anything.
  • A polyfill that enables ES6 features in the browsers that don’t
    support them, like babel polyfill is a side effect.
  • Many jQuery plugins attach themselves to the global jQuery object.
  • Analytics modules that run in the background, monitor user interaction, and send the data to a server.
  • Importing CSS in webpack can be considered a side effect if you’re not using CSS modules.

More Related Contents:

  1. When should I use curly braces for ES6 import?
  2. How to use code from script with type=module [duplicate]
  3. Web Workers – How To Import Modules
  4. Importing javascript file for use within vue component
  5. ES6 – declare a prototype method on a class with an import statement
  6. Unable to access React instance (this) inside event handler [duplicate]
  7. Javascript object literal: what exactly is {a, b, c}?
  8. ES6 Modules: Undefined onclick function after import
  9. Spread Syntax ES6
  10. ES6 Object Destructuring Default Parameters
  11. Javascript ES6 TypeError: Class constructor Client cannot be invoked without ‘new’
  12. ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import
  13. Why do I need to await an async function when it is not supposedly returning a Promise?
  14. Scope of Default function parameters in javascript
  15. React useState hook event handler using initial state
  16. Is there a downside to using ES6 template literals syntax without a templated expression?
  17. “This” within es6 class method [duplicate]
  18. Syntax error in IE using ES6 arrow functions
  19. Get the class name of ES6 class instance
  20. Mixins for ES6 classes, transpiled with babel
  21. Get list of duplicate objects in an array of objects
  22. destructuring falsy and null with default parameters
  23. What can we do with ES6 Generator that we cannot with for loop?
  24. How to namespace es6 classes (for React components)
  25. Why does .then() chained to Promise.resolve() allow const declaration to be reassigned?
  26. Javascript – Template Strings Don’t Pretty Print Objects
  27. How can the current number of i be accessed in a for of loop?
  28. How to bind methods when destructuring an object in JavaScript?
  29. Return object with default values from an array in JavaScript
  30. Deep nested array of objects not rendering

Leave a Comment