JavaScript Arrays and Objects

Arrays and objects are the two core structures JavaScript uses to group related data. Arrays are ordered collections indexed by number, ideal for lists of similar items; objects are unordered collections of key-value pairs, ideal for representing a single entity with named properties.

Modern JavaScript adds powerful tools for working with both: a rich set of array iteration methods, destructuring for pulling values out of structures concisely, and the spread operator for copying and combining them.

Why it matters

Data from an API arrives as arrays of objects, and turning it into what the page needs is the daily work of front-end development. map, filter and reduce, with destructuring and the spread operator, replace most loops and are the style in which React code is written.

Array Iteration Methods: map, filter, reduce, forEach

These four methods are the backbone of modern array processing in JavaScript, and each has a distinct purpose.

• forEach — runs a function once per element for side effects (like logging); it always returns undefined.
• map — transforms each element and returns a new array of the same length containing the results.
• filter — returns a new array containing only the elements for which the callback returns true.
• reduce — combines all elements into a single accumulated value, using a callback that receives the running total and the current element.

Object Literals

An object literal groups related values under named keys: const user = { name: "Ana", age: 30 };. Properties are accessed with dot notation (user.name) or bracket notation (user["name"]), the latter being required when the key is dynamic or not a valid identifier.

Destructuring

Destructuring lets you unpack values from arrays or properties from objects into distinct variables in one step. Array destructuring uses position: const [first, second] = [10, 20];. Object destructuring uses key names: const { name, age } = user;, and can rename or provide defaults: const { name: userName = "Guest" } = user;.

The Spread Operator

The spread operator (...) expands an array or object into its individual elements or properties. It is commonly used to copy structures without mutating the original (const copy = [...original];), merge multiple arrays or objects (const merged = { ...defaults, ...overrides };), or pass an array's elements as individual function arguments.

Examples

const prices = [10, 25, 40, 15, 60];

const discounted = prices
  .filter((price) => price >= 20)
  .map((price) => price * 0.9);

const total = discounted.reduce((sum, price) => sum + price, 0);

console.log(discounted);
console.log(total);

[ 22.5, 36, 54 ]
112.5

const user = { name: "Ana", age: 30, city: "Lisbon" };
const { name, city, country = "Portugal" } = user;
console.log(name, city, country);

const [first, , third] = [1, 2, 3];
console.log(first, third);

const updatedUser = { ...user, age: 31 };
console.log(updatedUser);

const combined = [...[1, 2], ...[3, 4]];
console.log(combined);

Ana Lisbon Portugal
1 3
{ name: 'Ana', age: 31, city: 'Lisbon' }
[ 1, 2, 3, 4 ]

Exercise

From the list of products, print the names of those that cost more than 100, joined with a comma and a space. Then print the total of all prices. Then use destructuring to take the name and price of the first product and print them on one line.

Expected output: bag, book, 612, pen 12 (one per line)

const products = [
  { name: "pen", price: 12 },
  { name: "bag", price: 450 },
  { name: "book", price: 150 },
];

// TODO: names of products over 100, joined with ", "

// TODO: total of all prices

// TODO: destructure name and price from the first product and log them

const products = [
  { name: "pen", price: 12 },
  { name: "bag", price: 450 },
  { name: "book", price: 150 },
];

const expensive = products.filter((p) => p.price > 100).map((p) => p.name);
console.log(expensive.join(", "));

const total = products.reduce((sum, p) => sum + p.price, 0);
console.log(total);

const { name, price } = products[0];
console.log(name + " " + price);

Quick quiz

Interview questions