{"componentChunkName":"component---src-templates-main-js","path":"/named-exports-vs-default-exports/","result":{"data":{"site":{"siteMetadata":{"title":"Sagar Hani","author":"Sagar Hani"}},"markdownRemark":{"id":"69d058b0-34fa-5b64-80dc-59627f3c6748","excerpt":"image Named Exports vs Default Exports The statement is used in javascript to export our modules which can be used in other files with the help of the…","html":"

\"image\"

\n

Named Exports vs Default Exports

\n

The export statement is used in javascript to export our modules which can be used in other files with the help of the import statement.

\n

There are 2 types of exports :

\n
- Named exports\n\n- Default exports
\n
\n

We can have multiple named exports in a file. Named exports are useful when you want to export multiple things from a file. While importing, the name of the module should be the same as the module name you are exporting.

\n

On the other hand, default exports let us import the module with any name, it need not be the same name as the module name you are exporting. You can even export anonymous functions (which don't have a name at all). But, you can have only 1 default export in a file.

\n
\n

So, if there is a use case where you want to export only 1 module from a file, which one would you prefer ?

\n

I like to use named export always, no matter if I'm exporting 1 module or multiple modules in a file. I prefer to use this import/no-default-export eslint rule in my projects.

\n
\n

Why do I prefer named export ? 🤔

\n

Firstly, it's easy to find out where all my exported modules are being used in my code base, as in named imports we strictly need to have the same name.

\n

If I have a named export like this :

\n
export const calcualateAverage = (...) => {...}\n\n// I should import it with same name in someOtherFile.js\nimport { calcualateAverage } from \"../utils/mathOperations\"\n// or\nimport { calcualateAverage as myNewCalculateAverageName } from \"../utils/mathOperations\"
\n

I can easily find calcualateAverage.

\n
\n

If I had used a default export and imported this elsewhere with some other name like :

\n
export default function calculateAverage = (...) => {...}\n\n// importing in someOtherFile.js\nimport calcAverage from \"../utils/mathOperations\"
\n

In this case, it's hard to find out that calculateAverage function is being used in some files as the imported name is different.

\n

Especially, in react, it's easy to find where all the common components are used if I export it as a named export.

\n

Helps in refactoring 🛠

\n

If I'm refactoring the calculateAverage function, say, calculateAverageForFirst10Items, I would put effort to go and rename all the named imports, or else it will start throwing errors. But, in the case of default export, one may not put effort to refactor the import names in other places as it doesn't throw an error. This will lead to a code smell. You are calculating average only for the first 10 items but your import name says calcuateAverage. The function name doesn't precisely convey what exactly it does.

\n

Hence, named exports are always safe to use, readable, and helps in maintaining large codebases.

","frontmatter":{"title":"Named exports vs Default exports","date":"December 12, 2020","description":"My views on named and default exports","image":"https://res.cloudinary.com/sagarhani/image/upload/v1607778433/sagarhani.in/named-vs-default_wkxucz.png"}}},"pageContext":{"slug":"/named-exports-vs-default-exports/","previous":{"fields":{"slug":"/sagarhani-v26.0.0/"},"frontmatter":{"title":"SagarHani v26.0.0","image":"https://res.cloudinary.com/sagarhani/image/upload/v1596531142/sagarhani.in/sagarhani-v26.png"}},"next":{"fields":{"slug":"/dynamic-og-image-generator/"},"frontmatter":{"title":"Dynamic OG Image Generator","image":"https://res.cloudinary.com/sagarhani/image/upload/v1621696014/sagarhani.in/og-image.png"}}}}}