JavaScript Arrays and Objects Explained (2026)

Quick answer: A JavaScript array is an ordered list you access by index; an object is a set of key-value pairs you access by name. Arrays come with methods such as map, filter, reduce and find that transform data without manual loops. Objects hold related values together, and destructuring pulls the fields you need into local variables.The sections below cover JavaScript arrays and objects together: creating and reading them, the four transforming methods, copying and combining, then destructuring, which is what makes JavaScript arrays readable in modern code.

JavaScript arrays: create, read, change

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

fruits[0];            // "apple"
fruits.length;        // 3
fruits.push("date");  // add to the end, returns new length
fruits.pop();         // remove from the end
fruits.includes("kiwi"); // false

Indexes start at zero, and arr[arr.length - 1] is the last item — though arr.at(-1) is the cleaner modern form.

The four JavaScript array methods that transform data

const prices = [10, 25, 4, 60];

prices.map(p => p * 1.2);           // [12, 30, 4.8, 72] — same length
prices.filter(p => p >= 20);        // [25, 60] — shorter
prices.reduce((sum, p) => sum + p, 0); // 99 — one value
prices.find(p => p > 50);           // 60 — first match
prices.some(p => p > 100);          // false
prices.every(p => p > 0);           // true

• map — transform each item, keep the length.
• filter — keep the items that pass a test.
• reduce — boil the list down to a single value.
• find — return the first match, or undefined.

All of these return a new array and leave the original untouched.

That immutability is why they compose so well: you can chain map after filter without worrying about what changed underneath.

Copying and combining

const copy = [...prices];              // shallow copy via spread
const merged = [...a, ...b];           // combine two arrays
const withoutOne = prices.toSpliced(1, 1);  // new array, item 1 removed
prices.toSorted((x, y) => x - y);      // sort without mutating

The methods ending in ed — toSorted, toSpliced, toReversed — are non-mutating versions of the older sort, splice and reverse, which all change the array in place. Prefer the non-mutating forms in modern code.

Objects: grouping related values

const user = {
  name: "Ada",
  role: "engineer",
  active: true,
  greet() { return `Hi, ${this.name}`; },
};

user.name;            // "Ada"
user["role"];         // "engineer" — bracket form for dynamic keys
user.email ??= "n/a"; // assign only if currently null/undefined

Objects can hold functions, which become methods. Dot notation is the readable default; the bracket form is for keys computed at runtime, such as user[fieldName].

Destructuring, the readable shortcut

const { name, role = "guest" } = user;      // pull out, with a default
const [first, second, ...rest] = fruits;    // from an array

const updated = { ...user, active: false }; // copy, then override one field

The spread form is how you update state immutably: copy the object, change one field, and you have a new reference. Every modern framework — including Angular — relies on this pattern for change detection.

Iterating an object

Object.keys(user);          // ["name", "role", ...]
Object.values(user);        // ["Ada", "engineer", ...]
Object.entries(user);       // [["name", "Ada"], ...]

for (const [key, value] of Object.entries(user)) {
  console.log(key, value);
}

Next: DOM manipulation. To learn JavaScript with a mentor on real projects, Ampersand Academy teaches web development one-to-one.

Frequently asked questions