Introduction to Classes and Objects in JavaScript

Now we will study OOP in JavaScript. Let's look at a real-life example and then transfer it to JavaScript.

Let's take a car as an example. It has wheels, color, body type, engine capacity, and so on. In addition, the driver can give it commands: go, stop, turn right, left, etc.

We can say that there is some class of cars that have common properties (they all have wheels and all of them can be given commands).

A particular car parked on the street is a representative of this class, or, in other words, object of this class. All objects of this class have properties: number of wheels, color, body type and methods: go, stop, turn right, turn left.

In other words, the class itself is a blueprint, according to which cars are made at the factory. The object is the car itself, made according to these blueprints.

In JavaScript, a class is created using the keyword class followed by the name of the class. Let's make a class Car:

class Car {
	// here is the code, that is, the JavaScript drawing of the car
}

Let us now indicate in our drawing that any car created according to this drawing will have a property for color and a property for the amount of fuel.

To do this, inside the class we write the property color and the property fuel:

class Car {
	color; // car color fuel;  // amount of fuel
}

Now let's make methods for our class. In JavaScript, methods are like regular functions, but they are declared without the function keyword.

As mentioned above, our car can move, it can turn, it can stop. Let's make the corresponding methods in our class:

class Car {
	color; // car color fuel;  // amount of fuel
	
	// Command to go: go() {
		// some JavaScript code
	}
	
	// Rotate command: turn() {
		// some JavaScript code
	}
	
	// Stop command: stop() {
		// some JavaScript code
	}
}

We have made a drawing of our car. Now we need to go to the factory and make an object of this class (that is, a specific car).

In JavaScript, this is done using the new keyword, followed by the class name:

new Car; // we command the plant to make a car

However, simply creating an object of the class will not lead to anything (it is the same as, for example, declaring an array and not writing it anywhere). We need a variable to store this object.

Let this variable be called myCar - we will write the object we created into it:

let myCar = new Car;

Once the car is created, you can access its properties. They are accessed using a dot. Let's set the properties of our object:

let myCar = new Car; // we command the plant to make a car myCar.color = 'red'; // paint red myCar.fuel = 50;     // fill up with fuel

That's it, our car is created, painted and fueled. Now we can give it commands through the methods of this car.

Methods are also accessed using a dot, but unlike a property, the method name should be followed by parentheses. Let's command our object:

myCar.go();
myCar.turn();
myCar.stop();