JavaScript Notes

JavaScript Classes Tutorial – ES6 Class Syntax, Inheritance & More

Master JavaScript ES6 classes with constructors, methods, static members, inheritance, private fields, and real-world examples. beginner-friendly JS OOP tutorial.

JavaScript classes (introduced in ES6/ES2015) are a clean, readable syntax for creating objects and managing inheritance. Under the hood, classes still use JavaScript's prototype system — they are "syntactic sugar" — but they add powerful features like private fields, static members, and strict constructor rules.

📊 Class Hierarchy Diagram

Example

┌──────────────────────────────────┐ │ Person (Base Class) │ │ constructor(name, age) │ │ greet() → "Hi, I am Riya" │ └──────────────┬───────────────────┘ │ extends ┌─────────┴─────────┐ ▼ ▼ ┌──────────┐ ┌───────────┐ │ Student │ │ Teacher │ │ grade │ │ subject │ │ study() │ │ teach() │ └──────────┘ └───────────┘ │ ▼ instance ┌──────────────────┐ │ const s = new │ │ Student("Aman") │ │ s.name = "Aman" │ │ s.greet() ✓ │ └──────────────────┘

💻 Example 1 — Basic Class

js example

class Person {
  constructor(name, age) {
    this.name = name;   // instance property
    this.age  = age;
  }

  greet() {
    return `Hi, I am ${this.name} and I am ${this.age} years old.`;
  }

  isAdult() {
    return this.age >= 18;
  }
}

const riya = new Person("Riya", 22);
const aman = new Person("Aman", 16);

console.log(riya.greet());
console.log(aman.greet());
console.log(riya.isAdult());
console.log(aman.isAdult());

Output

Hi, I am Riya and I am 22 years old.
Hi, I am Aman and I am 16 years old.
true
false

💻 Example 2 — Class Inheritance with `extends` and `super`

js example

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

  speak() {
    return `${this.name} makes a sound.`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);           // call parent constructor
    this.breed = breed;
  }

  speak() {               // override parent method
    return `${this.name} barks! 🐕`;
  }

  info() {
    return `${super.speak()} Breed: ${this.breed}`;
  }
}

const dog = new Dog("Bruno", "Labrador");
console.log(dog.speak());
console.log(dog.info());
console.log(dog instanceof Dog);
console.log(dog instanceof Animal);

Output

Bruno barks! 🐕
Bruno makes a sound. Breed: Labrador
true
true

💻 Example 3 — Static Methods and Properties

js example

class MathHelper {
  static PI = 3.14159;       // static property — belongs to the class

  static circleArea(radius) {
    return MathHelper.PI * radius * radius;
  }

  static add(a, b) {
    return a + b;
  }
}

// Call on the CLASS, not an instance
console.log(MathHelper.PI);
console.log(MathHelper.circleArea(5).toFixed(2));
console.log(MathHelper.add(10, 20));

// Cannot call on instance
const m = new MathHelper();
// m.circleArea(5) → TypeError: m.circleArea is not a function

Output

3.14159
78.54
30

💻 Example 4 — Getters, Setters, and Private Fields

Example

class Student { #grade = 0; // private field constructor(name, grade) { this.name = name; this.#grade = grade; } // getter — access like a property, not a method call get letterGrade() { if (this.#grade >= 90) return "A"; if (this.#grade >= 80) return "B"; if (this.#grade >= 70) return "C"; return "F"; } // setter — validate before assigning set grade(value) { if (value < 0 || value > 100) throw new Error("Grade must be 0–100"); this.#grade = value; } get grade() { return this.#grade; } } const s = new Student("Priya", 85); console.log(s.letterGrade); // getter called like a property s.grade = 95; // setter validates input console.log(s.grade); console.log(s.letterGrade);

Output

B
95
A

📋 Class Features Quick Reference

Feature	Syntax	Description
Constructor	`constructor() {}`	Runs when `new` is called
Instance method	`greet() {}`	Available on every instance
Static method	`static help() {}`	Called on the class itself
Static property	`static count = 0`	Shared across all instances
Private field	`#secret`	Truly private, no outside access
Private method	`#helper() {}`	Internal method, not exposed
Getter	`get name() {}`	Read like a property
Setter	`set name(v) {}`	Write with validation
Inheritance	`extends ParentClass`	Inherit all non-private members
Super call	`super(args)`	Call parent constructor/method

⚠️ Common Mistakes

❌ Mistake 1 — Forgetting `super()` in Subclass Constructor

js example

class Vehicle {
  constructor(brand) { this.brand = brand; }
}

class Car extends Vehicle {
  constructor(brand, model) {
    // super(brand);  ← MISSING!
    this.model = model;  // ReferenceError: Must call super before 'this'
  }
}

Output

ReferenceError: Must call super constructor in derived class before accessing 'this'

❌ Mistake 2 — Classes Are NOT Hoisted

js example

const obj = new MyClass();  // ReferenceError — class not yet defined
class MyClass { }

Output

ReferenceError: Cannot access 'MyClass' before initialization

❌ Mistake 3 — Arrow Function Methods Lose Correct `this`

Example

class Timer { delay = 100; start() { setTimeout(function() { console.log(this.delay); // undefined — 'this' is lost in regular function }, 100); } } // Fix: use arrow function: setTimeout(() => { ... }, 100)

❌ Mistake 4 — Calling Static Method on Instance

Example

class Counter { static count = 0; static increment() { Counter.count++; } } const c = new Counter(); c.increment(); // TypeError: c.increment is not a function

🎯 Key Takeaways

A class is a blueprint; an instance (via new) is the real object
constructor() runs automatically when new ClassName() is called
extends + super() enable clean inheritance hierarchies
Static members belong to the class, not instances — use ClassName.method()
Private fields (#) are truly private — not accessible outside the class
Getters and setters let you add logic to property reads and writes
Classes are not hoisted — always define before use
Under the hood, classes still use JavaScript's prototype chain

❓ Interview Questions

Q1. What is a JavaScript class? > A class is syntactic sugar over JavaScript's constructor functions and prototypes. It provides a clean, readable syntax to create objects with shared methods and support inheritance using extends and super.

Q2. What is the difference between a class and a constructor function? > Both create objects with shared prototypes. Classes enforce new (calling without it throws), do not hoist, always run in strict mode, and support private fields and static blocks. Constructor functions are older and more permissive.

Q3. What does super() do? > super() calls the parent class's constructor. It must be called before accessing this in a subclass constructor. super.method() calls a parent method from within an overriding method.

Q4. What is the difference between a static method and an instance method? > Static methods are called on the class itself (MyClass.method()) and do not have access to instance data. Instance methods are called on objects (obj.method()) and have access to this.

Q5. Are JavaScript classes true classes like in Java? > No. JavaScript classes are prototype-based under the hood. class is syntactic sugar. There is no true class-based instantiation — every "class" is actually a function, and every instance's methods are stored on a shared prototype object.

Q6. What are private class fields and when were they introduced? > Private class fields (prefixed with #) were introduced in ES2022. They are truly private — not accessible outside the class, not enumerable, and not visible via Object.keys() or JSON.stringify().

Q7. Can a JavaScript class extend multiple classes? > No — JavaScript does not support multiple inheritance. A class can only extend one parent class. You can simulate mixins using function composition or mixin patterns.

Q8. What is a getter and setter in a class? > Getters (get prop()) are methods that look like properties when read. Setters (set prop(v)) are methods that look like assignments when written. They allow adding validation or computation without changing the caller's syntax.

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript Classes Tutorial – ES6 Class Syntax, Inheritance & More.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, oop, classes, javascript classes tutorial – es6 class syntax, inheritance & more

Continue learning this concept

Oop In JavascriptAbstraction in JavaScript OOP – Hide Complexity, Expose SimplicityLearn abstraction in JavaScript OOP with class examples, private fields, real-world analogies, common mistakes, and interview Q&A. beginner-friendly tutorial.Oop In JavascriptJavaScript Constructor Functions – new Keyword, Prototype & OOP PatternsUnderstand JavaScript constructor functions with the new keyword, prototype methods, object creation, comparison with ES6 classes, and interview-ready Q&A.Oop In JavascriptEncapsulation in JavaScript – Private Fields, Getters, Setters & Data ProtectionLearn encapsulation in JavaScript with private class fields, getters, setters, closures, and real-world examples. Protect your data with ES2022 OOP techniques.Oop In JavascriptJavaScript Inheritance – extends, super, and Prototype-Based InheritanceMaster JavaScript inheritance with ES6 extends, super keyword, method overriding, prototype chain, multi-level inheritance, and interview-ready Q&A examples.Oop In JavascriptObject-Oriented Programming in JavaScript – OOP Concepts Complete GuideComplete guide to OOP in JavaScript: classes, objects, the 4 pillars (encapsulation, inheritance, abstraction, polymorphism), prototype chain, and interview Q&A.Oop In JavascriptJavaScript OOP Projects – Build Real-World Apps with Classes & OOPPractice JavaScript OOP with 3 real-world projects: Shopping Cart, Library System, and Student Grade Manager. Apply classes, inheritance, encapsulation, and polymorphism.

PreviousAbstraction in JavaScript OOP – Hide Complexity, Expose Simplicity NextJavaScript Constructor Functions – new Keyword, Prototype & OOP Patterns

📊 Class Hierarchy Diagram

💻 Example 1 — Basic Class

💻 Example 2 — Class Inheritance with extends and super

💻 Example 3 — Static Methods and Properties

💻 Example 4 — Getters, Setters, and Private Fields

📋 Class Features Quick Reference

⚠️ Common Mistakes

❌ Mistake 1 — Forgetting super() in Subclass Constructor

❌ Mistake 2 — Classes Are NOT Hoisted

❌ Mistake 3 — Arrow Function Methods Lose Correct this

❌ Mistake 4 — Calling Static Method on Instance

🎯 Key Takeaways

❓ Interview Questions

Continue learning this concept

📊 Class Hierarchy Diagram

💻 Example 1 — Basic Class

💻 Example 2 — Class Inheritance with extends and super

💻 Example 3 — Static Methods and Properties

💻 Example 4 — Getters, Setters, and Private Fields

📋 Class Features Quick Reference

⚠️ Common Mistakes

❌ Mistake 1 — Forgetting super() in Subclass Constructor

❌ Mistake 2 — Classes Are NOT Hoisted

❌ Mistake 3 — Arrow Function Methods Lose Correct this

❌ Mistake 4 — Calling Static Method on Instance

🎯 Key Takeaways

❓ Interview Questions

Continue learning this concept

💻 Example 2 — Class Inheritance with `extends` and `super`

❌ Mistake 1 — Forgetting `super()` in Subclass Constructor

❌ Mistake 3 — Arrow Function Methods Lose Correct `this`

💻 Example 2 — Class Inheritance with `extends` and `super`

❌ Mistake 1 — Forgetting `super()` in Subclass Constructor

❌ Mistake 3 — Arrow Function Methods Lose Correct `this`