Kenta Takeuchi

Posted on Mar 15 • Originally published at bmf-tech.com

Modern JS: import and export

#javascript #es6 #es5

This article was originally published on bmf-tech.com.

※This article is a reprint from the Innovator Japan Engineers’ Blog.

What is export

export is a statement that allows you to receive functions, variables, objects, classes (classes are syntactic sugar for prototype-based inheritance and are a type of function. For more details, see Modern JS: Classes), etc., from a specified file and use them in any file.

There are mainly two ways to use export.

Named exports

This method involves naming the elements you want to export.

export { fooFunction };

export { fooFunction, barFunction, ... }; 

export const foo = 'bar'; 

export let foo, bar, ...;

export class foo{...};

You can export elements like this. You can also use var and let for exporting variables.

Default exports

This method uses the default keyword to export when you want to set a default element to export.

export default fooFunction() {}

export default class {}

Note that var, let, and const cannot be used with export default.

What is import

import is a statement that allows you to load functions, variables, and objects exported from another file and use them.

import { foo } from "Foo";
import { foo, bar } from "FooBar";
import { foo as bar } "Foo";  // You can specify an alias
import { foo as bar, bar as foo, ... } "FooBar";
import "FooBar"; // Import everything

Regarding the scope of imported elements, they are generally in the current scope (local scope).

How to import default elements defined with export default

To simply call the default, do it like this.

import fooDefault from "Bar";

If you want to import named elements together, define them after the default import.

import fooDefault, { foo, bar } "FooBar";

Example of exporting/importing a class

When exporting a class, don't forget to call new in the import destination or export destination.

An example of calling new in the import destination is like this.

export.js

export class foo {
  fooFunction() {
     return 'foo'; 
  }
}


export default class bar {
  barFunction() {
     return 'bar';
  }
}

import.js

import { foo } from 'export'; // Without {}, the default bar will be called
import bar from 'export';

const objFoo = new foo;
const objBar = new bar;

console.log(objFoo.fooFunction()); // foo
console.log(objBar.barFunction()); // bar

If you call new in the calling source, it looks like this.

export.js

class foo {
  fooFunction() {
     return 'foo';
  }
}

function createFoo() {
  return new foo();
}

export default createFoo;

import.js

import createFoo from 'export';

console.log(createFoo.fooFunction()); // foo

Summary

It is good to thoroughly understand the specifications once more, as they are commonly used in recent frameworks like Vue.js and React.

DEV Community