Modern JavaScript — ES6+ Classes & Modules

Classes as blueprints for objects

You already know how to create individual objects with object literals. A class is a template for creating many objects that share the same shape and behavior. You define one with the class keyword, give it a constructor method that runs when a new instance is created, and add regular methods that every instance can call. Inside the class, this refers to the specific instance the method was called on, exactly like the this you've already seen in DOM event handlers. You create an instance with the new keyword, which runs the constructor and hands you back a fully formed object.

1class Movie {2  constructor(title, year, rating) {3    this.title = title;4    this.year = year;5    this.rating = rating;6  }78  describe() {9    return `${this.title} (${this.year}) — rated ${this.rating}/10`;10  }1112  isTopRated() {13    return this.rating >= 8;14  }15}1617const inception = new Movie("Inception", 2010, 8.8);18console.log(inception.describe());19console.log(inception.isTopRated()); // true

Classes can also extend one another with extends, letting a more specific class inherit everything from a general one and add or override behavior. Inside a subclass's constructor, calling super(...) runs the parent class's constructor first, which is required before you can use this. Inheritance is powerful but easy to overuse: reach for it when you truly have an 'is-a' relationship, like a DocumentaryMovie being a kind of Movie with an extra property, rather than forcing unrelated things to share a parent class just to avoid repeating a little code.

1class DocumentaryMovie extends Movie {2  constructor(title, year, rating, subject) {3    super(title, year, rating);4    this.subject = subject;5  }67  describe() {8    return `${super.describe()} — about ${this.subject}`;9  }10}1112const doc = new DocumentaryMovie("Free Solo", 2018, 8.1, "rock climbing");13console.log(doc.describe());

Modules: splitting code across files

As a project grows, keeping everything in one JavaScript file becomes unmanageable. ES modules let you split code into separate files and explicitly control what's shared between them using export and import. A file can export a class, function, or value by name, and any other file can import exactly what it needs. This makes dependencies explicit: reading the top of a file tells you exactly what it relies on, instead of hoping some global variable was defined somewhere else earlier. To use modules in the browser, your script tag needs type="module", which also means the file runs in strict mode automatically.

1// movie.js2export class Movie {3  constructor(title, rating) {4    this.title = title;5    this.rating = rating;6  }7}89export const RATING_THRESHOLD = 8;1011// app.js12import { Movie, RATING_THRESHOLD } from "./movie.js";1314const film = new Movie("Arrival", 7.9);15console.log(film.rating >= RATING_THRESHOLD);

Modules also support a single export default per file, useful when a file's whole purpose is to provide one main thing, like a single class or a single configuration object; you import a default export without curly braces and can name it whatever you like on the way in. Combining classes and modules gives you the same architecture used in production applications: each file defines one clear responsibility (a Movie class, a fetchMovies function, a rendering helper), and your main script wires them together by importing what it needs.

• class defines a blueprint with a constructor and methods
• new ClassName(...) creates an instance, running the constructor
• extends lets a class inherit from another, super() calls the parent constructor
• export shares a class, function, or value from a file
• import { name } from "./file.js" brings named exports into another file
• export default marks one primary export per file, imported without braces

Together, this chapter closes the loop on everything Level 4 has covered. You now know how to shape data with array methods and objects, fetch real data asynchronously and handle its successes and failures, persist state across reloads, style a growing project with a real architecture, and organize the JavaScript itself into classes and modules. The capstone Movie Explorer App is designed to make you use every one of these skills together, which is exactly what building a real application feels like.