JavaScript Arrays and Objects: Storing Collections of Data

A single variable holds a single value — one name, one price, one score. Real programs, though, deal in collections all the time: a list of products, the details of one user, the items sitting in a cart. A plain variable can’t carry any of that. So JavaScript hands you two structures for grouping values together: arrays for ordered lists, and objects for labeled groups. You’ll see these two everywhere in real code, and getting comfortable with them is a big step forward.

We touched on them briefly in the data types article. Now let’s actually put them to work.

Arrays: ordered lists

An array is an ordered list of values. You write it with square brackets [ ], with the items separated by commas:

const fruits = ["apple", "banana", "cherry"];
const numbers = [10, 20, 30, 40];

An array can hold any type of value, and as many as you like. The defining feature is that the items sit in order — there’s a first one, a second one, and so on down the line.

Accessing items by index

You pull an item out of an array by its position, called its index. Here’s the part that catches beginners off guard: indexes start at 0, not 1. So the first item lives at index 0, the second at index 1, and so on:

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

console.log(fruits[0]);   // "apple"  (first item)
console.log(fruits[1]);   // "banana" (second item)
console.log(fruits[2]);   // "cherry" (third item)

Useful array properties and methods

Arrays ship with built-in tools. The most basic is .length, which tells you how many items are inside:

const fruits = ["apple", "banana", "cherry"];
console.log(fruits.length);   // 3

There are also methods — functions attached to the array — for changing what’s in it. A few you’ll reach for constantly:

fruits.push("orange");    // add to the END → ["apple","banana","cherry","orange"]
fruits.pop();             // remove the LAST item
fruits.unshift("mango");  // add to the START
fruits.shift();           // remove the FIRST item

push and pop — add and remove at the end — are by far the most common. With just those two, you can grow and shrink a list while your program runs: adding an item to a cart, dropping a finished task, and so on.

Objects: labeled groups of values

An array shines when order matters and the items are alike (a list of fruits). But plenty of the time you want to group related but different facts about one thing — a user’s name, age, and email. That’s the job of an object.

You write an object with curly braces { }, and it stores values as key-value pairs: every value carries a label (the key) you use to reach it:

const user = {
  name: "John Doe",
  age: 28,
  isMember: true,
};

Here user is a single object describing one person, with three labeled pieces of data. Unlike an array, where you reach in by numeric position, an object lets you grab values by their key name:

console.log(user.name);   // "John Doe"
console.log(user.age);    // 28

This object.key syntax — known as dot notation — is how you read a value back out of an object. It reads almost like a sentence: user.name is “the user’s name.” That’s far clearer than having to remember which numeric slot the name happens to sit in.

Changing and adding properties

You can update a value or add a new one using the same dot notation:

user.age = 29;             // change an existing value
user.city = "Jakarta";     // add a brand-new property

Objects are flexible — you can grow them whenever you need to. Each labeled value inside one is called a property.

Combining arrays and objects

This is where it gets powerful, and where real data starts to take shape. Arrays and objects nest inside each other freely, in any combination. The most common real-world pattern by far is an array of objects — a list where every item is a labeled record:

const products = [
  { name: "Keyboard", price: 250000 },
  { name: "Mouse", price: 120000 },
  { name: "Monitor", price: 1500000 },
];

This is exactly how data from a database or an API usually arrives: a list (the array) of records (the objects). To reach one specific value, you combine both techniques — pick the item by index, then the property by key:

console.log(products[0].name);    // "Keyboard"
console.log(products[1].price);   // 120000

products[0] grabs the first object, and .name grabs its name property. Once reading products[1].price feels comfortable, you can find your way through almost any real data structure you’ll run into.

A realistic example

Let’s model something you might genuinely build — a shopping cart:

const cart = {
  customer: "Jane Doe",
  items: [
    { name: "Keyboard", price: 250000, qty: 1 },
    { name: "Mouse", price: 120000, qty: 2 },
  ],
  total: 490000,
};

console.log(cart.customer);          // "Jane Doe"
console.log(cart.items.length);      // 2
console.log(cart.items[1].name);     // "Mouse"

This one object carries a customer name (a string), a list of items (an array of objects), and a total (a number) — every layer working together. That kind of nested structure is the backbone of the data in almost every real application. It can look like a lot at a glance, but it’s only arrays and objects combined, reached with the same two techniques you already know.

Wrapping up

You can now store and navigate real collections of data:

• An array ([ ]) is an ordered list. Access items by index, which starts at 0. Use .length for the count and methods like push/pop to add/remove.
• An object ({ }) is a set of key-value pairs — labeled data. Access values by key with dot notation (object.key). Each labeled value is a property.
• Choose an array for ordered lists of similar items; choose an object for labeled details about one thing.
• They nest freely — an array of objects is the most common real-world data shape (like records from a database). Combine index and key to reach any value (list[0].name).

Arrays and objects are how you hold the data your programs work on. The natural next question: how do you walk through a list and do something with every item? That’s the job of loops, the topic of the next article — and they pair perfectly with the arrays you just learned.