JS Objects and Arrays

Working with Nested Objects and Arrays in JavaScript

When working with real-world data, you will often see objects and arrays combined to create more complex and organized structures. In this section, we will explore how to work with these nested data structures, including objects inside other objects, arrays inside objects, and more.

1. Objects Inside Objects

Let's say we want to create an object for a company. This company will have an address, which is itself an object with its own properties (like street, city, etc.). To model this, we can nest an address object inside our company object.

let company = {
    companyName: "Healthy Candy",
    activity: "food manufacturing",
    address: {
        street: "2nd street",
        number: "123",
        zipcode: "33116",
        city: "Miami",
        state: "Florida"
    },
    yearOfEstablishment: 2021
};

To access or modify one of the properties of the nested address object, you can chain the property accessors together.

// Using dot notation
company.address.zipcode = "33117";

// Using bracket notation
company["address"]["number"] = "100";
console.log(company.address.zipcode); // 33117
console.log(company.address.number);  // 100

2. Arrays Inside Objects

Our company might have a range of activities instead of just one. We can easily represent this by replacing the activity string with an array of strings.

let company = {
    companyName: "Healthy Candy",
    activities: ["food manufacturing", "improving kids' health", "manufacturing toys"],
    address: { /* ... */ },
    yearOfEstablishment: 2021
};

// Accessing an element from the array
let activity = company.activities[1];
console.log(activity); // "improving kids' health"

3. Objects Inside Arrays

It is also very common to have an array where each element is an object. For example, instead of one address, our company might have a list of office locations. We can accomplish this by creating an array of address objects.

let addresses = [
    { street: "2nd street", number: "123", city: "Miami" },
    { street: "1st West avenue", number: "5", city: "Addison" }
];

// Accessing a property from the first object in the array
let streetName = addresses[0].street;
console.log(streetName); // "2nd street"

To access the data, you first use the array index [0] to select the object, and then use dot notation .street to get the property from that object.

4. Complex Nesting: Objects in Arrays in Objects

Just to show that this can go as many levels deep as we need, we are going to give our company object an array of address objects.

let company = {
    companyName: "Healthy Candy",
    activities: ["food manufacturing", "improving kids' health"],
    address: [
        { street: "2nd street", number: "123", city: "Miami" },
        { street: "1st West avenue", number: "5", city: "Addison" }
    ]
};

// Access the street name of the first address
let streetName = company.address[0].street;
console.log(streetName); // "2nd street"

As you can see, we can stack object and array element requests indefinitely. Whenever you need a list of something, you will be using an array. Whenever you want to represent something with properties that have descriptive names, it is better to use an object.