JavaScript
1 Objects
2 Real Life Objects, Properties, and Methods
In real life, a car is an object.
A car has properties like weight and color, and methods like start and stop:
All cars have the same properties, but the property values differ from car to car.
All cars have the same methods, but the methods are performed at different times.
3 JavaScript Objects
JavaScript variables are containers for data values.
Objects are variable too. But objects can contain many values.
This code assigns many values (Fiat, 500, white) to a variable named car:
The values are written as name:value pairs (name and value separated by a colon).
It is a common practice to declare with the const keyword.
4 JavaScript Objects (Contd.,)
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.
5 JavaScript 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
JavaScript object properties in two ways:
objectName.propertyName or objectName[“propertyName”]
7 Adding New Properties, Deleting Properties
You can add new properties to an existing object by simply giving it a value.
Assume that the person object already exists – can give it new properties.
The delete keyword deletes a property from an object.
8 JavaScript for…in Loop
The JavaScript for … in statement loops through the properties of an object.
The block of code inside of the for…in loop will be executed for each property.
Looping through the properties of an object:
9 Nested Objects
Values in an object can be another object.
You can access nested objects using the dot notation or bracket notation.
10 Nested Arrays and Objects
Values in objects can be arrays, and values in arrays can be objects.
11 Object Methods
Object can also have methods.
Methods are actions that can be performed on objects.
Methods are stored in properties as function definitions.
A method is a function stored as a property.
12 Accessing Object Method
In this example, this refers to the person object.
this.firstName means the firstName property, this.lastName means the lastName property of person.
fullName() as a method of the person object, and fullName as a property.
The fullName property will execute (as a function) when it is invoked with ().
13 Adding a Method to an Object
Adding a new method to an object is easy.
14 Using Built-In Methods
This example uses the toUpperCase() method of the string object, to convert a text to uppercase.
15 JavaScript Display Objects
Some common solutions to display JavaScript object are:
Displaying the Object Properties by name
Displaying the Object Properties in a loop
Displaying the Object using Object.values( )
Displaying the Object using JSON.stringify( )
16 JavaScript Accessors (Getters and Setters)
The get keyword in JavaScript Getter and the set keyword in JavaScript Setter
17 JavaScript Constructor
Constructor function is the another way to create objects.
Rules for construction function:
Constructor function name will be the object type
‘this’ operator is used in construction function to refer to the object
There shall be no “return” statement in constructor function
18 Adding a Property to a Constructor
To add a new property to a constructor, you must add it to the constructor function.
19 Adding a Method to a Constructor
Constructor function can define methods.
A new method cannot added to an object constructor the same way as a new method to an existing object.
Adding methods to an object constructor must be done inside the constructor function.
20 Object Types (Blueprints) (Classes)
“Blueprint” is needed for creating many objects of the same “type”.
The way to create an “object type”, is used an object constructor function.
function Person( ) is an object constructor function.
Objects of the same type are created by calling the constructor function with the new keyword.
21 Built-in JavaScript Constructors
JavaScript has built-in constructors for native objects.
new String( ) // A new String object
new Number( ) // A new Number object
new Boolean( ) // A new Boolean object
new Object( ) // A new Object object
new RegExp( ) // A new RegExp object
new Function( ) // A new Function object
new Date( ) // A new Date object
22 JavaScript Object Prototypes and Inheritance
All JavaScript objects inherit properties and methods from a prototype.
Date objects inherit from Date.prototype
Array objects inherit from Array.prototype
Person objects inherit from Person.prototype
The Object.prototype is on the top of the prototype inheritance chain.
Date objects, Array objects and Person objects inherit from Object.prototype.
23
Let’s Create JavaScript Object!
