JavaScript Objects
TIEST (NED University, Karachi) 1
JavaScript Objects:
What are JavaScript Objects?
• Objects are variables that can store both values and functions.
• Values are stored as key:value pairs called properties.
• Functions are stored as key:function() pairs called methods.
TIEST (NED University, Karachi) 2
JavaScript Objects:
TIEST (NED University, Karachi) 3
Real Life Comparison:
• In real life, we can describe subjects as objects (a car, a person, a
house)
Car Object Car Properties Car Methods
[Link] = Fiat [Link]()
[Link] = 500 [Link]()
[Link] = 850kg [Link]()
[Link] = white [Link]()
TIEST (NED University, Karachi) 4
• Different cars have the same properties, but the property values can
differ from car to car.
• Different cars have the same methods, but the methods can be
performed at different times.
Object Example:
• This code example assigns many values (Fiat, 500, white) to
an object named car:
Example
const car = {
type: "Fiat",
model: "500",
color: "white"
}; TIEST (NED University, Karachi) 5
Note
type, model, and color are properties
"Fiat", 500, and "white" are property values
Object Literal:
• An object literal "literally" describes an object using a
concise syntax with zero or more key:value pairs
inside curly braces to describe all the object properties:
{firstName:"John", lastName:"Doe",
age:50, eyeColor:"blue"}
TIEST (NED University, Karachi) 6
Object Literal:
TIEST (NED University, Karachi) 7
How to Create a JavaScript Object:
• An object literal is the simplest and most common way to define a
JavaScript object.
• All the examples below, create the same JavaScript object:
Example 1
// Create an Object
const person = {firstName:"John", lastName:"Doe",
age:50, eyeColor:"blue"};
TIEST (NED University, Karachi) 8
• Spaces and line breaks are not important. An object literal
can span multiple lines:
Example 2
// Create an Object
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
TIEST (NED University, Karachi) 9
• You can also create an empty object, and add the properties
later:
Example 3
// Create an Object
const person = {};
// Add Properties
[Link] = "John";
[Link] = "Doe";
[Link] = 50;
[Link] = "blue";
TIEST (NED University, Karachi) 10
Note
You should declare objects with the const keyword.
Using the new Keyword:
Example 4
Create a new JavaScript object using new Object():
// Create an Object
const person = new Object({
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
});
TIEST (NED University, Karachi) 11
Note:
There is no need to use new Object().
For readability, simplicity and speed, use an object literal instead.
Object Properties:
You can access object properties in two ways:
• Dot notation
• Bracket notation
Dot Notation:
[Link]
[Link];
TIEST (NED University, Karachi) 12
Bracket Notation:
objectName["propertyName"]
person["firstName"];
TIEST (NED University, Karachi) 13
Object Properties:
TIEST (NED University, Karachi) 14
JavaScript Object Methods:
• Objects can also have methods.
• Object methods are actions that can be performed on objects.
• Object methods are function definitions stored as property values:
Example
const person = {
firstName: "John",
lastName : "Doe",
age : 50,
fullName : function() {
return [Link] + " " + [Link];
}
};
TIEST (NED University, Karachi) 15
Property Property Value
firstName John
lastName Doe
age 50
fullName function() {return [Link] + " " + [Link];}
TIEST (NED University, Karachi) 16
Note
In an object method, this refers to the object.
In the example above, this refers to the person object:
Summary:
• Objects are containers for Properties and Methods
• Properties are named Values stored as key:value pairs
• Methods are Functions stored as key:function() pairs.
In JavaScript, Objects are King:
• If you Understand Objects, you Understand JavaScript.
• In JavaScript, almost "everything" is an object:
TIEST (NED University, Karachi) 17
• Objects are objects
• Maths are objects
• Dates are objects
• Arrays are objects
• Maps are objects
• Sets are objects
• RegExp are Objects
• Errors are Objects
All JavaScript values, except primitives, are objects
TIEST (NED University, Karachi) 18
JavaScript Primitives:
• A primitive data type is data type that can only store a single
primitive value.
• JavaScript defines 7 types of primitive data types:
Type Example value
string "Hello"
number 3.14
boolean true
bigint 12345678901234
null null
undefined undefined
symbol symbol
TIEST (NED University, Karachi) 19
JavaScript Object Properties:
Properties are key:value Pairs
• A JavaScript object is a collection of properties
• Properties can be changed, added, and deleted.
Accessing JavaScript Properties:
You can access object properties in these ways:
•Dot notation
•Bracket notation
•Expression TIEST (NED University, Karachi) 20
Examples
// [Link]
let age = [Link];
//objectName["property"]
let age = person["age"];
//objectName[expression]
let age = person[x];
TIEST (NED University, Karachi) 21
Note
In general, dot notation is preferred for readability and simplicity.
Bracket notation is necessary in some cases:
• The property name is stored in a variable:
person[myVariable]
• The property name is not a valid identifier:
person["last-name"]
Bracket notation is useful when the property name is stored in
a variable:
Example
let n1 = "firstName";
let n2 = "lastName";
let name = person[n2] + " " + person[n2];
TIEST (NED University, Karachi) 22