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.
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.
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.
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
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.
AI tutor
The optional AI tutor isn't enabled in this deployment. All lessons, exercises, quizzes, and search work fully without it.