Arrays & Objects Deep Dive

From loops to array methods

You already know how to write a for loop to walk through an array and do something with each item. That skill doesn't go away, but modern JavaScript gives you higher-level methods that express intent more clearly. array.map() transforms every item into something new and returns a new array of the same length. array.filter() keeps only the items that pass a test and returns a shorter (or equal) array. array.reduce() boils an entire array down into a single value, like a total, an average, or even a brand-new object. Together these three methods cover the vast majority of data-shaping tasks you'll encounter, from formatting prices to building summary statistics.

1const products = [2  { name: "Notebook", price: 4.5 },3  { name: "Headphones", price: 89 },4  { name: "Pen", price: 1.2 },5];67const affordable = products8  .filter((p) => p.price < 10)9  .map((p) => `${p.name}: $${p.price.toFixed(2)}`);1011console.log(affordable); // ["Notebook: $4.50", "Pen: $1.20"]

reduce is the most flexible and, at first, the trickiest of the three. It takes a function that receives an accumulator (the value built up so far) and the current item, and it returns the updated accumulator. You also pass a starting value. Think of it like rolling a snowball down a hill: each item you pass gets folded into the growing result. reduce can compute a sum, group items by category, or even build a whole new object out of an array, which makes it worth practicing slowly and deliberately.

1const cart = [{ price: 12 }, { price: 8 }, { price: 25 }];23const total = cart.reduce((sum, item) => sum + item.price, 0);4console.log(total); // 45

Nested objects and arrays

Real-world data is rarely flat. A single object often contains arrays of other objects, which themselves contain more objects. A blog post might have an author object, a tags array of strings, and a comments array where each comment has its own author object. To reach deeply nested values you chain dot notation and bracket notation together, and you use optional chaining (?.) to safely access properties that might not exist without crashing your program. Combined with array methods, you can now express things like 'get the names of everyone who commented on posts tagged javascript' in just a few readable lines.

• array.map(fn) returns a new array with each item transformed
• array.filter(fn) returns a new array keeping only items where fn returns true
• array.reduce(fn, initial) folds the array down into one value
• array.find(fn) returns the first matching item, or undefined
• obj?.prop safely reads a property that might be missing
• Spread syntax (...) copies arrays and objects instead of mutating them

A habit worth building now is avoiding direct mutation of arrays and objects whenever you can. Methods like push, splice, and directly assigning to a property change the original data in place, which can cause confusing bugs when other parts of your code still hold a reference to that same array or object. Instead, prefer creating new arrays and objects with spread syntax: const updated = [...items, newItem] or const updatedUser = { ...user, name: 'New Name' }. This pattern, called immutability, keeps your data predictable and is the foundation for how frameworks like React track changes.

1const user = { name: "Ana", age: 29 };2const olderUser = { ...user, age: user.age + 1 };34console.log(user);       // { name: "Ana", age: 29 } unchanged5console.log(olderUser);  // { name: "Ana", age: 30 }67const numbers = [1, 2, 3];8const withFour = [...numbers, 4];

Sorting and grouping

array.sort() reorders an array in place, and by default it sorts based on string comparison, which produces surprising results for numbers (10 comes before 2). Always pass a comparator function when sorting numbers or objects: array.sort((a, b) => a.price - b.price) sorts ascending by price. Since sort mutates the original array, it's good practice to spread the array first if you need to keep the original order elsewhere: [...array].sort(...). Grouping, meanwhile, is usually done with reduce, building an object where each key is a category and each value is an array of matching items.