Javascript-Object
What is Js Object?
▪ Objects are variables too. But objects can contain many values.
2
Js Object
In JavaScript, almost "everything" is an object.
• Booleans can be objects (if defined with the new keyword)
• Numbers can be objects (if defined with the new keyword)
• Strings can be objects (if defined with the new keyword)
• Dates are always objects
• Maths are always objects
• Regular expressions are always objects
• Arrays are always objects
• Functions are always objects
• Objects are always objects
All JavaScript values, except primitives, are objects. 3
Js Object
▪ This code assigns many values (John, Doe, age, eyeColor) to a variable named
person:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
▪ The values are written as name:value pairs (name and value separated by a
colon).
4
Creating a JavaScript Object Using an Object Literal
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Creating a JavaScript Object Using the Keyword new
const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
5
Object Properties
▪ Properties are the values associated with a JavaScript object.
▪ A JavaScript object is a collection of unordered properties.
▪ Properties can usually be changed, added, and deleted, but
some are read only.
6
Accessing Object Properties
• You can access object properties in two ways:
• person.lastName;
• person["lastName"];
7
Adding and Deleting New Properties
• const person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
• person.nationality = "English";
• delete person.age;
8
Object Method
▪ Methods are actions that can be performed on objects.
▪ Object properties can be both primitive values, other objects, and
functions.
▪ An object method is an object property containing a function
definition.
▪ In JavaScript, the this keyword refers to an object.
9
Adding a Method to an Object
• Adding a new method to an object is easy:
10
Using Built-In Methods
11
JavaScript Accessors (Getters and Setters)
▪ Getters and setters allow you to define Object Accessors (Computed
Properties).
JavaScript Getter (The get Keyword)
▪ This example use a lang property to get the value of the language
property.
12
JavaScript Setter (The set Keyword)
▪ This example use a lang property to set the value of the language
property.
13
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.
14
Object Types (Blueprints) (Classes)
▪ Sometimes we need a "blueprint" for creating many objects of the same "type".
▪ The way to create an "object type", is to use an object constructor function.
▪ Objects of the same type are created by calling the constructor function with the
new keyword:
15
Adding a Method to an Object
16
JavaScript Object Prototypes
▪ All JavaScript objects inherit properties and methods from a
prototype.
Prototype Inheritance
▪ All JavaScript objects inherit properties and methods from a
prototype:
17
Using the prototype Property
▪ The JavaScript prototype property allows you to add new properties to
object constructors:
18
Using the prototype Property
▪ The JavaScript prototype property allows you to add new methods to
objects constructors:
19
Enjoy Javascript Object
20
