Shane Pinder Web Development Blog

Lesson 424 – Javascript ES6 – Import, Export and Modules

You can use the export function to export either a single piece of information or multiple pieces of information. In the math.js file below, the information contained in the constant variable “pi” is exported by “export default pi;” and the two functions are exported by “export {doublePi, triplePi};”.

const pi = 3.1415962;

function doublePi() {
  return pi * 2;
}

function triplePi() {
  return pi * 3;
}

export default pi;

export {doublePi, triplePi};

The code contained in the index.js file imports the information contained in the math.js file and uses it by inserting it as javascript in the html list elements –

import React from "react";
import ReactDOM from "react-dom";
import pi, { doublePi, triplePi } from "./math.js";

ReactDOM.render(
  <ul>
    <li>{pi}</li>
    <li>{doublePi()}</li>
    <li>{triplePi()}</li>
  </ul>,
  document.getElementById("root")
);

Instead of importing individual pieces of information using this code –

import pi, { doublePi, triplePi } from "./math.js";

– you can also import everything contained in the math.js file using an “*” as a wildcard like this –

import * as pi from "./math.js";

Then we have to refactor the html elements in the index.js file like this –

<ul>
    <li>{pi.default}</li>
    <li>{pi.doublePi()}</li>
    <li>{pi.triplePi()}</li>
  </ul>,

The refactored index.js file now looks like this –

import React from "react";
import ReactDOM from "react-dom";
import * as pi from "./math.js";

ReactDOM.render(
  <ul>
    <li>{pi.default}</li>
    <li>{pi.doublePi()}</li>
    <li>{pi.triplePi()}</li>
  </ul>,
  document.getElementById("root")
);