Export vs Export Default in JS

While Working with Javascript or while making components in React you must have exported components or modules to use in other components or files. While working with react I always just used to write export default MyComponent, but never knew why I was using the keyword default here.

So let's understand this with Javascript, So in javascript, the default keyword is used in the context of exports and imports.
When you see export default in a Javascript or React file, it means that the module is exporting a default value.

For Example

const add = (a,b) => a+b;
const subtract = (a,b) => a-b;

export default add;

Now because we used the default keyword here, only the add function will be able to be exported from this file.

I think of it like our subtract function has become private to only this file, so you can call the subtract function internally in this file but can't use it in other files.

The advantage of using the default keyword is when you have only one function in a file and want to export that. The advantage of using default in such scenarios is that other files can name if whatever they want and don't need to explicitly import it with the same name as exported and without using curly braces.

For example:-

// anotherFile.js

// Importing the functions from functions.js
import addFunction from './functions';

// Example usage
const sumValues = addFunction (2, 3);

console.log('Sum:', sumValues);

Here I imported our add function with a different name but it still works. Because it was exported as a default function.

So what happens if I remove the default keyword?

Let's take the same example as above and this time we will not use the default keyword.

const add = (a,b) => a+b;
const subtract = (a,b) => a-b;

// Exporting both functions
export { add , subtract };

Now because we don't want to have a default export of this file we exported both functions like mentioned in the above example.

Now if we want to use it in another file this is how it will look like:-

// anotherFile.js

// Importing the functions from functions.js
import { add, subtract } from './functions';

// Example usage
const sumValues = add(2, 3);
const subtractValues = subtract(4, 5);

console.log('Sum:', sumValues );
console.log('Subtraction:', subtractValues );

The thing to notice here is that, here we can't change the name when importing those functions because it wasn't exported as a default. Also, you cant export multiple functions as default.

Exporting functions with both deafult keywords and without it

We can also export functions by marking one function as default and others without it, showing that the function marked with the default keyword is the primary function from that file.

For example :-

const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

export { subtract };
export default add;

Here is how it will look like when importing

// Importing the default export and named export from functions.js
import customName, { subtract } from './functions';

const sumValues = customName(2, 3);
const subtractValues = subtract(4, 5);

console.log('Sum:', sumValues);
console.log('Subtraction:', subtractValues);

You can also change the name of an exported fnction which was exported without using default like this :-

import { subtract as subtractChangeName } from './functions';
const subtractValues = subtractChangeName (4, 5);
console.log('Subtraction:', subtractValues);

Thanks for reading this far 😁