Import and Export Statements in JavaScript and How to Use Them

Import and export statements are two great features introduced ES6 (ES2015). These two statement allows you to export and import your code and use it whenever you need. This tutorial will show you what import and export statements are, how they work and how to use them.

Import and export statements are two great features introduced ES6 (ES2015). These two statement allows you to export and import your code and use it whenever you need. This tutorial will show you what import and export statements are, how they work and how to use them.

A quick introduction

In the past, when JavaScript developers wanted to split their code into modules they had to use one of the three options. These options were AMD, CommonJS and UMD. There was built-in support for modules in JavaScript. Things changed when the ES2015 (ES6) specification was released.

One feature this specification brought to JavaScript was also a support for modules on a language-level. JavaScript developers were now able to work with native modules with the help of newly introduced import and export statements. Now, you as a JavaScript developer can split your code into multiple files.

Each of these files is a module. These modules can contain anything, from variables and functions to classes. In order to this code available to the outside you have to simply exporting it. When you want to use some of that exported code, you simply import it where you need. Now, let’s take a look at both those new statements.

The export statement

When you want to export some variable, function or class you have to place the export keyword before it. This tells JavaScript two things. First, you want that “thing” to be available from the outside of the current file. Second, other parts of the program should be able to import that “thing” with the import statement.

When you export some code you can still change it and update it. However, you can that only at the place where you exported it. You can’t do that when you import that exported code somewhere else. When you import some exported code you can only read it and use it, but not change it.

Two ways to export

When you want to export some code with export statement, there are two ways to do it. The first one is by exporting at the moment of declaration. In this case, you put the export statement on the same line right before the variable, function or class you are about to declare.

// Declare and export variables
export const MY_PASS = 'Some very important secret.'
export let name = 'Jack'
export var stack = 'JS'

// Declare and export functions
export function sayHi() {
  return 'Hi.'
}

export const sayBye = function() {
  return 'Bye.'
}

export const sayGoodBye = () => {
  return 'Good bye.'
}

// Declare and export class
export class Person {
  name = this.name
  age = this.age
  #my_secret = this.secret
}

javascript development language programming programming language technology theory web web design web development

Temporal dead zone in JavaScript (TDZ) is one of the topics every JavaScript developer should know. This tutorial will teach you all you need to know about it. You will learn what temporal dead zone in JavaScript is and how it works. You will also learn about scope and variable declaration and initialization.

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.

JavaScript private class fields and methods are new features for classes. In this tutorial, you will learn all you need to know about them.

WeakMap allows you to add additional data into an Object that belongs to another or third-party code. With the special “weak” link feature of WeakMaps, we can make sure the data associated with this alien object, would only exist as long as the object is alive.