Arrays & Objects — Storing Groups of Data

1. Learning Objective

So far, you stored one value in one variable. Real apps do not work that way. Real apps store many values at once.

A list of products. A list of users. A list of chat messages. You need a way to hold groups of data.

By the end of this lesson, you will be able to:

• Explain what an array is, in your own words.
• Create an array. Read a value from an array. Add a value. Remove a value.
• Explain what an object is, in your own words.
• Read and change a value inside an object, using two different ways.
• Build an array of objects. This is the pattern real apps use most.
• Loop through an array with for...of, to visit every item.

[
  { "id": 1, "name": "Altamash", "role": "Developer" },
  { "id": 2, "name": "Sara", "role": "Designer" }
]

2. Quick Revision

Here is a short review of terms you already know. You will need them today.

3. Arrays — An Ordered List of Values

An array is a list. It holds many values in one variable. The order stays fixed, unless you change it.

You write an array with square brackets [ ]. You separate each value with a comma.

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

This one line replaces three separate variables. It is shorter. It is easier to loop over. It matches how real data looks.

3.1 Each Item Has a Position

Every item in an array has a position. This position is called an index. The first index is 0, not 1. This is called zero-based indexing. (MDN: Indexed collections)

You read an item with square brackets and its index.

console.log(fruits[0]); // "apple"
console.log(fruits[2]); // "mango"
console.log(fruits[5]); // undefined — no item there

3.2 Array Length

Use .length to count the items in an array.

console.log(fruits.length); // 3

3.3 Add and Remove Items

Use .push() to add an item to the end. Use .pop() to remove the last item.

const fruits = ["apple", "banana"];
fruits.push("mango");   // ["apple", "banana", "mango"]
fruits.pop();            // ["apple", "banana"]

4. Objects — Named Values

An array uses position to find a value. Sometimes position is not clear enough. You want a name instead.

An object stores values under names. Each name is called a key. Each stored value is called that key's value. Together, one key and its value form a property. (MDN: JavaScript object basics)

You write an object with curly braces { }.

const user = {
  name: "Altamash",
  age: 25,
  isStudent: true
};

4.1 Reading a Property — Two Ways

Dot notation is the common way. You write a dot, then the key name.

console.log(user.name); // "Altamash"
console.log(user.age);  // 25

Bracket notation uses square brackets and a string. Use this when the key name is stored in a variable, or has a space in it.

console.log(user["name"]); // "Altamash"

const key = "age";
console.log(user[key]); // 25 — key name comes from a variable

4.2 Changing a Property

user.age = 26;          // update an existing property
user.city = "Mumbai";   // add a new property

4.3 Objects Inside Objects

A property's value can be another object. This is called nesting. Chain the dots to reach a deep value.

const user = {
  name: "Altamash",
  address: {
    city: "Mumbai",
    zip: "400001"
  }
};

console.log(user.address.city); // "Mumbai"

5. The Real-World Pattern: an Array of Objects

Most real data is a list of records. Each record has named fields. This means: an array that holds objects.

const contacts = [
  { name: "Sara",  phone: "555-0101" },
  { name: "Kabir", phone: "555-0192" },
  { name: "Meera", phone: "555-0133" }
];

Read one record by its index. Then read a field on that record with a dot.

console.log(contacts[0]);       // { name: "Sara", phone: "555-0101" }
console.log(contacts[0].name);  // "Sara"
console.log(contacts[1].phone); // "555-0192"

6. Visiting Every Item — the for...of Loop

Reading contacts[0], then contacts[1], then contacts[2] by hand does not scale. A list of 1,000 contacts needs a better way.

A for...of loop visits every item in an array, one at a time. Give the current item a temporary name.

const contacts = [
  { name: "Sara",  phone: "555-0101" },
  { name: "Kabir", phone: "555-0192" }
];

for (const contact of contacts) {
  console.log(contact.name);
}
// Sara
// Kabir

contact is a name you choose. On each pass through the loop, it holds the next item in the array. (MDN: for...of)

7. Try It Yourself

Change the values below. Add a contact with .push(). Run the code again. Watch the loop pick up your new item.

8. Practice Questions

Answer these in your head, or write them down. Ask your teacher if any answer feels unsure.

1. What index holds the first item in an array?
2. Given const nums = [10, 20, 30];, what does nums[1] return?
3. Given the same array, what does nums.length return?
4. What method adds one item to the end of an array?
5. What are the two ways to read a property on an object?
6. Given const user = { name: "Sara" };, how do you add a new property called age with value 30?
7. What do we call an array that holds objects instead of plain values?
8. What loop visits every item in an array, one at a time?

9. Build Challenge — a Contact List

10. Interactive Self-Assessment

Concept Quiz

Fill-in-the-Blank Practice

11. Lesson Summary

• An array is an ordered list. Access items by index, starting at 0.
• An object is a set of named values. Access a value by its key, using a dot or brackets.
• An array of objects is the shape of most real-world data: user lists, product lists, API responses.
• A for...of loop visits every item in an array without repeating code.

// Array
const list = ["a", "b", "c"];
list[0];          // "a"
list.length;      // 3
list.push("d");   // add to end
list.pop();       // remove from end

// Object
const item = { key: "value" };
item.key;         // dot notation
item["key"];      // bracket notation

// Array of objects
const rows = [{ id: 1 }, { id: 2 }];
rows[0].id;       // 1

// Loop
for (const row of rows) {
  console.log(row.id);
}

12. Primary Sources & Next Step

Read these two MDN pages this week. They are the source of truth for everything in this lesson:

• MDN: Indexed collections (Arrays)
• MDN: JavaScript object basics

Next lesson: Array Methods — .map(), .filter(), and .reduce(). These build directly on the array shape you learned today, and they are the exact tool React uses to render lists on screen.