beginner26 min

Arrays and Objects

Group related values in arrays and objects, and transform them with array methods.

What you'll learn

  • Create and access arrays and objects
  • Use map, filter, and find to transform and search arrays
  • Use destructuring to pull values out of arrays and objects

Prerequisites

Explanation

An array is an ordered list of values, indexed from 0:

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

An object is a collection of named properties — think of it as a labeled record instead of a numbered list:

const book = { title: "Dune", year: 1965, pages: 412 };
console.log(book.title); // "Dune"

Arrays come with powerful built-in methods that avoid writing manual loops for common transformations:

  • map builds a new array by transforming every item: [1,2,3].map(n => n * 2)[2,4,6]
  • filter builds a new array keeping only items that pass a test: [1,2,3,4].filter(n => n % 2 === 0)[2,4]
  • find returns the first item that passes a test, or undefined if none do: [1,2,3].find(n => n > 1)2

All three take a function as an argument and never modify the original array — they return a new value instead, which makes your code easier to reason about.

Destructuring is a shorthand for pulling values out of arrays or objects into their own variables:

const [first, second] = fruits;         // first = "apple", second = "banana"
const { title, year } = book;           // title = "Dune", year = 1965

This is especially common when working with function parameters that are objects, e.g. function printBook({ title, year }) { ... }, since it avoids repeatedly writing book.title, book.year.

Example

Using map and filter together, plus object property access.

const prices = [10, 25, 5, 40];

const withTax = prices.map((p) => p * 1.08);
const affordable = prices.filter((p) => p < 30);

console.log(withTax);
console.log(affordable);

const product = { name: "Notebook", price: 5 };
console.log(product.name, product.price);

Try it yourself

Add a fourth price and adjust the affordability threshold.

Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.

Loading editor…

Guided exercise

Guided exercise

Write a function `doubleAll(numbers)` that returns a new array with every number doubled, using map.

Checks: doubleAll([1,2,3]) returns [2,4,6] · plus 1 hidden check

Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.

Loading editor…

Stuck? Get a hint.

Independent exercise

Independent exercise

Write a function `findCheapest(products)` where each product is `{ name, price }`. Return the name of the product with the lowest price, using filter/find/reduce or any correct approach.

Checks: Finds the cheapest of three products · plus 1 hidden check

Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.

Loading editor…

Stuck? Get a hint.

Common mistakes

  • Trying to access an object property that doesn't exist and being surprised by undefined instead of an error.
  • Forgetting that map/filter return a brand-new array rather than modifying the original.
  • Mixing up array index access (fruits[0]) with object property access (book.title).

Knowledge check

Knowledge check

1. What does `[1,2,3,4].filter(n => n % 2 === 0)` return?
2. What is the key difference between map and filter?
3. What does `const { title } = book;` do?

Takeaway

Arrays hold ordered lists, objects hold named fields, and map/filter/find replace most manual loops over them.

Summary

Arrays are ordered, index-based lists; objects are named-property records. map, filter, and find transform or search arrays without mutating them, and destructuring shortens pulling values out of either structure.

References

Your notes

Notes save automatically.

Finished this lesson?

Mark it complete to track your progress and schedule a future review.