ES6 Module 3: Architecture (Classes & Modules)

13. ES6 Module 3: Architecture (Classes & Modules)#

13.1. 1. Classes#

ES6 introduced class syntax, which is primarily syntactic sugar over JavaScript’s existing prototype-based inheritance. It makes object-oriented programming patterns easier to write and read.

13.1.1. Basic Syntax#

class User {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(`Hi, I am ${this.name}`);
  }
}

const user = new User("Alice");
user.sayHi();

13.1.2. Inheritance (extends and super)#

class Admin extends User {
  constructor(name, permissions) {
    super(name); // Call parent constructor
    this.permissions = permissions;
  }

  deleteUser(u) {
    console.log(`${this.name} deleted ${u.name}`);
  }
}

13.1.3. Static Methods#

Methods that are called on the class itself, not on instances.

class MathUtil {
  static add(a, b) {
    return a + b;
  }
}
console.log(MathUtil.add(5, 5)); // 10

13.2. 2. Modules (Import/Export)#

ES6 introduced an official module system. Each file is treated as a separate module.

13.2.1. Named Exports#

You can export multiple items from a file.

// analytics.js
export const data = [1, 2, 3];
export function analyze() { ... }

// main.js
import { data, analyze } from './analytics.js';

13.2.2. Default Exports#

Used for the “main” entity of the module.

// User.js
export default class User { ... }

// main.js
import User from './User.js'; // No curly braces needed

13.2.3. Renaming#

import { analyze as runAnalysis } from './analytics.js';

13.3. 3. Important Notes on Modules#

  • Strict Mode: Modules are always in “strict mode” by default.

  • Defer: Module scripts are deferred automatically (they wait for HTML to parse).

  • CORS: Modules fetched over HTTP require valid CORS headers.

13.4. 🔴 Quiz: Classes & Modules#

Q1: In a child class constructor, what must you call before using this? A) super() B) parent() C) this.init()

Q2: How do you import a “default” export? A) import { Name } from ... B) import Name from ... C) import [ Name ] from ...

Q3: Are ES6 Classes completely different from Prototypes? A) Yes, they use a new internal engine. B) No, they are syntactic sugar over prototypes.

See Answers

A1: A. super() calls the parent constructor and initializes this. A2: B. Default exports are imported without braces. A3: B. Under the hood, it is still prototype-based inheritance.

Contents