What is export default?

JavaScript
1

Hello. What is export default?

1 Like
2

Based on what you know from your previous question on named exports:

export { example1, example2 };
export function example3 () {}
export const example4 = "";

You can have as many named exports as you want. You import them like

import { example1, example2, example3 } from "./somefile";

This is good when you want individual functions or variables or objects or whatever it was that was exported.

Very often though you have a single thing you want to export, and each file can have one default export. For example:

export default class MyClass {}

Or maybe

export default function example () {}

It generally represents the main thing included in a module (remember, one file === one module). When you import this, you don’t use the curly brackets

import MyClass from "./file1";
import example from "./file2";

This is a bit abstract, so as a real-world example:

The React UI library has a default export, which contains everything, and it gets imported into every file that uses React.

import React from "react";

React also exports a load of functions as well as the core default React object, so you can also import the named exports as well:

import React, { Component, useEffect, useState } from "react";

So you get the main React class, plus the Component function and the useEffect and useState functions to use in the file they are imported into

4 Likes
3

Thanks for your answer.

4

So, export default is optional? I can just export things?

5

Yes, is up to you. It can make things clearer in various casss, but you don’t need to use it.

6

Thanks for the reply.