JavaScript Classes

So far you have made objects one by one: { name: "Priya", marks: 92 }, then another, then another — copying the same shape every time. When you need ten students, that copying gets old. A class fixes it: you write the shape once, like a blueprint, and then stamp out as many objects as you need.

Diagram — see how it fits together

Think of a recipe. The recipe for masala chai is written once — tea, milk, ginger, sugar. Every cup you make follows the same recipe, but each cup is its own cup. A class is the recipe. Each object made from it is a cup. The recipe is called the class; the cup is called an instance.

Writing a class — class, constructor, methods

class Student {
  constructor(name, marks) {
    this.name = name;
    this.marks = marks;
  }
  result() {
    return this.marks >= 40 ? "Pass" : "Fail";
  }
}
let priya = new Student("Priya", 92);
console.log(priya.result()); // "Pass"

Three parts to learn. The class keyword names the blueprint. The constructor is a special method that runs when you create a new object with new — it receives the starting values and stores them on this. And the methods — like result() — are the things every object made from the class can do. Notice there are no commas between the methods, and no function keyword in front of them: inside a class, you just write the name.

Inheritance — extends and super

Sometimes one blueprint is almost like another. A Teacher has a name and a subject; a Student has a name and marks. Both have a name. Instead of writing the name part twice, one class can extend another:

class Person {
  constructor(name) { this.name = name; }
}
class Student extends Person {
  constructor(name, marks) {
    super(name);      // calls the parent's constructor
    this.marks = marks;
  }
}

extends says "this class builds on that one". super(name) calls the parent's constructor first — it must come before you use this in the child's constructor, or JavaScript throws an error. The child gets everything the parent has, plus its own extras.

Common mistakes

• Forgetting new — Student("Priya", 92) without new runs the constructor as a plain function and returns undefined. Always write new.
• Using this before super() in a child constructor — JavaScript throws an error. Call super() first.
• Putting commas between methods in a class — methods are separated by nothing, just like in an object literal without commas. A comma there is a syntax error.
• Writing function before a method name inside a class — the keyword is not used there. Just write result() { ... }.

Remember

• A class is a blueprint; an object made from it is an instance.
• constructor runs when you write new and sets the starting values.
• Methods inside a class have no function keyword and no commas between them.
• extends builds one class on another; super() calls the parent's constructor first.
• The class is the recipe, the object is the dish.

Example explained

• class Student { constructor(name, marks) { ... } } — the blueprint: every student has a name and marks.
• result() { return this.marks >= 33 ? "Pass" : "Fail"; } — a method every student object can use. The pass mark is 33.
• let priya = new Student("Priya", 92); — stamps out one student object from the blueprint.
• let rahul = new Student("Rahul", 28); — stamps out a second one. Same class, different values.
• document.getElementById("out").textContent = priya.name + ": " + priya.result() + " — " + rahul.name + ": " + rahul.result(); — shows both results on the page: Priya passes, Rahul fails.