PY
JS

Python to JavaScript

11 lessons

Progress0%
1Variables and Constants2Functions and Closures3Lists vs Arrays4Dicts vs Objects and Map5Classes and Prototypes6Modules and Imports7Async Programming8DOM and Browser APIs9Type Hints vs TypeScript10Error Handling11Build Tools and npm
All Mirror Courses
PY
JS
Modules and Imports
MirrorLesson 6 of 11
Lesson 6

Modules and Imports

Organizing code with ES modules

Introduction

In this lesson, you'll learn about modules and imports in JavaScript. Coming from Python, you already have a foundation for understanding this concept. We'll build on that knowledge while highlighting the key differences.

Mirror Card
PY
From Python:

In Python, you're familiar with organizing code with es modules.

JS
In JavaScript:

JavaScript has its own approach to organizing code with es modules, which we'll explore step by step.

The JavaScript Way

Let's see how JavaScript handles this concept. Here's a typical example:

JS
JavaScript Example
// math_utils.js
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export class Calculator {}
export default class MainCalc {}   // default export

// main.js
import { PI, add } from "./math_utils.js";
import * as mu from "./math_utils.js";
import Calc from "./math_utils.js"; // default import
import MainCalc, { PI as pi } from "./math_utils.js";

// Node built-ins
import fs from "fs";
import path from "path";

Comparing to Python

Here's how you might have written similar code in Python:

PY
Python (What you know)
# math_utils.py
PI = 3.14159
def add(a, b): return a + b
class Calculator: pass

# main.py
from math_utils import PI, add
import math_utils as mu
from math_utils import Calculator as Calc

# Standard library
import os
import json
from pathlib import Path
Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

JS requires explicit export — Python exports everything by default

Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

Default exports have no Python equivalent

Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

import * as ns ≈ import module_name

Mirror Card
PY
From Python:

You may be used to different syntax or behavior.

JS
In JavaScript:

File extensions usually required in browser/ES modules

Step-by-Step Breakdown

1. Named Exports and Imports

JavaScript requires explicit export. Named imports use curly braces.

PY
Python
# Everything in a .py file is importable
from utils import add, PI
JS
JavaScript
// Must mark as export
export function add() {}
export const PI = 3.14;
// Import:
import { add, PI } from "./utils.js";

2. Default Exports

Each module can have one default export, imported without curly braces.

PY
Python
# No direct equivalent in Python
JS
JavaScript
export default class App {}
// Import:
import App from "./app.js";
Common Pitfall
Default exports are imported without braces. Mixing up { App } and App is a common mistake.

3. Namespace Import

import * as ns gives access to all named exports under one namespace.

PY
Python
import math_utils as mu
mu.add(1, 2)
JS
JavaScript
import * as mu from "./math_utils.js";
mu.add(1, 2);

Common Mistakes

When coming from Python, developers often make these mistakes:

  • JS requires explicit export — Python exports everything by default
  • Default exports have no Python equivalent
  • import * as ns ≈ import module_name
Common Pitfall
Don't assume JavaScript works exactly like Python. While the concepts may be similar, the syntax and behavior can differ significantly.

Key Takeaways

  • export required — nothing is auto-exported
  • import { name } for named, import X for default
  • import * as ns for namespace import
Rule of Thumb
The best way to learn is by doing. Try rewriting some of your Python code in JavaScript to practice these concepts.
PreviousNext