What is Export and Import in JavaScript?

What is Export and Import in JavaScript?

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1606540958103/otN4S9TK8.png)

😎Happy Coding | Thanks For Reading⚡

Comments (0)

loading comments