What is Export and Import in JavaScript?

Subscribe to my newsletter and never miss my upcoming articles

My new post for beginners and learners. So here We'll learn about Import and Export in a very very easy way. Let's go

Import and Export

  • In JavaScript ES6, we can import and export functionalities from modules.
  • These can be functions, classes, components, constants, essentially anything assign to a JavaScript variable.
  • Modules can be single files or a whole folder with one index file as an entry point.

Why to use Import and Export

  • The import and export statements in JavaScript help you to share code across multiple files to keep it reusable and maintainable.
  • Encapsulation : Since not every function needs to be exported from a file. Some of these functionalities should only be used in files where they have been defined. File exports are a public API to a file, where only the exported functionalities are available to be reused elsewhere. This follows the best practice of encapsulation.

Export before declaration

export const name = Rahul;
export function sayHi(user) {
    alert(`Hello, ${user}!`);
} // no; at the end

And import them in another file with a relative path to the first file.

import { name } from './firstfile.js';
console.log(name); // Rahul
sayHi(name); // Hello, Rahul!
import * as person from './firstfile.js'; 
console.log(person.name); // Rahul

Imports can have aliases, which are necessary when we import functionalities from multiple files that have the same-named export.

import { name as firstName, sayHi } from './firstfile.js'; 
console.log(firstName); // Rahul

There is also default statement, which can be used for a few cases:

  • To export and import a single functionality
  • To highlight the main funuctionality of the exported API o a module To have a fallback import functionality
const person = {
    firstName: 'Rahul',
    lastName: 'Singh',
};
export default person;

We can leave out the curly braces to import the default export.

import developer from './firstfile.js';
console.log(developer); 
// { firstName: 'Rahul', lastName: 'Singh' }

That was it explaining the import and export in JavaScript. Hope you have found it useful.


Need Help

Need help in raising funds to buy a Mechanical Keyboard. This pandemic has affected my family badly so can't ask my DAD for it. Please Help Me.

1.png

😎Happy Coding | Thanks For Reading⚡

No Comments Yet