We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies.

We use cookies and other tracking technologies to improve your browsing experience on our site, analyze site traffic, and understand where our audience is coming from. To find out more, please read our privacy policy.

By choosing 'I Accept', you consent to our use of cookies and other tracking technologies. Less

We use cookies and other tracking technologies... More

Login or register
to apply for this job!

Login or register to start contributing with an article!

Login or register
to see more jobs from this company!

Login or register
to boost this post!

Show some love to the author of this blog by giving their post some rocket fuel 🚀.

Login or register to search for your ideal job!

Login or register to start working on this issue!

Engineers who find a new job through JavaScript Works average a 15% increase in salary 🚀

Blog hero image

Why we have banned default exports in JavaScript and you should do the same

Krzysztof Kaczor 29 November, 2017 | 2 min read

ES2015 was the most important improvement to Javascript in years. Among many great features, it brought brand new module system — Ecma Script Modules which finally solved the problem of sharing code between files (modules) on a language level. It was a huge step forward but it needed to work with already existing modules, especially CommonJS used by node (require). That’s why it required some compromises, one of them is the existence of default exports. In this article, I want to explain why here at Neufund, we decided to ban default exports and use solely named ones.

ESM are part of ES6 (ES2015)

Better DX

Default exports don’t export any name ie. symbol that can be easily associated with an exported value. Named exports, on the other hand, are all about having a name (pretty obvious right 😂) . This makes possible for IDEs to find and import dependencies for you automatically, which is a huge productivity boost.

How cool is that?

Refactoring

Default exports make large-scale refactoring impossible since each importing site can name default import differently (including typos).

// in file exports.js
export default function () {...}
// in file import1.js
import doSomething from "./exports.js"
// in file import2.js
import doSmth from "./exports.js"

On the contrary, named exports make such refactoring trivial.

Better tree shaking

Sometimes you can be tempted to export one huge object with many properties as default export. This is an anti-pattern and prohibits proper tree shaking:

// do not try this at home
export default {
  propertyA: "A",
  propertyB: "B",
}
// do this instead
export const propertyA = "A";
export const propertyB = "B";

Using named exports can reduce your bundle size when you don’t use all exported values (especially useful while building libs).

Summary

Default exports were introduced mostly for easier interoperability with thousands CommonJS modules that were exporting single values like:

module.exports = function() {...}

They don’t bring many benefits when used internally in your codebase, so please avoid them and thus make world a better place 😁

If you’re passionate about Front End development, check out the JavaScript Works job-board here!

Originally published on blog.neufund.org

Related Jobs

Related Issues

viebel / klipse-clj
viebel / klipse-clj
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
viebel / klipse
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
viebel / klipse
  • 1
  • 0
  • Intermediate
  • Clojure
viebel / klipse
  • Open
  • 0
  • 0
  • Intermediate
  • Clojure
  • $80
viebel / klipse
  • Open
  • 0
  • 0
  • Advanced
  • Clojure
  • $80
viebel / klipse
  • Started
  • 0
  • 2
  • Advanced
  • Clojure
  • $180
viebel / klipse
  • Started
  • 0
  • 1
  • Intermediate
  • Clojure
viebel / klipse
  • Started
  • 0
  • 3
  • Intermediate
  • Clojure
  • $80
viebel / klipse
  • 1
  • 0
  • Advanced
  • Clojure
  • $300

Get hired!

Sign up now and apply for roles at companies that interest you.

Engineers who find a new job through JavaScript Works average a 15% increase in salary.

Start with GithubStart with Stack OverflowStart with Email