Object-Oriented Programming in JavaScript- JavaScript Course

Object-Oriented Programming in JavaScript

Object Literals and Their Limitations

In JavaScript, you can quickly create objects using literal syntax:

const person = {
  name: "John",
  greet() {
    return `Hello, ${this.name}!`;
  }
};
console.log(person.greet()); // Hello, John!

Limitations: - You cannot easily create multiple instances - No inheritance between objects - Not scalable for large applications

Live Example: Object Literal

const person = {
  name: "John",
  greet() {
    return `Hello, ${this.name}!`;
  }
};

function greetLiteral() {
  document.getElementById("output1").textContent = person.greet();
}

Constructor Functions

A constructor function is a special function used to create multiple objects of the same type.

function Person(name) {
  this.name = name;
  this.greet = function () {
    return `Hello, ${this.name}!`;
  };
}
const John = new Person("John");
console.log(John.greet()); // Hello, John!

Live Example: Constructor Function

function Person(name) {
  this.name = name;
  this.greet = function () {
    return `Hello, ${this.name}!`;
  };
}

function createPerson() {
  const name = document.getElementById("nameInput").value;
  const p = new Person(name);
  document.getElementById("output2").textContent = p.greet();
}

Prototypes and Inheritance

JavaScript uses prototype-based inheritance. You can add methods to a constructor's prototype:

Person.prototype.sayGoodbye = function () {
  return `Goodbye, ${this.name}!`;
};
console.log(John.sayGoodbye()); // Goodbye, John!

Live Example: Prototype Method

Person.prototype.sayGoodbye = function () {
  return `Goodbye, ${this.name}!`;
};

const John = new Person("John");

function sayGoodbye() {
  document.getElementById("output3").textContent = John.sayGoodbye();
}

Object.create Method

Object.create() allows creating an object that inherits from another object.

const animal = {
  speak() {
    return "Generic sound";
  }
};
const dog = Object.create(animal);
dog.speak = function () {
  return "Woof woof!";
};
console.log(dog.speak()); // Woof woof!

Live Example: Object.create

const animal = {
  speak() {
    return "Generic sound";
  }
};

const dog = Object.create(animal);
dog.speak = function () {
  return "Woof woof!";
};

function speakDog() {
  document.getElementById("output4").textContent = dog.speak();
}

ES6 Classes

ES6 introduces the class syntax, making code clearer and more similar to other OOP languages.

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}!`;
  }
}
const John = new Person("John");
console.log(John.greet()); // Hello, John!

Live Example: ES6 Class

class PersonClass {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}!`;
  }
}

function greetClass() {
  const p = new PersonClass("John");
  document.getElementById("output5").textContent = p.greet();
}

Static Methods and Getters/Setters

Static methods belong to the class, not the instance. Getters and setters control access to properties.

class Calculator {
  static add(a, b) {
    return a + b;
  }
}
console.log(Calculator.add(2, 3)); // 5

class Account {
  constructor(balance) {
    this._balance = balance;
  }
  get balance() {
    return this._balance;
  }
  set balance(val) {
    if (val >= 0) this._balance = val;
  }
}
const account = new Account(100);
account.balance = 150;
console.log(account.balance); // 150

Live Example: Calculator and Account

Encapsulation and Private Fields

ES2022 introduces private fields using #, which are accessible only from inside the class.

class SecretAccount {
  #password = "1234";
  checkPassword(input) {
    return input === this.#password;
  }
}
const account = new SecretAccount();
console.log(account.checkPassword("1234")); // true
console.log(account.#password); // ❌ error: private property

Live Example: Password Verification

class SecretAccount {
  #password = "1234";
  checkPassword(input) {
    return input === this.#password;
  }
}

const secretAccount = new SecretAccount();

function verifyPassword() {
  const input = document.getElementById("passwordInput").value;
  const result = secretAccount.checkPassword(input);
  document.getElementById("output8").textContent = result ? "✅ Correct password" : "❌ Incorrect password";
}