ADVANCED JAVASCRIPT CONCEPTS

Class and objects

JavaScript, like many other languages, is an Object Oriented Programming (OOP) language. An object oriented
programming uses objects, which are specific instances of a class, to structure and code the program. To
comprehend the concepts of classes and objects, let's envisage a real-world scenario. Consider an automobile
manufacturing company that produces motorbikes

It produces different types of motorbikes, where each type of motorbike is recognized by attributes such as
model, color, price, and some other functionalities. Let's consider the motorbike as a class, since it represents
the blueprint for creating different motorbikes and has the information of the attributes such as model, color,
price, and functionalities. Each instance of this class, known as an object, is a motorbike with different
specifications. The images below depict different objects, that is, motorbikes with different specifications and
functionalities, from the class motorbikes.

The model, color, and price are the attributes of the motorbikes that are defined as variables when you create a
class. A motorbike has many different functionalities. For example, it accelerates, thereby increasing its speed,
or reduces its speed when brakes are applied. Such functionalities or behaviors are defined as methods when
you create a class. In other words, methods are the functions that can be applied to the objects created from the
class.

Class

In JavaScript, a class is a template that defines the properties and behaviors of objects. The objects are specific
instances of the class. Based on the class, you can create any number of objects. To create various objects for a
class, a special function, called a constructor, is used. So, in summary, a variable or list of variables, a
constructor, and a method or list of methods are included while creating a class.

Page 1 of 6
Creating classes

Let's dive deeper to understand the concept of creating a class by defining a Motorbikes class and creating
objects from it. In JavaScript, a class can be declared using the class keyword, followed by the name of the class
and a pair of curly braces {}. The body of the class is enclosed in these braces.

Syntax:

The constructor is a special method used to create and initialize an object created with a class. It is automatically
called when a new object of the class is created. Constructors set the values passed in the objects to the class
variables. Use the this keyword to initialize the variables inside the constructor.

Let's start with the Motorbike class. The properties of a motorbike, like model, color, and price, can be considered
as the variables. Motorbikes have functionalities like acceleration and brake, which can be considered as
methods.

Page 2 of 6
Here, model, color, price, and speed are variables, and accelerate() and brake() are methods. Initially, the speed
is 0 for any motorbike object, hence its value is initialized.

Creating objects

Once you have the Motorbike class, you can create different motorbike objects. You need to pass different
parameter values in the constructor while creating the object to create different motorbikes.

Page 3 of 6
Syntax:

Let's create three Motorbike objects. Use the constructor defined in the class Motorbike that has three
parameters, modelParam, colorParam, priceParam. Use the keyword new before the className, followed by
parameters defined in the constructor.

Here, motorbike1, motorbike2, and motorbike3 are objects of the Motorbike class. They are instances of the
Motorbike class, each with its own set of properties. In the same way, you can create any number of objects.

Applying methods on objects

To apply methods defined in the class Motorbike on these objects, use the dot notation. When you intend to apply
a method on an object, write the object name followed by a period (.), and then the period (.) followed by the
method name.

For example, to apply the method accelerate() and brake() on the motorbike1 object, use the following code. Apply
the brake() method twice and check the output.

Output:

Object initializers

You can also create an object directly without using classes. The object initializer or object literals are used to
create an object with multiple values in the form of property: value pairs. They let you declare an object and its
properties in one statement.

Page 4 of 6
Arrays

Consider a scenario where you want to store five color names. For example,

When the requirement arises to store twenty different color names, defining each as a separate variable becomes
cumbersome. This is where arrays come in handy, allowing for the storage of multiple color names within a single
variable structure.

JavaScript's array data structure is a highly efficient solution to store a collection of data. Instead of declaring
multiple variables for individual data, you can store them all in a single array.

Page 5 of 6
Page 6 of 6