Scribd
Upload
1K views

02 - JavaScript Objects

Uploaded by

mir593469
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1K views

02 - JavaScript Objects

Uploaded by

mir593469
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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