Object Oriented Programming

Object-oriented programming (OOP) is a programming

language model organized around objects rather than "actions"
and data rather than logic.
 Concepts of OOP
• Encapsulation
• Abstraction
• Inheritance
• Polymorphism
 Objects
An object is a collection of properties, and a property is an association
between a name (or key) and a value. A property's value can be a function, in
which case the property is known as a method. In addition to objects that are
predefined in the browser, you can define your own objects.
var fees ={
Rahul: 100,
Sumit: 200, Properties
Rohan: 300
total : function ( ) { return(100+200+300); } Methods
};
 Type of Objects
• User-defined Objects – These are custom objects created by the programmer to bring structure
and consistency to a particular programming task.

• Native Objects – These are provided by the JavaScript language itself like String, Number,
Boolean, Function, Date, Object, Array, Math, RegExp, Error as well as object that allow
creation of user-defined objects and composite types.

• Host Objects – These objects are not specified as part of the JavaScript language but that are
supported by most host environments, typically browsers like window, navigator.

• Document Objects – These are part of the Document Object Model (DOM), as defined by the
W3C. These objects presents present the programmer with a structured interface to HTML and
XML documents. Access to the document objects is provided by the browser via the document
property of the window object (window.document).
Declaration and initialization of Object
• Using Object Literal
Syntax: - var object_name = { };
Ex: -
var fees = {};
fees[‘Rahul’] = 100; fees.Rahul = 100;
fees[‘Sumit’] = 200; fees.Sumit = 200;
fees[‘Rohan’] = 300; fees.Rohan = 300;

fees[“Super Man”] = 400; fees.Super Man = 400;

Multiword key required quotation

Declaration and initialization of Object
• Using Object Literal function sum ( )
Syntax: - var object_name = { }; {
Ex: - return(100+200+300);
}
var fees = { };
fees[‘Rahul’] = 100; fees.Rahul = 100;
fees[‘Sumit’] = 200; fees.Sumit = 200;
fees[‘Rohan’] = 300; fees.Rohan = 300;
fees[‘total’] = function ( ) { return(100+200+300); };
fees[‘total’] = sum;
fees.total = function ( ) { return(100+200+300); };
fees.total = sum;
 Declaration and initialization of Object
• Using Object Literal
Syntax: - var object_name = {key1:value1, key2:value2, key_n:value_n};
Ex: - var fees ={Rahul: 100, Sumit: 200, Rohan: 300};
var fees ={ var fees ={
Rahul: 100, Rahul: 100,
Sumit: 200, Sumit: 200,
Rohan: 300 Rohan: 300
“Super Man”: 400
};
};

var fees ={Rahul: 100, Sumit: 200, Rohan:300, “Super Man”: 400};
 Declaration and initialization of Object
• Using Object Literal
Syntax: - var object_name = {key1:value1, key2:value2, key_n:value_n, key: function};
Ex: - var fees ={ Rahul: 100, Sumit: 200, Rohan: 300, total: function ( )
{ return(100+200+300); } };

var fees ={
Rahul: 100,
Sumit: 200,
Rohan: 300,
total : function ( ) { return(100+200+300); }
};
 Declaration and initialization of Object
• Using Object Constructor
Syntax: - var object_name = new Object( );
Ex: - var fees = new Object ( ); var fees = { };
fees[‘Rahul’] = 100; fees.Rahul = 100;
fees[‘Sumit’] = 200; fees.Sumit = 200;
fees[‘Rohan’] = 300; fees.Rohan = 300;
Declaration and initialization of Object
• Using Object Constructor function sum ( )
Syntax: - var object_name = new Object ( ); {
Ex: - return(100+200+300);
}
var fees = new Object ( );
fees[‘Rahul’] = 100; fees.Rahul = 100;
fees[‘Sumit’] = 200; fees.Sumit = 200;
fees[‘Rohan’] = 300; fees.Rohan = 300;
fees[‘total’] = function ( ) { return(100+200+300); };
fees[‘total’] = sum;
fees.total = function ( ) { return(100+200+300); };
fees.total = sum;
 Accessing Properties
A property of an object is some piece of named data it contains. These are accessed with dot
operator applied to an object alternative to the dot operator is the array [ ] operator.
Syntax: - object_name.property_name
Ex: -
var fees ={Rahul: 100, Sumit: 200, Rohan: 300};

var fees = { };

fees[‘Rahul’] = 100; or fees.Rahul = 100;

document.write(fees[‘Rahul’]);
document.write(fees[“Rahul”]);
document.write(fees.Rahul);
 Accessing Properties
var fees ={Rahul: 100, Sumit: 200, Rohan: 300, “Super Man”: 400};

var fees = { };

fees[‘Super Man’] = 100;

fees.Super Man = 100;

document.write(fees[‘Super Man’]);
document.write(fees[“Super Man”]);
document.write(fees.Super Man);
 Accessing Methods
Object members that are functions are called methods. These are accessed with dot operator applied
to an object alternative to the dot operator is the array [ ] operator.
Syntax: - object_name.Method_name( );
Ex: -
var fees ={Rahul: 100, Sumit: 200, Rohan: 300, total: function ( ) { return(100+200+300); } };

var fees = { };

fees[‘total’] = function ( ) { return(100+200+300); };

fees.total = function ( ) { return(100+200+300); };

document.write(fees.total( ));
document.write(fees.[“total”]( ));
 Adding Properties/Methods
Syntax:-
Object_name.Property_name = value;
Object_name[‘Property_name’] = value;
Ex: -
fees.Sonam = 600;
fees[‘Sonam’] = 600;
 Deleting Properties
Delete operator is used to delete instance properties.
Syntax:- delete object_name.property_name
Ex: - delete fees.Rahul;

After removal with delete operator, the property has the

undefined value.
 Factory Function
When a function returns an object, we call it a factory function. It can produce
object instance without new keyword or classes.
Ex:-
function mobile( ) {
return {
model: ‘Galaxy’,
price: function(){ return (“Price: Rs. 3000”);}
};
}
var samsung = mobile( );
document.write(samsung.model + “ ” + samsung.price( ));
 Factory Function with Parameter
function mobile(model_no) {
return {
model: model_no,
price: function(){
return ("Price is Rs. 3000");
}
};
}
var samsung = mobile('galaxy');
var nokia = mobile('3310');
document.write(samsung.model + “ ” + samsung.price( ));
document.write(nokia.model + “ ” + nokia.price( ));
 Constructor
Object instance are created with constructor, which are basically special
function that prepare new instance of an object for use.
function Mobile(){
this.model = '3310';
this.price = function(){
document.write(this.model + " Price Rs. 3000");
}
}
var samsung = new Mobile();
samsung.price();
 Constructor with Parameter
function Mobile(model_no){
this.model = model_no;
this.price = function(){
document.write(this.model + " Price Rs.3000 <br>");
}
}
var samsung = new Mobile('Galaxy');
var nokia = new Mobile('3310');
samsung.price();
nokia.price();
 Check Properties exist
• Typeof operator
Syntax:- if (typeof object_name.key !== ‘undefined’)

Ex:- if(typeof nokia.memory !== ‘undefined’) {

document.write(“Available”);
} else {
document.write(“Doesn’t exist”);
}
 Check Properties exist
• in operator
Syntax: - if (‘key’ in object_name)

Ex:- if(‘memory’ in nokia) {

document.write(“Available”);
} else {
document.write(“Doesn’t exist”);
}
 Check Properties exist
• hasOwnProperty ()
Syntax: - if (object_name.hasOwnProperty(“key”))

Ex:- if(nokia.hasOwnProperty(‘color’)) {
document.write(“Available”);
} else {
document.write(“Doesn’t exist”);
}
 For in loop
The for...in loop is used to loop through an object's properties.
Syntax: -
for (var variable_name in object_name){
block of statement
}
Ex: -
for (var specs in samsung) {
document.write(specs);
}
 Class
A specific category can be defined as class.
Example:-
Class
Mobile
Person

Samsung LG Nokia
Objects Rahul Sonam Sujit

Model Name
Ram Address
Color
Properties/Methods Mobile
Price Email
Calling( ) Eating ( )
 Defining a Class
We define class in JavaScripts using custom constructor.
var Mobile = function(model_no, sprice) {
this.model = model_no;
this.color = ‘white’;
this.price = 3000;
this.sp = sprice;
this.sellingprice = function() {
return (this.price + this.sp);
};
};
var samsung = new Mobile(‘Galaxy’, 2000);
var nokia = new Mobile(‘3310’, 1000);
 Private Properties and Methods
Using var or let or const you can create private
properties and methods.
Ex: -
this.price
var price
let price