Data With Objects and Arrays

1. JavaScript Objects

When building web applications, you often need to represent real-world things like users, products, or settings. A JavaScript object lets you group related information about one thing into a single variable.

An object stores data as a collection of key–value pairs, where each key is a descriptive label and each value is the data it represents. For example, a user might have a name, email, and age, all stored together in one object.

term to know

Object

A JavaScript data structure that groups related information about a single entity using key–value pairs enclosed in curly braces.

1a. Object Syntax and Properties

An object uses curly braces {} to define a group of related data. Inside the braces, you list properties, which are key–value pairs separated by commas.

Each property has two parts:

• A key, which is the name or label
• A value, which is the data stored under that label

EXAMPLE

const book = {

title: "The Great Gatsby",

author: "F. Scott Fitzgerald",

year: 1925,

isAvailable: true

};

In this code:

• const book = creates a variable named book.
• {} contains the object’s data.
• Each line inside the braces is a property.
• title, author, year, and isAvailable are keys.
• Each key is followed by a colon (:) and its value.
• Commas separate each property.

Together, these properties describe one object—in this case, a book.

Property keys should use clear, descriptive names that explain the data they represent. When writing keys without quotes, developers commonly use camel-case for names with multiple words.

key concept

Objects store data as key–value pairs. Each key acts as a label that describes the data it holds, making your code more readable and self-documenting. This structure is ideal for representing a single entity with multiple characteristics.

term to know

Property

A key–value pair within an object, where the key is a string identifier and the value can be any data type.

1b. Accessing and Modifying Properties

JavaScript provides two ways to access an object’s properties: dot notation and bracket notation. Dot notation accesses a property by writing the object name, a period, and the property key, while bracket notation uses the key as a string inside square brackets. Both allow you to retrieve the value associated with a specific key, but they are used in different situations, such as when the property name is known in advance or stored in a variable.

EXAMPLE

const car = {

make: "Toyota",

model: "Camry",

year: 2023

};

console.log(car.make); // Toyota
console.log(car["model"]); // Camry

In this code:

• car.make uses dot notation—the object name, a period, then the key.
• car["model"] uses bracket notation—the key as a string inside square brackets.
• Both expressions return the matching value from the object.

Dot notation is more common when you know the exact property name. Bracket notation is useful when the property name is stored in a variable or includes special characters. You can also use dot notation to modify existing properties or add new ones.

EXAMPLE

Updating and adding properties:

car.year = 2024; // Updates existing property
car.color = "blue"; // Adds a new property
delete car.color; // Removes the property

In this code:

• Assigning a new value to an existing key updates it.
• Assigning a value to a new key adds it to the object.
• The delete keyword removes a property completely.

You can also create an empty object and add properties step by step. This is useful when data is collected or built over time.

EXAMPLE

Creating an object dynamically:

const student = {};
student.name = "Maria";
student.grade = 95;

In this code:

• const student = {}; creates an empty object.
• Each line adds a new property using dot notation.
• The object is built gradually instead of being defined all at once.

After these lines, the object looks like this:

{ name: "Maria", grade: 95 }

try it

Consider this object:

const laptop = {

brand: "Dell",

ram: 16,

storage: 512

};

How would you access the ram property using dot notation?

laptop.ram returns 16. Using bracket notation, laptop["ram"] returns the same value.

big idea

Objects organize related data using descriptive keys, making your code easier to read and maintain. Dot notation handles simple cases; bracket notation handles dynamic keys.

term to know

Dot Notation

A syntax for accessing object properties by writing the object name, a period, and the property key.

2. JavaScript Arrays

Objects are used to represent a single entity with named properties, such as a user, product, or setting. Each property describes one aspect of that entity.

Arrays are used to store a collection of related items in a specific order. Each item in an array is called an element, and each element has a numbered position that determines how it is accessed. These positions are called indexes, and they start at 0 for the first element, then increase by one for each item.

terms to know

Array

An ordered collection of values stored in a single variable, using square brackets and accessed by numeric index.

Element

An individual item stored in an array.

Index

The numeric position of an element within an array, starting at zero for the first element.

2a. Array Syntax and Elements

An array uses square brackets [] to define a list of values, with each element separated by a comma and accessed by its position.

EXAMPLE

const colors = ["red", "green", "blue", "yellow"];

console.log(colors[0]); // red
console.log(colors[2]); // blue
console.log(colors.length); // 4

In this code:

• Square brackets wrap the four string elements, separated by commas.
• colors[0] returns the first element because indexing starts at zero.
• colors.length returns the count of elements in the array.

Array indexing starts at zero, so the first element is at index 0, the second at index 1, and so on. Because of this, the last element is always one position less than the total number of elements. If an array has a length of 4, the last element is at index 3.

Arrays can hold any type of data, and you can even mix types:

EXAMPLE

const mixed = ["hello", 42, true, null];

In this code:

• One array holds a string, a number, a Boolean, and null.
• Mixing types is allowed, but arrays are most useful when elements share a type, such as a list of product names or scores.

2b. Common Array Methods

JavaScript provides built-in methods, which are functions that perform specific actions on an array. These methods make working with arrays easier by allowing you to add, remove, find, or change elements without writing complex code.

EXAMPLE

const fruits = ["apple", "banana"];

fruits.push("orange"); // ["apple", "banana", "orange"]
fruits.pop(); // ["apple", "banana"]
fruits.unshift("mango"); // ["mango", "apple", "banana"]
fruits.shift(); // ["apple", "banana"]

In this code:

• push() adds an element to the end of the array.
• pop() removes and returns the last element.
• unshift() adds an element to the beginning.
• shift() removes and returns the first element.

JavaScript includes many array methods that follow similar patterns. Some add or remove elements, while others help you search or work with parts of an array.

Other useful array methods include the following:

You do not need to memorize all of these methods, but it is helpful to recognize what they do and when to use them.

try it

Consider this array:

const numbers = [10, 20, 30, 40];

What value does numbers[1] return?

numbers[1] returns 20. Index 1 is the second element because array indexing starts at zero.

big idea

Arrays provide an ordered structure for collections of related items. Built-in methods like push(), pop(), and includes() simplify common operations, while zero-based indexing gives you precise control over element access.

2c. Working With Multiple Elements

Arrays often contain many elements. While you can access a single item using its index, you will often need to work with every element in the array.

A loop is a way to repeat the same set of instructions multiple times. JavaScript uses loops to move through an array one element at a time, applying the same action to each item.

EXAMPLE

Using a loop to access every element:

const colors = ["red", "green", "blue"];

for (let i = 0; i < colors.length; i++) {

console.log(colors[i]);

}

In this code:

• let i = 0 starts at the first index.
• i < colors.length continues until the end of the array.
• i++ moves to the next index each time.
• colors[i] accesses each element.

This type of loop is called a for loop. It allows you to repeat the same action for every element in an array.

A for loop has three parts inside the parentheses:

• A starting point (let i = 0)
• A condition (i < array.length) that determines how long the loop runs
• An update (i++) that moves to the next position each time

JavaScript also provides other ways to work with arrays, such as the forEach() method, which you will see in later lessons.

try it

Consider this array and code:

const numbers = [5, 10, 15];

for (let i = 0; i < numbers.length; i++) {

console.log(numbers[i]);

}

What will be printed to the console?

5
10
15

3. Nested Data Structures

Real-world data is rarely flat. A customer has an address, which itself contains a street, city, and zip code. A shopping cart contains products, each with its own name, price, and quantity. JavaScript handles this complexity with nested data structures, where objects and arrays contain other objects and arrays.

An object property can hold another object as its value. This nesting creates hierarchical data that mirrors real-world relationships.

EXAMPLE

const user = {

name: "Sarah Johnson",

email: "[email protected]",

address: {

street: "123 Main St",

city: "Portland",

state: "OR",

zip: "97201"

}

};

console.log(user.address.city); // Portland

In this code:

• The address key holds another object with its own properties.
• Chained dot notation—user.address.city—reads from left to right, stepping deeper into the structure.

A second common pattern combines arrays and objects: an array of objects represents a collection where each item has multiple properties.

EXAMPLE

const products = [

{ id: 1, name: "Laptop", price: 999.99 },

{ id: 2, name: "Mouse", price: 29.99 },

{ id: 3, name: "Keyboard", price: 79.99 }

];

console.log(products[0].name); // Laptop
console.log(products[2].price); // 79.99

In this code:

• The outer square brackets mark an array with three elements.
• Each element is its own object with id, name, and price properties.
• products[0].name first selects the element at index 0, then reads its name property.

User lists, blog posts, shopping carts, search results, and API responses all commonly use arrays of objects. Each object represents one item; the array holds the entire collection.

step by step

To access data in an array of objects:

1. Use the array name followed by the index in brackets to select one object.
2. Add dot notation to access a specific property within that object.
3. Read the expression left to right: array, index, property.

// products[1].name means:
// 1. Start with products array
// 2. Get the element at index 1 (the Mouse object)
// 3. Access its name property

try it

Using the products array above, how would you access the price of the mouse?

products[1].price returns 29.99. The mouse sits at index 1, and its price property holds the value.

big idea

Nested data structures let you model complex, real-world information. Objects within objects create hierarchies; arrays of objects represent collections of similar items. Combining these patterns gives you the flexibility to organize any data your application needs.

term to know

Nested Data Structure

A data organization pattern where objects or arrays contain other objects or arrays, creating hierarchical relationships.

4. Choosing the Right Structure

Selecting the appropriate data structure improves code clarity and makes common operations easier. The choice depends on the nature of your data and how you plan to use it. Objects and arrays serve different purposes. The following comparison highlights when each structure is most useful.

Choosing between an object and an array depends on whether you are describing one item with multiple attributes or managing a collection of items in order. Consider these guidelines when you reach for each structure.

Use an object when:

• Data has descriptive labels like name, age, or email.
• You need to access values by meaningful names.
• You are representing a single entity with multiple attributes.
• Property order does not matter.

• Data is a list of similar items.
• Order or position is significant.
• You need to iterate through all items.
• You want to use array methods like push() or filter().

hint

Ask yourself: “Am I describing one thing with multiple characteristics or listing multiple things?” The answer guides your choice between object and array.

Most real applications combine both objects and arrays. For example, a music playlist might store information about the playlist along with a list of songs, where each song has its own details.

EXAMPLE

const playlist = {

name: "Road Trip Mix",

createdBy: "Alex",

songs: [

{ title: "Bohemian Rhapsody", artist: "Queen", duration: 354 },

{ title: "Hotel California", artist: "Eagles", duration: 391 },

{ title: "Stairway to Heaven", artist: "Led Zeppelin", duration: 482 }

]

};

console.log(playlist.name); // Road Trip Mix
console.log(playlist.songs[0].title); // Bohemian Rhapsody

playlist.songs.push({

title: "Sweet Child O' Mine",

artist: "Guns N' Roses",

duration: 356

});

In this code:

• The outer object holds playlist metadata (name, createdBy) alongside the songs array.
• Each element in songs is its own object describing one track.
• playlist.songs[0].title reads left to right: the playlist, its songs array, the first element, then its title.
• push() adds a new song object to the array without disturbing the metadata.

The following diagram shows how these layers fit together in a nested data structure.

When accessing nested data, read the expression from left to right, moving step by step through the structure. This pattern scales well. You can add more playlist properties without changing the songs structure, and you can add more songs without affecting the metadata.

try it

Using the playlist object above, how would you access the artist of the second song?

playlist.songs[1].artist returns “Eagles.” You first access the songs array, then index 1 for the second song, then the artist property.

big idea

Effective data organization requires matching your structure to your data’s nature. Objects handle named properties for single entities, arrays manage ordered collections, and combining them creates flexible structures for complex applications.

REFERENCES

Mozilla Developer Network. (n.d.). How the web works. developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works