Arrays and objects

The idea

Real data comes in two shapes: lists of things (products in a cart) and records describing one thing (a product's name, price and stock). JavaScript has a structure for each: arrays for lists and objects for records. Combine them (an array of objects) and you can represent almost any data a web app deals with, including JSON from APIs.

If you know Python: arrays are like lists, and objects are like dictionaries.

Arrays

A shopping cart is a list of things that grows and shrinks as the customer shops. In JavaScript, an ordered list like that is an array, written with square brackets. It works a lot like a Python list:

const cart = ["Arabica Gayo", "French Press"];
cart.push("Grinder");              // add to the end
console.log(cart.length, cart[0], cart[cart.length - 1]);

const last = cart.pop();           // remove from the end
console.log(last, cart);
console.log(cart.includes("French Press"), cart.indexOf("Grinder"));

3 Arabica Gayo Grinder
Grinder ["Arabica Gayo", "French Press"]
true -1

• Indexes start at 0; the last item is at length - 1. Negative indexes don't work (cart[-1] is undefined), but cart.at(-1) does.
• push/pop add and remove at the end; unshift/shift at the start.
• includes checks membership; indexOf returns the position or -1.
• const stops the variable being reassigned, but the array itself can still change. const means "always this array", not "this array never changes".

Objects

A product isn't just one value. It has a name, a price, whether it's in stock, some tags. An object groups all of those facts under one name, each with its own label, much like a Python dictionary:

const product = {
  name: "Arabica Gayo",
  price: 95000,
  inStock: true,
  tags: ["arabica", "aceh"],
};

console.log(product.name, product.price);
console.log(product["inStock"]);

product.price = 89000;             // update
product.weightGrams = 250;         // add a new property
delete product.inStock;            // remove one
console.log(product);

const field = "price";
console.log(product[field]);       // bracket notation with a variable
console.log(product.rating);       // missing property

Arabica Gayo 95000
true
{ name: "Arabica Gayo", price: 89000, tags: ["arabica", "aceh"], weightGrams: 250 }
89000
undefined

• Properties are key: value pairs. Read them with a dot (product.name) or brackets (product["name"]). Use brackets when the key is in a variable.
• Reading a missing property gives undefined, not an error (Python would raise KeyError).
• The trailing comma after the last property is allowed and keeps diffs clean.

Arrays of objects

Put the two together and you get the shape of most real data: a list of things, where each thing has several properties. A product catalogue is an array of product objects, and you can loop over it to work out things like the value of everything in stock:

const products = [
  { name: "Arabica Gayo", price: 95000, stock: 12 },
  { name: "Toraja Kalosi", price: 110000, stock: 0 },
  { name: "French Press", price: 245000, stock: 4 },
];

let stockValue = 0;
for (const p of products) {
  stockValue += p.price * p.stock;
}
console.log(products.length, products[1].name, stockValue);

3 Toraja Kalosi 2120000

Destructuring and spread

Destructuring pulls values out into variables; spread (...) copies them into new arrays or objects:

const product = { name: "Moka Pot", price: 320000, stock: 6 };
const { name, price } = product;
console.log(name, price);

const [first, second] = ["Gayo", "Toraja", "Kintamani"];
console.log(first, second);

const discounted = { ...product, price: 288000 };   // copy, then override
console.log(discounted.price, product.price);

const more = [...["Gayo", "Toraja"], "Kintamani"];
console.log(more);
console.log(Object.keys(product), Object.entries(product)[0]);

Moka Pot 320000
Gayo Toraja
288000 320000
["Gayo", "Toraja", "Kintamani"]
["name", "price", "stock"] ["name", "Moka Pot"]

{ ...product, price: 288000 } creates a new object, leaving the original untouched. That habit (copy and change instead of modifying in place) prevents a whole class of bugs where one part of the code changes data another part was still using.

Why this matters for clean code

Choosing the right shape makes the rest of the code simple. An array of product objects can be looped over, filtered, sorted and rendered with a few lines; the same data spread across parallel arrays (names, prices, stocks) breaks the moment one array gets out of step. Group data that belongs together into objects.

Recap

• Arrays: [a, b], arr[0], arr.length, push/pop, includes, indexOf, at(-1).
• Objects: { key: value }, obj.key / obj["key"], add by assigning, delete obj.key.
• Missing index or property → undefined.
• const prevents reassignment, not mutation.
• Destructuring const { a, b } = obj, const [x, y] = arr; spread [...arr], { ...obj, key: newValue }.
• Object.keys, Object.values, Object.entries.