13_User_Defined_Objects.pptx objects in javascript

USER DEFINED
OBJECTS IN JAVASCRIPT

Objects In JavaScript
Before learning about objects , we must first understand a very
important statement which is very commonly used for
JavaScript
Javascript is not a class based language but a prototype based language.

What Is Class Based Language?
A class-based language is based on two fundamental entities:
“classes” and “instances”.
Class:
• A class is a user-defined data type.
• It describes a family of objects that have the same set of methods and
properties.
• For example, the Employee class could represent the set of all employees.
• Languages like Java, C++,Python etc are all class based languages

What Is Class Based Language?
Instance:
• An instance, is the instantiation of a class.
• For example, Sachin could be an instance of the Employee class, representing
a particular individual as an employee
• An instance has exactly the same properties as its class (no more, no less).

What Is Prototype Based
Language?
• A prototype-based language, such as JavaScript, does not make this
distinction: it simply has objects.
• In simple words we can say that creating a class is not required in
prototype based languages before creating an object.
• A prototype-based language has the notion of a prototypical object

What Is Prototype Based
Language?
• A prototypical object is used as a template from which we get the
initial properties for a new object.
• And in JavaScript this prototypical object is called Object which
provides all the basic properties and methods like toString() , valueOf()
to new objects
• Then these new objects can further specify their own properties, either
when we create them or at run time.

Objects In JavaScript
In JavaScript an object is a non-primitive data type.
It is like any other variable, the only difference is that an object
holds data in terms of properties and actions in terms of
methods.

An Important Point !
In other programming languages like Java or C#, we need a class
to create an object of it.
In JavaScript, an object is a standalone entity because designing
class is not compulsory to create objects in JavaScript.
However from ES6 onwards we can create a class if we want that.

Creating Objects
In JavaScript, an object can be created in two ways:
Using Object
Literal
Using Object
Constructor

Object Constructor
The first way to create an object is with Object Constructor using
the new keyword.
Syntax:
let <obj_name>=new Object();
Example:
let myCar=new Object();

Adding Properties
Properties are data members of an object used to hold values .
We can attach properties to an object in 2 ways:
1. Using the dot notation.
2. Using [ ] brackets and specifying property name as string.

Adding Properties Using Dot Operator
1. Using the dot notation.
Syntax:
<obj_name>.<property_name>=value;
Example:
myCar.name=“Baleno”;
myCar.year=2018;

Adding Properties Using [ ] Operator
2. Using the [ ] operator.
Syntax:
<obj_name>[“<property_name>”]=value;
Example:
myCar[“name”]=“Baleno”;
myCar[“year”]=2018;

Which To Prefer When ?
As a beginner we might get confused between when to use dot
notation and when to use [ ].
The answer is very simple :
Always use dot notation as its is the best and recommended way
But there are 2 cases when we will have to use [ ] and they are:
1. When property name contains spaces.
2. When property name is stored in a variable.

Special Point !
When a property name contains spaces, we need to create it
using [ ]
and to access it also we have to use [ ] .
For example:
myCar[“reg no”]=“MP04CB2314”;
console.log(myCar[“reg no”]);
If we use dot operator it will be an error

Special Point !
When a property name is stored in a variable, we need to create as
well
as access it we need use [ ]
For example:
var str=“company”;
console.log(myCar[str]); // will show Maruti
console.log(myCar.str); // will show
undefined

Special Point !
Reading from a property that does not exist will result in
an undefined.
For example:
console.log(myCar.price); // undefined

Changing Property Value
To change the value of a property, we simply use the
assignment
operator
Example:
myCar[“name”]=“Ciaz”;
console.log(myCar.name);// Ciaz
console.log(myCar.year);// 2018

Deleting A Property
To delete a property from an object, we use the delete operator:
Example:
delete myCar.year;
console.log(myCar.name);// Baleno
console.log(myCar.year);// undefined

Checking Whether A Property Exists Or Not
To check if a property does exists in an object, we use a special
operator called the in operator:
Example:
delete myCar.year;
console.log(‘name’ in myCar);// true
console.log(‘year’ in myCar);// false

Iterating Over Properties
To iterate over all properties of an object without knowing
property
names, we use the for...in loop:
Syntax:
for (key in object) {
// executes the body for each key among object properties
}
Example:
for (let key in myCar)

Adding Methods
Methods can also be added to the object
A method is nothing but a function that will access/manipulate
object’s properties.
Methods can be part of object during creation or can be added
later
like properties

Adding Methods
Syntax:
<obj_name>[“<func_name>”]=function(){
// body
};
Example:
myCar[“start”]=function(){
console.log(“starting the car”);
};
myCar.start(); // starting the car

Adding Methods
Syntax:
<obj_name>.func_name>=function(){
// body
};
Example:
myCar.start=function(){
};
myCar.start(); // starting the car

Nested Objects
We can assign another object as a property of an object.
Syntax:
<obj_name>.<obj_name>=new Object();
<obj_name>.<obj_name>.<property_name>=<value>;
Example:
myCar.stereo=new Object();
myCar.stereo.name=“Sony";

PROGRAM
Write a JavaScript code to access all the properties of
myCar objects and it’s nested object using for in loop

Creating Object Using Object Literal
The object literal is a simple way of creating an object and it is
done using { } brackets.
We can include key-value pair in { }, where key would be property
or method name and value will be value of property or definition
of the method.
We use comma (,) to separate multiple key-value pairs.

Creating Object Using Object Literal
Syntax:
let <obj_name>={
<prop_name>:<value>,
<prop_name>:<value>
};
Example:
let myCar={
company:”Maruti”,
year:2014

Adding Method Using Object Literal
Syntax:
let <obj_name>={ <func_name>:function(){
// body
}
};
Example:
let myCar={start:function(){
}
};

PROGRAM
Given the following object , write a for in loop to
calculate and print total marks
let student = { name: "Sumit“,age: 15, phy: 45,chem: 5
0,
maths: 65
};

13_User_Defined_Objects.pptx objects in javascript

Recommended

More Related Content

Similar to 13_User_Defined_Objects.pptx objects in javascript (20)

Recently uploaded (20)

13_User_Defined_Objects.pptx objects in javascript