Object-Oriented Programming (OOP) in JavaScript
Tags: javascript, oops, programming, tutorial
Published: 2023-07-23 11:53:57

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:

```js
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');
  }
};
```

``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:

```js
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`);
  }
}
```

To create a new train, we can now use:

```js
let expressTrain = new Train('Express', 100, 500);
```
And just like a real train, our ``expressTrain`` can now start and stop:

```js
expressTrain.start();
expressTrain.stop();
```

**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:


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

  tilt() {
    console.log(`${this.name} is tilting`);
  }
}
```
Now, we can create a `BulletTrain` that can do everything a normal `Train` can do, and also tilt:

```js
let bulletTrain = new BulletTrain('Shinkansen', 200, 400);
bulletTrain.start();
bulletTrain.stop();
bulletTrain.tilt();
```

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/