SaltyCrane Blog — Notes on JavaScript and web development

Modules and import in ES6 for Python developers

Date:  |  Modified:  |  Tags: javascript  |  3 Comments

Here's a comparison of Python and JavaScript (ES6) imports. There are a few differences between the two:

  1. JavaScript imports are static; Python's are dynamic.
  2. JavaScript items must be explicitly exported. In Python, all items are available for import.
  3. JavaScript has a concept of a default export. Python does not.

PythonES6 (ES 2015)
 
import mymodule
mymodule.myfunc()
mymodule.py:
def myfunc(): pass

import mymodule as myalias
myalias.myfunc()
mymodule.py:
def myfunc(): pass
Namespaced imports
import * as myalias from "./mymodule";
myalias.myfunc();
mymodule.js:
export function myfunc() {}
Note: this form covers both Python's import mymodule and import mymodule as myalias forms.
 
from mymodule import myvar, myfunc
print myvar
myfunc()
mymodule.py:
myvar = 42
def myfunc(): pass
Named imports
import { myvar, myfunc } from "./mymodule";
console.log(myvar);
myfunc();
mymodule.js:
export var myvar = 42;
// no semicolon for inline exports
// of functions and classes
export function myfunc() {}
Note: curly braces are required even if only importing a single item. This is not destructuring. It is syntax specific to modules. Destructuring on import is not supported in ES6.
  No equivalentDefault imports (preferred form)
import myalias from "./mymodule";
myalias();
mymodule.js:
export default function myfunc() {}

Note: this import syntax has no curly braces because export default is used instead of just export in mymodule.js. There can be only one default export per module. Using this syntax is the preferred form. Unlike the form with curly braces, you will always supply your own name for the imported item. It may or may not be the same as the original name of the exported item. You may also combine the default import syntax with the non-default syntax.

import mydefault, { myother } from "./mymodule";
mydefault();
myother();
mymodule.js:
export function myother() {}
export default function myfunc() {}
 
from mymodule import myfunc as myalias
myalias()
mymodule.py:
def myfunc(): pass
Renaming an import
import { myfunc as myalias } from "./mymodule";
myalias();
mymodule.js:
export function myfunc() {}

from mymodule import *
print myvar
myfunc()
mymodule.py:
myvar = 42
def myfunc(): pass
Note: this form is not recommended		No equivalent
 
from mydir.mymodule import myfunc
myfunc()
mydir/mymodule.py:
def myfunc(): pass
Note: mydir contains a __init__.py file and is a module (package)		Importing from a subdirectory
import { myfunc } from "mydir/mymodule";
myfunc();
mydir/mymodule.js:
export function myfunc() {}

Names vs. paths

Modules can be referenced by name or by path. Names are often used with external libraries. For example, below "react" is the name.

import React from "react";

Paths are often used with your project modules. Here the module is referenced by the path "./MyComponent". (The .js extension is implicit.)

import MyComponent from "./MyComponent";

When are curly braces needed?

Curly braces are needed when importing non-default exports from a module. If the item is exported with default, use the import syntax without curly braces.

// mymodule.js
export default Something;

import Something from "mymodule";

If the item is exported without default, you must import the item with curly braces.

// mymodule.js
export Something;

import { Something } from "mymodule";

References

You Don't Know JS: ES6 & Beyond

Exploring ES6

Comments


#1 Trung commented on :

Can you explain when you need the curly braces {} in ES6 imports?

disqus:2448577586


#2 Eliot commented on :

Hi Trung, thanks for your comment! Curly braces are needed when importing non- default exports from a module. If the module uses the default keyword when exporting an item, do not use curly braces when importing. If it does not use the default keyword when exporting, do use the curly braces when importing. I'll update the post to add notes about this.

disqus:2448633583


#3 James Walker commented on :

Just found this, trying to learn ES6 right now and keep finding modules somewhat awkward to work with. Like Python, but not. This article clarified a lot for me - thank you!

disqus:3411106622