Coding Schools

JavaScript - Basic Structure
Closures in JavaScript
Using CSS in Javascript
OOPS in Javascript
Popup Window in Javascript
Printout a page in Javascript
Variable declaration in JavaScript
Difference of let, var and const
JavaScript - JSON Parse & Stringify

OOPS in Javascript

Object-Oriented Programming (OOP) is a programming paradigm that uses objects to design and structure software. JavaScript supports OOP concepts, which include classes, objects, inheritance, encapsulation, and polymorphism. Let's dive into each of these concepts with examples.

Classes and Objects

Class Definition

A class in JavaScript is like a blueprint for creating objects. You define properties and methods within a class.

javascript

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

// Creating an object
const john = new Person('John', 30);
john.greet();  // Output: Hello, my name is John and I am 30 years old.

Inheritance

Inheritance allows one class to inherit properties and methods from another class. The extends keyword is used to create a subclass.

javascript

class Employee extends Person {
  constructor(name, age, jobTitle) {
    super(name, age);  // Call the parent class constructor
    this.jobTitle = jobTitle;
  }

  displayJob() {
    console.log(`I am a ${this.jobTitle}.`);
  }
}

const jane = new Employee('Jane', 25, 'Software Engineer');
jane.greet();  // Output: Hello, my name is Jane and I am 25 years old.
jane.displayJob();  // Output: I am a Software Engineer.

Encapsulation

Encapsulation is the concept of restricting access to certain properties or methods of an object. In JavaScript, this can be achieved using private fields (prefixed with #) or closures.

javascript

class BankAccount {
  #balance;  // Private field

  constructor(balance) {
    this.#balance = balance;
  }

  deposit(amount) {
    this.#balance += amount;
    console.log(`Deposited: ${amount}, New Balance: ${this.#balance}`);
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(1000);
account.deposit(500);  // Output: Deposited: 500, New Balance: 1500
console.log(account.getBalance());  // Output: 1500

Polymorphism

Polymorphism allows objects of different classes to be treated as objects of a common super class. In JavaScript, polymorphism can be achieved through method overriding.

javascript

class Animal {
  speak() {
    console.log('Animal makes a sound');
  }
}

class Dog extends Animal {
  speak() {
    console.log('Dog barks');
  }
}

class Cat extends Animal {
  speak() {
    console.log('Cat meows');
  }
}

const animals = [new Animal(), new Dog(), new Cat()];

animals.forEach(animal => animal.speak());
// Output:
// Animal makes a sound
// Dog barks
// Cat meows

These are the fundamental concepts of OOP in JavaScript. With these concepts, you can create more organized, modular, and maintainable code. Let me know if you'd like to explore any of these topics further