const doubled = [1,2,3].map(n => n*2); // [2,4,6]
Topics
37
ArrayBuffer, TypedArrays & Binary Data
Arrays & Array Methods
Async Iterators & Streams
Browser Storage & Web APIs
Classes & Class Syntax
Date, Time & Internationalization (Intl API)
Debugging, Testing & Tooling
Design Patterns in JavaScript
Destructuring, Spread & Rest
DOM & Events
Error Handling
ES Modules
Event Loop & Concurrency
Functional Programming
Iterators & Generators
JSON & Data Serialization
Map, Set, WeakMap & WeakSet
Memory Management & Garbage Collection
Networking: Fetch, XHR, WebSockets & CORS
Numbers, Math & BigInt
Objects, Property Descriptors & Immutability
Optional Chaining & Nullish Coalescing
Package Management, Bundlers & Transpilation (npm, Webpack/Vite, Babel)
Performance Optimization: Debouncing, Throttling & Memoization
Promises & async/await
Prototypes & Inheritance
Proxy & Reflect
Regular Expressions
Scope, Hoisting & Closures
Security: XSS, CSRF & Content Security Policy
Service Workers & Progressive Web Apps
Strings & Template Literals
Symbols & Well-Known Symbols
this & Binding
Types & Coercion
Web Components & Custom Elements
Web Workers & Multithreading
Arrays & Array Methods
10 questions found
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.
Real-world example
Transforming an array of user objects into an array of display names.
Functional Programming
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.
Functional Programming
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.
Functional Programming
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.
Destructuring
Spread & Rest
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.
Functional Programming
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.
Types & Coercion
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.
Design Patterns in JavaScript
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.
Functional Programming
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.
Iterators & Generators
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.
Map
Set
WeakMap & WeakSet