Web Development - JavaScript Objects
JavaScript Objects
Objects are used to store related data together. You can think of an object as a collection of name:value pairs.
What is an Object?
An object stores data in properties. Each property has a name (also called a key) and a value.
Example
Create a simple object:
const person = {
name: "Bo",
age: 25,
city: "Oslo"
};
document.getElementById("demo").innerHTML =
"Name: " + person.name + "<br>" +
"Age: " + person.age + "<br>" +
"City: " + person.city;
Try it Yourself »
Here, person is an object with three properties: name, age, and city.
Accessing Object Properties
You can access a property in two ways:
- Dot notation:
object.property - Bracket notation:
object["property"]
Example
Use dot and bracket notation:
const person = {
name: "Bo",
age: 25
};
const text =
"Dot: " + person.name + "<br>" +
"Bracket: " + person["age"];
document.getElementById("demo").innerHTML = text;
Try it Yourself »
Dot notation is easier to read. Bracket notation is useful when the property name is stored in a variable or has special characters.
Changing and Adding Properties
You can update an existing property or add a new one at any time.
Example
Change and add properties:
const person = {
name: "Bo",
age: 25
};
// change a property
person.age = 26;
// add a new property
person.city = "Oslo";
document.getElementById("demo").innerHTML =
person.name + " is " + person.age + " years old from " + person.city + ".";
Try it Yourself »
Even though the object is declared with const, you can still change its properties.
Object Methods
A method is a function stored as a property in an object.
Example
Add a method to an object:
const person = {
firstName: "Bo",
lastName: "Refs",
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
const text = person.fullName();
document.getElementById("demo").innerHTML = text;
Try it Yourself »
Inside the method, this refers to the object itself.
Looping Through Properties
You can loop through all properties in an object using for...in.
Example
List all properties:
const person = {
name: "Bo",
age: 25,
city: "Oslo"
};
let text = "";
for (const key in person) {
text += key + ": " + person[key] + "<br>";
}
document.getElementById("demo").innerHTML = text;
Try it Yourself »
The key variable holds each property name.
You can use person[key] to get its value.
Nested Objects
Objects can contain other objects. This is useful for grouping related information.
Example
Object with a nested object:
const person = {
name: "Bo",
address: {
street: "Main Street 1",
city: "Oslo"
}
};
const text = person.name + " lives in " + person.address.city;
document.getElementById("demo").innerHTML = text;
Try it Yourself »
You can use dot notation several times in a row to reach nested properties.
Array of Objects
You can store multiple objects inside an array. This is common when you have a list of similar items.
Example
List products from an array of objects:
const products = [
{ name: "Laptop", price: 1200 },
{ name: "Mouse", price: 25 },
{ name: "Keyboard", price: 45 }
];
let text = "";
for (const item of products) {
text += item.name + " - $" + item.price + "<br>";
}
document.getElementById("demo").innerHTML = text;
Try it Yourself »
Here, each item in the products array is an object with name and price properties.
Summary
- Objects store data in name:value pairs.
- Access properties with dot notation or bracket notation.
- You can change and add properties even if the object is declared with
const. - Methods are functions stored as object properties.
- Use
for...into loop through object properties. - Objects can be nested, and you can store many objects in an array.
Next, you will learn how JavaScript can work with HTML using the Document Object Model (DOM).
