Live bindings, and each module runs once
The counter module ran once and both scripts share it. count updated inside A without re-importing (a live binding), but A could not assign to it: only the module that owns count may change it.
An ES module is a JavaScript file with its own private scope that shares values with export and receives them with import; the browser loads modules with <script type="module">, runs them in strict mode, deferred, and only once each.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a module greet.js with a default export function greet(name) that returns Hello, <name>!, and a named export LANG = "en". Then write the import line that uses both and logs greet("Asha") and LANG.
Using an import map and a data: URL, make a live page whose module math exports square(n), and a module script that logs square(9).
A teammate wrote import { formatPrice } from "./format.js"; but format.js has export default function formatPrice() {...}. What error do they see, and what are two ways to fix it?
Explain it without notes
What is the difference between a named export and a default export, and how do you import each?
List the ways a <script type="module"> behaves differently from a classic <script>.
Why are imports called live bindings, and what happens if an importer assigns to one?
How do ES modules differ from CommonJS in Node.js?
Preview
Console
Nothing logged yet.Expected console output
counter module runs
A sees 0
A sees 2 after two increments
TypeError: Assignment to constant variable.
B sees 2