Module scripts versus classic scripts
Three differences in one run: the module waited until the page was parsed, its var stayed private (not on window), and strict mode turned the undeclared assignment into an error.
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
1. classic script
classic: this is window? true
classic: window.classicVar is hello
classic: a typo silently made a global, oops2 = 1
2. module script (deferred, though it comes first)
module: this is undefined
module: window.moduleVar is undefined
module: ReferenceError: oops is not defined