Greetings, fellow coders and innovators!👋

Remember when managing large JavaScript projects was a hassle? Export and Import came to the rescue, revolutionizing code organization, enabling code reusability, and making collaboration a breeze!

ES6 revolutionized JavaScript development by introducing Export and Import, a powerful mechanism to enhance modularity, cleanliness, and maintainability. Now, sharing code among JavaScript files is a breeze!

Through exporting selected elements from a file and importing them where required, JavaScript's Export and Import facilitate seamless sharing of functionality across multiple files, promoting modular and efficient code.

To harness this powerful functionality, simply incorporate a script in your HTML document with the 'type' attribute set to 'module', unlocking the full potential of JavaScript's Export and Import capabilities.

Here is an example👇

<script type="module" src="filename.js"></script>

A script that uses this module type can now use the import and export features.

See this example👇

<html>
  <body>
    <script type="module" src="index.js"></script>
  </body>
</html>

Well, we've added a script tag with type="module" in HTML. Now, Let's understand export and import

Export

The export keyword serves as the key to unlocking code-sharing capabilities, enabling seamless collaboration and reusability of code blocks across various parts of your JavaScript project.

Imagine having an 'arithmetic_operations.js' file brimming with useful functions. When you find yourself needing the 'multiplication' variable in other files, exporting it allows seamless reuse, eliminating redundant code and promoting code efficiency.

Let's see the basic syntax of export.

Exporting individual features

export let name1, name2, …, nameN;

export function functionName(){...}

export class ClassName {...}

Let's see an example of exporting a single function

export const multiplication = (x, y) => {
  return x * y;
}

Export list

export { name1, name2, …, nameN };

Let's see an example of exporting multiple functions

const multiplication = (x, y) => {
  return x * y;
}

const add = (x, y) => {
  return x + y;
}

export { add, multiplication } ;

Rename export(s)

export { variable1 as name1, variable2 as name2, …, nameN };

Let's look at an example of Renaming export(s)

const booksClub = "Books Club";

export { booksClub as favoriteTeam };

In this code snippet, we cleverly use the export statement to rename the booksClub variable as favoriteTeam. So, when importing this variable, we'll conveniently access it as favoriteTeam, ensuring clarity and ease of use.

Let's illustrate this with a practical example below.

import { favoriteTeam } from "./team.js";

const booksClub = favoriteTeam + " " + "is my best club.";

console.log(booksClub);

By exporting variables or functions, we unleash their potential for reuse in other files, eliminating the need for redundant code and fostering a more efficient and maintainable JavaScript project.

Import

Harness the power of code reuse in JavaScript with the import keyword.

Explore the fundamental syntax of import and unlock the ability to integrate shared functionality across your projects seamlessly.

Importing individual features

import fun1 from './filename.js';

Let's see an example of importing a single function

import add from './arithmetic_operations.js';

Import list

import { fun1, fun2 } from './filename.js';

Let's see an example of importing multiple functions

import { add, multiplication  } from './arithmetic_operations.js';

Here, the import will find add, multiplication in arithmetic_operations.js.

The ./ tells the import to look for the arithmetic_operations.js file in the same folder as the current file.

The relative file path (./) and file extension (.js) are required when using import.

Rename Imports

We can rename imports by separating each as a statement with a comma.

Let's look at the basic syntax

import { variable1 as name1, variable2 as name2 } from './filename.js';

Let's look at an example of Rename Imports

import { 
  bestClub as favoriteTeam, 
  fruits as crop, 
} from "./team.js";

const bestClub = `${crop}s at ${favoriteTeam}.`;

Use * to Import Everything from a File

Suppose we have a file and we wish to import all of its contents into the current file.

This can be done with the **import * ** as syntax.

Here's an example👇

import * as arithmetic from "./arithmetic_functions.js";

The above import statement will create an object called arithmetic.

This is just a variable name, we can name it anything.

The object will contain all of the exports from arithmetic_functions.js in it, so we can access the functions as we would in any other object property.

Here's how we can use the add and multiplication functions that were imported👇:

arithmetic.add(2,3);
arithmetic.multiplication(5,3);

Export Fallback ( export default )

There is another export syntax we need to know, known as export default.

Usually, we will use this syntax if only one value is being exported from a file.

It is also used to create a fallback value for a file or module.

Let's see the basic syntax of export default

export default function (…) { … }

export default function name1(…) { … }

Let's see an example of export default

export default function mul(x, y) {
  return x * y;
}

Since export default is used to declare a fallback value for a module or file, we can only have one value be a default export in each module or file.

We cannot use export default with var, let, or const.

Import a Default Export

To import a default export, we need to use a different import syntax👇.

import name from "./filename.js";

Let's look at an example of Import a Default Export

import mul from "./arithmetic_operations.js";

The syntax differs in one key place. The imported value, mul, is not surrounded by curly braces ({}). mul here is simply a variable name.

Note: We can use any name here when importing a default.

And that's it!

Conclusion

That's fantastic! You can already imagine how you can use this Export and Import to enhance the user experience in your app.

Additionally, make sure to explore the documentation and the examples on the Export and Import. They provide a wealth of information and inspiration.

I'm glad I could help. If you have any more questions along the way, feel free to reach out. Happy coding!

JavaScript Export and Import: Unlocking the Secrets of Code Reusability

Leveraging modular code components to create reusable and efficient JavaScript applications.

Table of contents