DEV Community

Abhiram Reddy
Abhiram Reddy

Posted on

Imports & Exports

ES6 has brought a lot of revolutionary changes to the way Javascript code is written in general. And the frequently used ones are namely:

  1. variable declarations, ie const and let instead of var
  2. arrow functions
  3. imports and exports In this post, I'll be talking about imports and exports.

what is it?
So, what are these exactly?
Well, with the arrival of ES6 features, the best thing that happened was that were now able to write modular code. This means that we can structure our code and separate our concerns by writing pieces of code which accomplish a specific task in separate files.
The problem that arises now is, how do we connect these pieces of code to make the application functional? We can import the required parts code to use in that file.

There are two ways to export your code:

  1. default exports
  2. named exports

Default exports

If you have only one function that you would like to reuse in other parts of your code you use default exports as shown below.
default exports

Named exports

Named exports are used when you have multiple functions that need to be reused. Here is an example.
named exports

Where is it used?

And that's pretty much it. Cool right?
Personally, I love this feature because it helps you when creating larger projects.
For instance, let's say you want to incorporate the MVC(Model, View, Controller) architecture into your code. The MVC model basically seperates the various concerns and the Controller acts as the central piece because it interacts with both the Model and View. So importing the required functions becomes necessary.
I really hope that you find this useful. Do let me know what you think! You can contact me at https://twitter.com/nrabhiram

Top comments (0)