DEV Community

DIWAKARKASHYAP
DIWAKARKASHYAP

Posted on • Updated on

Object-Oriented Programming (OOP) in JavaScript

Let's start a journey into the world of programming with a fun analogy. Imagine you're at a bustling train station. There are different types of trains, each with its unique features and functions. This is quite similar to how OOP in JavaScript works.

What's OOP?

Object-Oriented Programming (OOP) is like a train system. Just like a train is made up of different coaches, an application in OOP is composed of different objects. These objects are instances of classes, which can be considered as the blueprint for creating objects.

Objects and Their Special Features

In JavaScript, objects are like special trains. They carry values in properties and can perform tasks with methods.

For example, let's take a train object:

let train = {
  name: 'Express',
  speed: 100,
  capacity: 500,
  start: function() {
    console.log(this.name + ' has started moving');
  },
  stop: function() {
    console.log(this.name + ' has stopped');
  }
};
Enter fullscreen mode Exit fullscreen mode

Here, name, speed, and capacity are properties of the train, and start() and stop() are the methods.

The Blueprint: Classes

Classes are like blueprints used to create trains. Just like each train follows a blueprint to have an engine, bogies, and certain speed, each object in JavaScript follows a class.

Here's an example of a Train class in JavaScript:

class Train {
  constructor(name, speed, capacity) {
    this.name = name;
    this.speed = speed;
    this.capacity = capacity;
  }

  start() {
    console.log(`${this.name} has started moving`);
  }

  stop() {
    console.log(`${this.name} has stopped`);
  }
}
Enter fullscreen mode Exit fullscreen mode

To create a new train, we can now use:

let expressTrain = new Train('Express', 100, 500);
Enter fullscreen mode Exit fullscreen mode

And just like a real train, our expressTrain can now start and stop:

expressTrain.start();
expressTrain.stop();
Enter fullscreen mode Exit fullscreen mode

The Special Trains: Inheritance

Let's say we now want to add a special type of train, a "Bullet Train", which has all the properties of a train, but can also tilt. We can achieve this through inheritance.

In JavaScript, we use the keyword extends to inherit from another class. Here's how we can create a BulletTrain class that extends the Train class:

class BulletTrain extends Train {
  constructor(name, speed, capacity) {
    super(name, speed, capacity);
  }

  tilt() {
    console.log(`${this.name} is tilting`);
  }
}
Enter fullscreen mode Exit fullscreen mode

Now, we can create a BulletTrain that can do everything a normal Train can do, and also tilt:

let bulletTrain = new BulletTrain('Shinkansen', 200, 400);
bulletTrain.start();
bulletTrain.stop();
bulletTrain.tilt();
Enter fullscreen mode Exit fullscreen mode

And there you go! That's a simple and friendly introduction to Object-Oriented Programming in JavaScript, seen through the lens of a bustling train station. Just remember, objects are the special trains, classes are the blueprints for these trains, and inheritance lets us create new types of special trains. Choo Choo! Happy coding!

Thank you for reading. I encourage you to follow me on Twitter where I regularly share content about JavaScript and React, as well as contribute to open-source projects. I am currently seeking a remote job or internship.

Twitter: https://twitter.com/Diwakar_766

GitHub: https://github.com/DIWAKARKASHYAP

Portfolio: https://diwakar-portfolio.vercel.app/

Top comments (1)

Collapse
 
diwakarkashyap profile image
DIWAKARKASHYAP

if you have any doubt then please comment