JavaScript

JavaScript is a high-level, interpreted programming language that is widely used for web development. Initially designed as a client-side scripting language, it runs directly in web browsers, enabling dynamic and interactive user experiences. JavaScript can now be used for server-side development as well.

JavaScript Classes

14 April 2025 | Category:

JavaScript classes are a way to create objects and deal with inheritance in a cleaner, more structured way. They were introduced in ES6 (ECMAScript 2015) as a syntactic sugar over JavaScript’s existing prototype-based inheritance.


📦 What is a Class?

A class is a blueprint for creating objects with pre-defined properties and methods.

🔧 Basic Syntax

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

  greet() {
    console.log(`Hi, I’m ${this.name} and I'm ${this.age} years old.`);
  }
}

const john = new Person("John", 25);
john.greet(); // Hi, I’m John and I'm 25 years old.

📚 Key Concepts in JavaScript Classes

1. 🔨 Constructor Method

The constructor() is a special method automatically called when a new object is created from the class.

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

2. 🧱 Methods in Classes

Methods defined inside a class are placed on the prototype of the created object, making them memory-efficient.

sayHello() {
  console.log("Hello!");
}

3. 🧬 Inheritance (Extending Classes)

Use extends to create a subclass that inherits from another class.

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

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

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks`);
  }
}

const dog = new Dog("Bruno");
dog.speak(); // Bruno barks

4. 🧩 super() Keyword

The super() method is used to call the parent class’s constructor or methods.

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // calls Animal's constructor
    this.breed = breed;
  }
}

5. 🔐 Getters and Setters

You can define custom logic for getting or setting properties.

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

  get name() {
    return this._name.toUpperCase();
  }

  set name(newName) {
    this._name = newName;
  }
}

const u = new User("john");
console.log(u.name); // JOHN
u.name = "doe";
console.log(u.name); // DOE

6. 🚫 Static Methods

Static methods belong to the class itself, not the instance.

class MathUtils {
  static add(x, y) {
    return x + y;
  }
}

console.log(MathUtils.add(2, 3)); // 5

🧠 Behind the Scenes

JavaScript classes use prototypal inheritance under the hood. So while the class keyword makes it look more like other OOP languages (like Java, C++), it’s still prototype-based.


🧪 Real World Use Cases

  • Defining models (e.g., in MVC pattern)
  • Reusable components in front-end frameworks (like React class components)
  • Structuring large apps in object-oriented style

📌 Summary Table

FeatureDescription
constructor()Initializes the object
extendsSets up inheritance from another class
super()Calls constructor or method of parent
Instance methodsDefined within class, available to objects
static methodsCalled on class, not object instances
get/setDefine custom property behavior

✅ Advantages of Using Classes

  • Cleaner and readable OOP syntax
  • Easier inheritance and method organization
  • Encapsulation of logic within objects
  • IDEs and code editors provide better autocompletion

🚫 Limitations

  • Still prototype-based under the hood
  • Private fields (with #) are not supported in older environments
  • More overhead than simple object literals in small apps

🔚 Conclusion

JavaScript classes provide a modern, elegant way to build objects and handle inheritance. They’re great for organizing your code, especially in large applications.