OOP's in JavaScript

Object-Oriented Programming, or OOP for short, is a programming style that's based on the concept of "objects". An object is like a box filled with things, or "properties", and it knows how to use these things through "methods". In everyday life, an object could be a car, which has properties like color, brand, and speed, and methods, like start and stop.

Objects in JavaScript

In JavaScript, almost everything can be an object! Numbers, strings, arrays, dates, functions – you name it. But the most common type of object we create in JavaScript are simple user-defined objects.

A user-defined object might be something like a student object. This student object could have properties like name, age, and grade, and methods like study, getGrade, and celebrateBirthday.

Here's how you could create a student object in JavaScript:

let student = {
  name: 'John',
  age: 16,
  grade: '10th Grade',
  study: function() {
    console.log(this.name + ' is studying');
  },
  getGrade: function() {
    console.log(this.name + ' is in ' + this.grade);
  },
  celebrateBirthday: function() {
    this.age++;
    console.log(this.name + ' is now ' + this.age);
  }
};

Classes in JavaScript

Classes in JavaScript are a blueprint for creating objects. Think of it as a mold for making cookies. Once you have the mold (class), you can make as many cookies (objects) as you want!

Here's how you could create a Student class in JavaScript:

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

  study() {
    console.log(`${this.name} is studying`);
  }

  getGrade() {
    console.log(`${this.name} is in ${this.grade}`);
  }

  celebrateBirthday() {
    this.age++;
    console.log(`${this.name} is now ${this.age}`);
  }
}

Now you can create a new Student object like this:

let john = new Student('John', 16, '10th Grade');

And you can call the methods on this new object like this:

john.study();
john.getGrade();
john.celebrateBirthday();

Inheritance in JavaScript

Inheritance in JavaScript is like family in real life. Just like you may have inherited your mom's eyes or your dad's smile, objects can inherit properties and methods from other objects.

Let's say you want to create a HighSchoolStudent class that has all the properties and methods of the Student class, but with some added ones. You can do this with the extends keyword.

class HighSchoolStudent extends Student {
  constructor(name, age, grade, club) {
    super(name, age, grade);
    this.club = club;
  }

  joinClub() {
    console.log(`${this.name} is a member of the ${this.club} club`);
  }
}

Now you can create a HighSchoolStudent object that can do everything a Student object can do, plus more!

let jane = new HighSchoolStudent('Jane', 17, '11th Grade', 'Science');
jane.study();
jane.getGrade();
jane.celebrateBirthday();
jane.joinClub();

And that's a quick and easy introduction to Object-Oriented Programming in JavaScript. I hope it was helpful and fun to learn!

Thank you for reading, please follow me on Twitter, i regularly share content about Javascript, and React and contribute to Opensource Projects

Twitter-https://twitter.com/Diwakar_766

Github-https://github.com/DIWAKARKASHYAP