Named and default imports (an import map stands in for a second file)
The preview is a single page, so the import map gives the name prices to a module written inline as a data: URL. In a real project the same line reads import shopName, { TAX, withTax } from "./prices.js";.
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
Hectal Shop 0.18 118