❮ Previous Next ❯

Modern JS OOP

  • Advanced OOP features introduced in ES6 and later versions.

  • Introduction to Modern JavaScript OOP

    Before ES6, JavaScript did not have a class keyword.
    Object-Oriented Programming was implemented using constructor functions and prototypes.

    With ES6 (2015), JavaScript introduced ES6 Classes, which provide a cleaner and more readable syntax for OOP while still working on the same prototype-based system internally.

    In this lesson, we will cover:

    1. ES6 Classes

    2. Constructor Functions

    3. Comparison between both approaches

    ES6 Classes

    What Are ES6 Classes ?

    ES6 Classes are a modern and cleaner syntax to create objects and implement OOP in JavaScript.

    Important point:

    ES6 classes are syntactic sugar over JavaScript’s existing prototype-based inheritance.

    This means:

    • They look like traditional OOP classes

    • Internally, JavaScript still uses prototypes

    Why ES6 Classes Were Introduced

    Before ES6:

    • Code was difficult to read

    • Constructor functions looked confusing

    • Prototype logic was hard for beginners

    ES6 classes:

    • Improve readability

    • Look familiar to Java, C++, Python developers

    • Make OOP easier to learn and maintain

    Syntax of ES6 Class

    class ClassName {

      constructor(parameters) {

        // initialize properties

      }

      methodName() {

        // class method

      }

    }

ES6 Class Example

Uses ES6 class syntax to define properties and a method. 

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

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

Object Creation from Class

Creates multiple objects from a class and calls their methods. 

let p1 = new Person("Amit", 25);
let p2 = new Person("Neha", 22);

p1.greet();
p2.greet();

  • Key Points About ES6 Classes

    • class keyword defines a class

    • constructor() is a special method

    • Methods are automatically added to prototype

    • new keyword is mandatory

    • Classes are not hoisted

Class Without Constructor Example

Defines a class without a constructor and calls its method. 

class Demo {
  sayHi() {
    console.log("Hi from Demo class");
  }
}

let obj = new Demo();
obj.sayHi();

  • Behind the Scenes (Important Concept)

    Even though we use class, JavaScript internally converts it to:

    • Constructor function

    • Prototype methods

    So:

    typeof Person;

    Constructor Functions

    What Is a Constructor Function ?

    A constructor function is a normal JavaScript function used to create objects before ES6.

    Rules:

    • Function name starts with a capital letter

    • Used with the new keyword

    • Properties assigned using this

    Syntax of Constructor Function

    function FunctionName(parameters) {

      this.property = value;

      this.method = function () {

        // code

      };

    }

Constructor Function Example

Uses a function to create objects with properties and a method. 

function Person(name, age) {
  this.name = name;
  this.age = age;

  this.greet = function () {
    console.log("Hello, my name is " + this.name);
  };
}

Creation Using Constructor

Creates multiple objects using a constructor function and calls their methods. 

let p1 = new Person("Ravi", 30);
let p2 = new Person("Sita", 28);

p1.greet();
p2.greet();

  • Problem with Constructor Functions

    Each object gets its own copy of methods, which wastes memory.

    Example:

    p1.greet === p2.greet; // false

Prototype Optimization Example

Uses prototype to share one method across all objects, saving memory. 

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

Person.prototype.greet = function () {
  console.log("Hello, my name is " + this.name);
};
Now:
p1.greet === p2.greet; // true

  • Why Prototype Is Important

    • Saves memory

    • Improves performance

    • Shares methods across objects

    ES6 Classes vs Constructor Functions

    Feature

    ES6 Classes

    Constructor Functions

    Syntax

    Clean and modern

    Old and verbose

    Readability

    High

    Medium

    Prototype handling

    Automatic

    Manual

    Hoisting

    Not hoisted

    Hoisted

    Best for

    Modern apps

    Legacy code

    When to Use ES6 Classes

    • Modern JavaScript development

    • Large applications

    • Clean architecture

    • Team-based projects

    When You’ll See Constructor Functions

    • Old projects

    • Legacy codebases

    • Understanding JavaScript internals

    • Interviews (conceptual questions)

    Common Beginner Mistakes

    • Forgetting new keyword

    • Using arrow functions as constructors

    • Confusing class with object

    • Defining methods inside constructor unnecessarily

    • Expecting classes to work like Java or C++

    Best Practices for Modern JS OOP

    • Prefer ES6 classes

    • Use PascalCase for class names

    • Keep constructor minimal

    • Define methods outside constructor

    • Understand prototypes conceptually

    Real-World Use Cases

    • User systems

    • Product management

    • Banking applications

    • Game characters

    • UI components

❮ Previous Next ❯