PricingLoginStart free
JavaScript Academy · Lesson

Class Syntax (Preview): constructor, methods, static, extends

A gentle look at class syntax: constructor, instance methods, static helpers, and simple inheritance with extends.

Lesson 2 of 28 steps

Class Syntax (Preview): constructor, methods, static, extends is a free JavaScript Academy lesson on CoddyKit. This is lesson 2 of 2. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 2 lessons in total.

Intro to class syntax

Goal: See how class syntax maps to prototypes.

  • constructor for setup
  • methods on the prototype
  • static helpers on the class
  • extends for simple inheritance
Class Syntax (Preview): constructor, methods, static, extends — illustration 1

Constructor + method

The constructor runs on new. Methods in the class body are shared by all instances (prototype).

// Class with a constructor and an instance method
class Counter {
  constructor(start = 0) {
    // Initialize fields
    this.value = start;
  }

  // Instance method (lives on the prototype)
  inc() {
    this.value = this.value + 1;
    console.log("Now:", this.value);
  }
}

const c = new Counter(1);
c.inc();
c.inc();
Class Syntax (Preview): constructor, methods, static, extends — illustration 2

Prototype sharing

Instance methods in class syntax are prototype methods, so the same function is reused.

// Prototype sharing demo
class Greeter {
  say(name) {
    console.log("Hello,", name);
  }
}

const g1 = new Greeter();
const g2 = new Greeter();

// Same function reference for both instances
console.log("Same method?", g1.say === g2.say);
Class Syntax (Preview): constructor, methods, static, extends — illustration 3

Static method basics

static methods are called on the class itself, not on instances.

// Static method: lives on the class, not instances
class MathBox {
  static double(n) {
    return n * 2;
  }
}

console.log("Static call:", MathBox.double(4));

const m = new MathBox();
// @ts-ignore (conceptually): next line would be undefined in JS
console.log("Instance has static?", typeof m.double);
Class Syntax (Preview): constructor, methods, static, extends — illustration 4

Simple inheritance

extends sets up the prototype chain; use super to call the parent method.

// Inheritance with extends and super
class Animal {
  speak() {
    console.log("...");
  }
}

class Dog extends Animal {
  speak() {
    // Optionally call parent method
    super.speak();
    console.log("Woof");
  }
}

const d = new Dog();
d.speak();
Class Syntax (Preview): constructor, methods, static, extends — illustration 5

Tips for classes

Tips:

  • Keep classes tiny: a couple of fields and methods.
  • Prefer instance methods in the class body (shared via prototype).
  • Use static for pure helpers not tied to an instance.
Class Syntax (Preview): constructor, methods, static, extends — illustration 6

Class method placement quiz

Quick check: Shared method placement.

Class Syntax (Preview): constructor, methods, static, extends — illustration 7
Answer it in the interactive lesson

Recap

Recap: You created a class with a constructor, wrote shared instance methods, added a static helper, and extended a base class with super.

Class Syntax (Preview): constructor, methods, static, extends — illustration 8
Free to start

Learn JavaScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses
59
Lessons
200
Start learning freeView the full course

Frequently Asked Questions

Is the “Class Syntax (Preview): constructor, methods, static, extends” lesson free?

Yes — any 3 lessons of the JavaScript Academy learning path, including “Class Syntax (Preview): constructor, methods, static, extends”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 2 lessons in total.

What will I learn in “Class Syntax (Preview): constructor, methods, static, extends”?

A gentle look at class syntax: constructor, instance methods, static helpers, and simple inheritance with extends. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 2.

How long does the “Class Syntax (Preview): constructor, methods, static, extends” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Prototype Chain & Own-Property Basics
  2. Class Syntax (Preview): constructor, methods, static, extends
← Back to JavaScript Academy