JavaScript Fundamentals: Import and Export

Hey there 👋,

Thanks for checking this out, being a long while since I wrote so I will be starting a writing series on Javascript fundamentals for the next couple of weeks. In today's edition, I would try to explain what Javascript import and export looks like and all that you need to know about this concept.

N.B. Chunk in this writing could mean functions, variables, objects, arrays or basically reusable blocks of code

In the early days of the web, there was no standardized method of distributing and sharing reusable code across various files and as a result, JavaScript programs were mostly written entirely in one file and loaded into a script tag.

The introduction of frameworks provided the need for our codebase to be broken into reusable chunks for ease of reuse, maintainability, code splitting and also improve performance. Due to this, there are functions, objects, classes or variables we would need across our codebase, so how do we distribute these reusable chunks across our codebase?

Javascript ES6 introduced the concept of modules in which each file exists as a module or folders with an index file as a point of entry. For a function, Object, Variable or Class to be accessible to other files outside the file in which it existed it had to be exported. They could then be imported wherever they were needed.

Exports

In JavaScript, our code could be exported either as a named export or default export The literal export of a single or multiple chunks of code or functionality is termed named export while the default export made use of the default keyword.

// An example of a named export
export function getSum(arg1, arg2) {
  return arg1 + arg2
}

// An example of a default export 
export default const finalists = [England, Italy]

When exporting from our file, we can export each chunk independently or we could export all chunks in a single statement

// Exporting various chunks independently

export class Contact {
    constructor(fullName, phoneNo, location) {
        this.fullName = fullName;
        this.phoneNo = phoneNo;
        this.location = location;
    }
}

export default const user = 'Barnabas Asha'

Exporting the chunks as members in a statement at the end of the module

// Exporting chunks as members in a statement

class Contact {
    constructor(fullName, phoneNo, location) {
        this.fullName = fullName;
        this.phoneNo = phoneNo;
        this.location = location;
    }
}

function getContacts () {
  // ...
}

export { Contact, getContacts }

When exporting the chunks in a statement as members we can export as aliases using the as keyword

export { Contact, getContacts as fetchContacts }

Imports

Importing in JavaScript is done with the import keyword, members that are not exported by default are imported in curly brackets followed by the file location or path from which they are been exported.

import { Contact, fetchContacts } from 'main.js'

When importing a chunk you can also import as aliases

import { fetchContacts as fetch } from 'main.js'

Importing a default export is straightforward and it looks like this

import user from 'main.js'

In a scenario where you want to import all the chunks being exported in a module

import * as Helpers from main.js

You access each chunk using a dot notation

Helpers.fetchContacts()

For further reads on JavaScript Import and Export