Arrays & Array Methods

10 questions found

What's the difference between map() and forEach()?

Beginner
map() returns a new array built from the return value of the callback for each element; forEach() only runs the callback for its side effects and always returns undefined.
const doubled = [1,2,3].map(n => n*2); // [2,4,6]
Real-world example Transforming an array of user objects into an array of display names.

Common follow-ups: Can you chain map() and filter() together?

Functional Programming

How does filter() work?

Beginner
filter() creates a new array containing only the elements for which the callback returns a truthy value; it doesn't mutate the original array.
const evens = [1,2,3,4].filter(n => n % 2 === 0); // [2,4]
Real-world example Filtering a product list to only show items currently in stock.

Common follow-ups: How would you filter out falsy values like 0 or an empty string?

Functional Programming

What does reduce() do and what are its arguments?

Beginner
reduce() runs a callback that accumulates a single value across the array; its callback arguments are (accumulator, currentValue, index, array), plus an optional initial value for the accumulator.
const total = [1,2,3].reduce((sum, n) => sum + n, 0); // 6
Real-world example Summing a shopping cart's item prices into a single total.

Common follow-ups: What happens if you omit the initial value on an empty array?

Functional Programming

What's the difference between splice() and slice()?

Intermediate
splice() mutates the original array by adding or removing elements in place and returns the removed elements; slice() returns a shallow copy of a portion of the array and leaves the original untouched.
const a = [1,2,3,4];
a.splice(1,2); // a is now [1,4]
const b = [1,2,3,4].slice(1,3); // [2,3], original unchanged
Real-world example splice() to remove a completed to-do item in place; slice() to grab a page of results for pagination.

Common follow-ups: Why is mutating arrays with splice() sometimes considered risky in React state?

Destructuring Spread & Rest

How do find() and findIndex() differ from filter()?

Intermediate
find() returns the first matching element (or undefined); findIndex() returns its index (or -1); filter() returns ALL matching elements as a new array, even if there's only one match.
[5,12,8].find(n => n > 10); // 12
Real-world example Finding a specific user by ID in a list, rather than filtering the whole array.

Common follow-ups: How would you find the LAST matching element instead of the first?

Functional Programming

What does Array.isArray() solve that typeof can't?

Intermediate
typeof arr returns "object" for arrays, the same as for plain objects, so it can't distinguish them. Array.isArray() correctly identifies real arrays, even across different execution contexts like iframes.
Array.isArray([1,2,3]); // true
typeof [1,2,3];         // "object"
Real-world example Validating that an API response is actually an array before calling .map() on it.

Common follow-ups: How do you check if something is "array-like" but not a true array?

Types & Coercion

How does sort() compare values by default, and how do you fix numeric sorting?

Advanced
By default sort() converts elements to strings and compares UTF-16 code units, which sorts numbers incorrectly (e.g. 10 before 2). Pass a compare function returning negative/zero/positive to sort numerically.
[10,2,33,4].sort(); // [10,2,33,4] -- wrong
[10,2,33,4].sort((a,b) => a-b); // [2,4,10,33] -- correct
Real-world example Sorting a list of prices or ages correctly requires an explicit numeric comparator.

Common follow-ups: Is Array.prototype.sort() guaranteed to be stable in modern JS engines?

Design Patterns in JavaScript

What is the difference between flat() and flatMap()?

Advanced
flat(depth) flattens nested arrays up to the given depth (default 1). flatMap() maps each element first, then flattens the result by one level — equivalent to map().flat() but computed in a single, more efficient pass.
[[1,2],[3,4]].flat(); // [1,2,3,4]
[1,2,3].flatMap(n => [n, n*2]); // [1,2,2,4,3,6]
Real-world example flatMap() to turn each order into multiple line-item records in one pass.

Common follow-ups: How would you fully flatten a deeply nested array of unknown depth?

Functional Programming

Why can array holes (sparse arrays) behave unexpectedly with iteration methods?

Advanced
Methods like forEach, map, and filter skip empty slots in sparse arrays entirely rather than treating them as undefined, which can silently produce shorter results than expected. for...of and the spread operator, however, treat holes as undefined.
const arr = [1, , 3];
arr.forEach(x => console.log(x)); // logs 1, 3 (skips the hole)
console.log([...arr]); // [1, undefined, 3]
Real-world example A bug caused by delete arr[i] leaving a hole that silently vanishes from forEach-based processing.

Common follow-ups: How do you create a hole-free array of a given length?

Iterators & Generators

How do you efficiently remove duplicate values from an array?

Advanced
Convert the array to a Set, which only stores unique values, then spread it back into an array. This is O(n) and far simpler than manually filtering with indexOf.
const unique = [...new Set([1,2,2,3,3,3])]; // [1,2,3]
Real-world example Deduplicating a list of tag IDs collected from multiple form submissions.

Common follow-ups: How would you dedupe an array of objects by a specific property?

Map Set WeakMap & WeakSet