Chapter-1 OOP Concepts

OOP concepts

Introduction

JavaScript is an Object Oriented Programming (OOP) language. It is widely used in Web

Development. There are certain features or mechanisms which makes a Language Object
Oriented like:
 Class
 Object
 Constructor
 Message Passing
 Inheritance
 Polymorphism

 Classes

In JavaScript, classes are the special type of functions. We can define the class just like
function declarations and function expressions.

The JavaScript class contains various class members within a body including methods or
constructor. The class is executed in strict mode. So, the code containing the silent error
or mistake throws an error.

The class syntax contains two components:

a) Class declarations
b) Class expressions

a) Class Declarations:

A class can be defined by using a class declaration. A class keyword is used to declare a
class with any particular name. According to JavaScript naming conventions, the name
of the class always starts with an uppercase letter.

Example:
<script>
//Declaring class
class Employee
{
//Initializing an object
constructor(id,name)
{
this.id=id;
this.name=name;
}
//Declaring method
detail()
{
document.writeln(this.id+" "+this.name+"<br>")

UVPCE CE-IT Page 1

Chapter-1 OOP Concepts

}
}
//passing object to a variable
var e1=new Employee(101,"Martin Roy");
var e2=new Employee(102,"Duke William");
e1.detail(); //calling method
e2.detail();
</script>

Output:

Class Declarations Example: Hoisting

Unlike function declaration, the class declaration is not a part of JavaScript hoisting. So,
it is required to declare the class before invoking it.

<script>
//Here, we are invoking the class before declaring it.
var e1=new Employee(101,"Martin Roy");
var e2=new Employee(102,"Duke William");
e1.detail( ); //calling method
e2.detail( );

//Declaring class
class Employee
{
//Initializing an object
constructor(id, name)
{
this.id=id;
this.name=name;
}
detail( )
{ document.writeln(this.id+" "+this.name+"<br>") }
}
</script>

Output:

UVPCE CE-IT Page 2

Chapter-1 OOP Concepts

 JavaScript Objects

A JavaScript object is an entity having state and behaviour (properties and method). For
example: car, pen, bike, chair, glass, keyboard, monitor etc.

JavaScript is an object-based language. Everything is an object in JavaScript. JavaScript

is template based not class based. Here, we don't create class to get the object. But, we
direct create objects.

Creating Objects in JavaScript

There are 3 ways to create objects.

1. By object literal
2. By creating instance of Object directly (using new keyword)
3. By using an object constructor (using new keyword)

1) JavaScript Object by object literal

Syntax:
object={property1:value1,property2:value2.....propertyN:valueN}

As you can see, property and value is separated by: (colon)

Example of creating object in JavaScript:

<script>
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>

Output:

2) By creating instance of Object

Syntax:
var objectname=new Object();

Here, new keyword is used to create object.

Example:
<script>
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;

UVPCE CE-IT Page 3

Chapter-1 OOP Concepts

document.write(emp.id+" "+emp.name+" "+emp.salary);

</script>

Output:

3) By using an Object constructor

Here, you need to create function with arguments. Each argument value can be assigned
in the current object by using this keyword.
The this keyword refers to the current object.
The example of creating object by object constructor is given below:
<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);

document.write (e.id+" "+e.name+" "+e.salary);

</script>

Output:

Defining method in JavaScript Object

We can define method in JavaScript object. But before defining method, we need to add
property in the function with the same name as method.

The example of defining method in object is given below:

<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;

this.changeSalary=changeSalary;
function changeSalary(otherSalary){
this.salary=otherSalary;
}
}
e=new emp(103,"Sonoo Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
e.changeSalary(45000);

UVPCE CE-IT Page 4

Chapter-1 OOP Concepts

document.write("<br>"+e.id+" "+e.name+" "+e.salary);

</script>

 Constructor
A JavaScript constructor method is a special type of method which is used to initialize
and create an object. It is called when memory is allocated for an object.
Points to remember:
 The constructor keyword is used to declare a constructor method.
 The class can contain one constructor method only.
 JavaScript allows us to use parent class constructor through super keyword.

Constructor Method Example

<script>
class Employee {
constructor() {
this.id=101;
this.name = "Martin Roy"; } }
var emp = new Employee();
document.writeln(emp.id+" "+emp.name);
</script>

Output:

Constructor Method Example: super keyword

The super keyword is used to call the parent class constructor.
Example:

<script>
class CompanyName
{
constructor()
{
this.company="Javatpoint";
}
}
class Employee extends CompanyName {
constructor(id,name) {
super();
this.id=id;
this.name=name;
}
}

UVPCE CE-IT Page 5

Chapter-1 OOP Concepts

var emp = new Employee(1,"John");

document.writeln(emp.id+" "+emp.name+" "+emp.company);
</script>

Output:

 Message Passing

Message passing is a form of communication between objects, processes or other

resources used in object-oriented programming, inter-process communication and
parallel computing.
Message passing can be synchronous or asynchronous. Synchronous message passing
systems require the sender and receiver to wait for each other while transferring the
message. In asynchronous communication the sender and receiver do not wait for each
other and can carry on their own computations while transfer of messages is being done.
The concept of message passing makes it easier to build systems that model or simulate
real-world problems.

 Inheritance

The JavaScript inheritance is a mechanism that allows us to create new classes on the
basis of already existing classes. It provides flexibility to the child class to reuse the
methods and variables of a parent class.
The JavaScript extends keyword is used to create a child class on the basis of a parent
class. It facilitates child class to acquire all the properties and behaviour of its parent
class.
Points to remember

 It maintains an IS-A relationship.

 The extends keyword is used in class expressions or class declarations.
 Using extends keyword; we can acquire all the properties and behaviour of the inbuilt
object as well as custom classes.
 We can also use a prototype-based approach to achieve inheritance.

JavaScript extends Example: inbuilt object

In this example, we extends Date object to display today's date.
<script>
class Moment extends Date {
constructor() {
super();
}}
var m=new Moment();

UVPCE CE-IT Page 6

Chapter-1 OOP Concepts

document.writeln("Current date:")
document.writeln(m.getDate()+"-"+(m.getMonth()+1)+"-"+m.getFullYear());
</script>

Output:

JavaScript extends Example: Custom class

In this example, we declare sub-class that extends the properties of its parent class.
<script>
class Bike
{
constructor()
{
this.company="Honda";
}
}
class Vehicle extends Bike {
constructor(name,price) {
super();
this.name=name;
this.price=price;
}
}
var v = new Vehicle("Shine","70000");
document.writeln(v.company+" "+v.name+" "+v.price);
</script>

Output:

 Polymorphism

The polymorphism is a core concept of an object-oriented paradigm that provides a way

to perform a single action in different forms. It provides an ability to call the same
method on different JavaScript objects. As JavaScript is not a type-safe language, we can
pass any type of data members with the methods.

UVPCE CE-IT Page 7

Chapter-1 OOP Concepts

JavaScript Polymorphism Example 1

Let's see an example where a child class object invokes the parent class method.
<script>
class A
{
display()
{
document.writeln("A is invoked");
}
}
class B extends A
{
}
var b=new B();
b.display();
</script>

Example-2
<script>
class Shape
{
area()
{
return 0;
}
}
class Circle extends Shape
{
constructor(r){
super();
this.radius = r;
}
area(){
document.write("Area of circle is:"+3.14*this.radius**2);
}
}
class Square extends Shape

UVPCE CE-IT Page 8

Chapter-1 OOP Concepts

{
constructor(w,h)
{
super();
this.width=w;
this.height=h;
}
area()
{
document.write("<br> area of square is::"+this.width * this.height);
}
}
var c=new Circle(2);
var s=new Square(2,4);
c.area();
s.area();
</script>

UVPCE CE-IT Page 9