Export and Import in Modern JavaScript

RK
2 min readApr 18, 2019

The fundamentals of how you can export as well as import javascript functions and variables, to make your code more modular

There are two ways in which you can export from a javascript file, the default way and the named way.

Export and Import in the default way

Consider this simple javascript code where you export an object using the default way.

post.js

const posts = {data: 'This is a sample data'}export default post;

Notice the default keyword that is used here. In order to use this object in other javascript code, we will need to import this file in the file ( app.js ) that we need to use it for.

app.js

import Posts  from 'post.js';
import SomeRandomName from 'post.js';

When we import a file that has used the default keyword while exporting we can use whatever name to import that file.

Export and Import in the Naming way

Consider the same post.js file that we used above and this is how we can export without using the default keyword.

export const posts = {data: 'This is a sample data'}export const baseValue = 10;

And If we have to import this in another javascript file ( app.js ). We should specify the same name as the variable that is used in the post.js file

app.js

import { posts } from 'post.js';
import { baseValue} from 'post.js';

--

--

RK

Software Engineer | Procaffinator ☕ | A dev and a little brown dude trying to make it big !