Scribd
Upload
554 views

02 - JavaScript Objects

Uploaded by

mir593469
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
554 views

02 - JavaScript Objects

Uploaded by

mir593469
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

JavaScript Objects

Learning Outcomes
1. What is an object?

2. Declaring an object

3. Performing operations on an object


What is an Object
Objects (object literals) are a lightweight data structure that are often used to represent
real world entities:

A person has properties (attributes) The person’s attributes can be represented as a


collection of key-value pairs
Declaring an Object
In Javascript, objects are declared using the { } symbols:

● Key-value pairs are separated using commas (,)

const person = {
"firstname": "Johnny",
Key-Value pair
"lastname": "Appleseed",
"hobby": "Skydiving",
"employer": "Apple",
"birthday": "Jan 1, 1970",
"children": ["Phillip", "Stacy", "Brian"]
}

key value
Declaring an Object
Keys can be declared with or without double quotes

const person = { const person = {


"name":"Peter", name:"Peter",
"age":45, age:45,
"hasPets":false hasPets:false
} }

Keys with double quotes Keys without double quotes


Declaring an Object
Values can be any data type: string, booleans, numbers, arrays, other objects

const person = {
"name":"Peter",
"age":45,
"hasPets":false,
"friends":["Lee", "Michelle", "Emily"],
"employer":{"name":"Apple", "address":"123 Infinity Drive", "city":"Cupertino"}
}
Declaring an Object
An object can have as few or as many properties (key value pairs) as is needed:

const person = { const person = {


"favoriteColor": "blue" "firstname": "Johnny",
} "lastname": "Appleseed",
"hobby": "Skydiving",
const person = { "employer": "Apple",
"firstname": "Johnny", "birthday": "Jan 1, 1970",
"lastname": "Appleseed" "children": ["Phillip", "Stacy", "Brian"]
} }

This is an empty object:

const person = {}
What is an Object?
Objects (object literals) are an unordered collection of key-value pairs

● Objects contain attributes, known as keys


● Each key has a value
● Together, a key and value is known as a “key value pair”

Key-Value pair

value

key
Declaring an Object
JavaScript object literals are an unordered collection, which means that the the order of the
key-value pairs do not matter.

const airports = { const airports = {


"YYZ": "Toronto Pearson", "DUB": "Dublin Airport",
"DUB": "Dublin Airport", "LHR": "London Heathrow"
"LHR": "London Heathrow" "YYZ": "Toronto Pearson",
} }

These two declarations are equivalent


Ordered vs. Unordered Collections
In ordered collections (example: arrays), the position of the data matters.

In an unordered collection, position of the data does not matter.

● You cannot manipulate data by position

In real life, there is a big difference


An example of a situation where your
between being first in line vs. last in line!
position doesn’t matter
Accessing a Key-Value Pair
Items in an object can be accessed using dot notation (.)

const person = {
"name":"Peter",
"age":45,
"hasPets":false
}
console.log(person.name) // outputs "Peter"

name of object key that you want to access


Updating an Existing Key-Value Pair
To update the value of an existing key:

const person = {
"name":"Peter",
"age":45,
"hasPets":false
}
person.age = 99 Updated value

name of object key that you want to update


Removing an Existing Key-Value Pair
Use the delete keyword:

const person = {
"name":"Peter",
"age":45,
"hasPets":false
}
delete person.age
console.log(person) // outputs {"name":"Peter", "hasPets":false}
Adding a new Key-Value Pair
To add a new key-value pair, specify the key and its value:

const person = {
"name":"Peter",
"age":45,
"hasPets":false
}

person.favoriteColor = "green"
person.email = "[email protected]"
Does a Key-Value Pair Exist?
Two ways to check if a key-value pair exists:

● Using the Object.hasOwnProperty(key) function.


○ Returns true if the object contains the specified key, and false otherwise

● Checking if a key is undefined


○ If true, then the key does not exist
○ If false, then the key exists

const person = {
"name":"Peter",
"age":45,
"hasPets":false
}

console.log(person.hasOwnProperty("favoriteColor")) // outputs false

console.log(person.email === undefined) // outputs true


console.log(person.name !== undefined) // outputs true
Creating an Array of Objects
Arrays can contain objects:

const people = [
{
"name":"Peter", people[0]
"age":45
},
{
"name":"Mary",
"age":55 people[1]
},
{
"name":"Elliot",
"age":65 people[2]
}
]
Looping Through an Array of Objects
Use a loop to access each item in the array:

const people = [ for (let i = 0; i < people.length; i++) {


{
"name":"Peter", // outputs the current item in the array
"age":45
}, console.log(people[i])
{
"name":"Mary", // outputs the value of current item’s “name” key
"age":55
}, console.log(people[i].name)
{
"name":"Elliot", }
"age":65
}
]
Declaring an Object - Let vs. Const
When an array is declared with the let keyword:

● You can add, remove, and update key-value pairs


● You can reassign the array to a different array

When the array is declared with the const keyword:

● You can add, remove, and update key-value pairs


● You cannot reassign the array

You might also like