0Pricing
Frontend Academy · Lesson

Modules: import and export

Split code into ES modules with named and default exports, import selectively, and understand how module bundlers resolve the dependency graph.

Why Modules?

Before modules, all JavaScript ran in the global scope. Variables collided. Code order mattered. Files had to load in sequence. ES Modules give every file its own scope, explicit imports, and tree-shakable exports.

Named Exports

Export specific values with the export keyword. A file can have many named exports. Consumers import exactly what they need.

// utils.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export class Vector {
  constructor(x, y) { this.x = x; this.y = y; }
}

All lessons in this course

  1. Array Methods: map filter reduce find
  2. Object Destructuring and Spread
  3. Template Literals and Optional Chaining
  4. Modules: import and export
← Back to Frontend Academy