Intermediate⏱️ 10 min📘 Topic 7 of 13

🗂️ JavaScript Arrays & Objects — Methods You Actually Need

Practical guide to JavaScript arrays and objects — must-know methods (map, filter, reduce, find), destructuring, spread, and the difference between mutating and non-mutating methods.

Arrays and objects are the two workhorses of JavaScript data.

🟦 Arrays — ordered lists

const nums = [1, 2, 3, 4];

🟩 Objects — key-value pairs

const user = { name: 'Sam', age: 28 };

🔧 The 6 array methods you'll use daily

map — transform each item
filter — keep items that match
reduce — collapse to one value
find — first match (or undefined)
some / every — boolean checks
includes — quick contains check

⚠️ Mutating vs non-mutating

Mutates: push, pop, shift, unshift, splice, sort, reverse

Returns new: map, filter, slice, concat, toSorted, toReversed

💡 Destructuring

const [first, second] = [1, 2];
const { name, age } = user;
const { name: userName = 'Anon' } = user; // rename + default

💻 Code Examples

Transform with map + filter

const users = [
  { name: 'A', age: 25 },
  { name: 'B', age: 17 },
  { name: 'C', age: 30 },
];
const adultNames = users.filter(u => u.age >= 18).map(u => u.name);
console.log(adultNames);

Output:

['A', 'C']

Reduce — sum

const total = [10, 20, 30].reduce((acc, n) => acc + n, 0);
console.log(total);

Output:

Clone vs reference

const a = { x: 1 };
const b = a;        // same reference
const c = { ...a }; // shallow clone
b.x = 99;
console.log(a.x); // 99
console.log(c.x); // 1

Output:

99
1

⚠️ Common Mistakes

Using `forEach` when you need a return value — it always returns undefined. Use `map`.
Mutating an array with `sort()` when you only wanted to read a sorted version — use `toSorted()` or `[...arr].sort()`.
Treating spread/Object.assign as a deep clone — they're shallow only.
Comparing objects with === — it checks reference, not contents.

🎯 Interview Questions

Real questions asked at top product and service-based companies.

Q1.What's the difference between map and forEach?Beginner

map returns a NEW array with transformed items. forEach just iterates and returns undefined. Use map when you want a result; forEach for side effects.

Q2.How do you clone an object in JavaScript?Intermediate

Shallow: `{...obj}` or `Object.assign({}, obj)`. Deep: `structuredClone(obj)` (modern) or `JSON.parse(JSON.stringify(obj))` (older, but loses functions/Dates/undefined).

Q3.How does reduce work?Intermediate

`arr.reduce((acc, item) => newAcc, initial)`. It walks the array, threading an accumulator. Used for sums, grouping, flattening, building objects from arrays, etc.

Q4.What's the difference between Array.find and Array.filter?Intermediate

find returns the FIRST matching element (or undefined). filter returns ALL matching elements as a new array. find is short-circuiting; filter always traverses the whole array.

Q5.How do you check if a value is an array?Advanced

Array.isArray(value). Don't use typeof — arrays return 'object'. instanceof Array fails across iframes/realms; isArray is the safe answer.

🧠 Quick Summary

map, filter, reduce, find — 90% of array work.
Mutating methods change in place; the new `toSorted`/`toReversed` family don't.
Spread {...obj} is a shallow clone. Use structuredClone for deep.
Destructuring unpacks arrays and objects cleanly.
Use Array.isArray() to detect arrays.