JavaScript Arrays and Objects

One variable holds one value. Real data isn't like that. A cart has many items. Each item has a name, a price and a quantity. Arrays hold lists. Objects hold labelled data. Put them together and you can describe almost anything a web page needs.

Arrays: ordered lists

const items = ["rice", "eggs", "coffee"];

console.log(items[0]);
console.log(items.length);

items.push("sugar");
console.log(items);
console.log(items.includes("eggs"));

rice
3
[ 'rice', 'eggs', 'coffee', 'sugar' ]
true

• Positions start at 0. The last item is items[items.length - 1].
• push adds to the end. pop removes from the end.
• includes tells you if a value is in the list.

Reading a position that doesn't exist, like items[10], doesn't raise an error. You get undefined. That's where many "Cannot read properties of undefined" errors start.

Objects: labelled values

const product = {
  name: "Coffee",
  price: 95,
  inStock: true,
};

console.log(product.name);
product.price = 99;
product.category = "Drinks";
console.log(product);

Coffee
{ name: 'Coffee', price: 99, inStock: true, category: 'Drinks' }

Each entry is a key and a value. Read with a dot: product.price. Change or add the same way. If the key is in a variable, use brackets: product[field].

Use an array when order matters and items are the same kind of thing. Use an object when each value has a different meaning and you want to look it up by name.

Together: an array of objects

This is the shape you'll see in almost every real project, and in most data that comes from a server.

const cart = [
  { name: "Coffee", price: 95, qty: 2 },
  { name: "Ensaymada", price: 35, qty: 6 },
];

let total = 0;
for (const item of cart) {
  total = total + item.price * item.qty;
}
console.log("Items:", cart.length, "Total:", total);
console.log("First item:", cart[0].name);

Items: 2 Total: 400
First item: Coffee

Read cart[0].name from left to right: the cart, the first item, its name.

Finding something

find returns the first item that matches, or undefined if nothing does:

const cart = [
  { name: "Coffee", price: 95, qty: 2 },
  { name: "Ensaymada", price: 35, qty: 6 },
];
const tea = cart.find(item => item.name === "Tea");
console.log(tea);
if (tea) {
  console.log(tea.price);
} else {
  console.log("Tea is not in the cart");
}

undefined
Tea is not in the cart

Copying: the mistake that changes the original

Assigning an array or object to another name does not copy it. Both names point to the same thing.

const original = ["rice", "eggs"];
const sameList = original;
sameList.push("coffee");
console.log(original);

const copy = [...original];
copy.push("sugar");
console.log(original.length, copy.length);

[ 'rice', 'eggs', 'coffee' ]
3 4

[...original] makes a new array with the same items. For objects, { ...product } does the same. Both are shallow copies: objects inside are still shared. That's enough for now.

Common mistakes

• Starting counting at 1: items[1] is the second item.
• Using a missing key and getting undefined with no error: product.Price is not product.price.
• Thinking const makes an array read-only. It doesn't.
• Changing a "copy" that isn't a copy.

What happens if you skip this

You'll end up with item1Name, item1Price, item2Name, item2Price, and a page that breaks the day someone buys three things.

How would you store a list of students, each with a name and three quiz scores? Sketch the shape before you write any code.