10 Dealing with collections

This chapter introduces collections in JavaScript by starting with arrays, then expanding to maps, sets, and techniques for keeping data immutable. It emphasizes that JavaScript collections are flexible but come with important tradeoffs around performance, mutation, and how different data structures behave under the hood. Along the way, it shows how TypeScript and utility libraries can help developers write safer, cleaner collection-handling code.

Arrays are presented as the most familiar collection type, but with JavaScript-specific behavior: they can hold mixed types, grow and shrink dynamically, and return undefined for missing items instead of throwing errors. The chapter covers creation, adding and removing items from either end or anywhere in the array, and common operations such as iterating, mapping, flattening, testing conditions, searching, filtering, sorting, and reducing. It highlights when methods like for...of, map, flatMap, every, some, find, filter, sort, and reduce are useful, while also noting their limitations and performance implications.

The chapter then turns to maps and sets as more specialized alternatives to ordinary objects and arrays. Maps provide reliable key-value storage with any kind of key, while weak maps avoid memory leaks by allowing garbage collection of unreferenced object keys; sets offer fast membership checks and enforce uniqueness, with newer methods for union, intersection, difference, and subset testing. Finally, the chapter explains why immutability matters in application state, especially in React, shows how TypeScript’s read-only types can prevent accidental mutation, and demonstrates how Immer can make immutable updates feel like direct mutation while actually producing safe copied data.

Writing to an array index outside of array bounds expands the array.

The push and pop methods modify the end of an array, whereas shift and unshift modify the array’s beginning.

Deleting an item from an array creates a hole in the array.

The map function calls the provided callback function (f) on each array item, and creates a new array with callback return values.

The find function finds one item in an array: the first item for which the find callback returns true.

The filter function creates a new array that contains all items for which the callback returns true.

The reduce function applies a callback to an aggregated value and each item in an array to reduce the array to a single value.

A map is a collection of key-value pairs, where a key can be anything—even another object.

• Arrays in JavaScript are dynamic and resize automatically when new items are added.
• We can modify the contents of an array using several methods accessible from array objects:
• The built-in push and pop methods add items to and remove items from the end of the array.
• The built-in shift and unshift methods add items to and remove items from the beginning of the array.
• The built-in splice method can be used to remove items from and add items to arbitrary array positions.
• Arrays have several useful methods:
• The map method creates a new array with the results of calling a callback on every element.
• The every and some methods determine whether all or some array items satisfy a certain criterion.
• The find and filter methods find array items that satisfy a certain condition.
• The sort method sorts an array in-place.
• The reduce method aggregates all items in an array into a single value.
• Maps are collections of key-value pairs. Whereas objects can only use strings and symbols as keys, maps can use anything as a key.
• Sets are collections of distinct items. They’re effectively maps with only keys, no values.
• Mutability refers to the ability to modify (“mutate”) a collection. Immutable collections are often preferred to avoid bugs from unexpected mutations.
• Objects, arrays, maps, and sets are all mutable, but you can make them effectively immutable using TypeScript’s read-only types.
• Immer allows you to create a modified copy of an immutable collection by applying your changes to a “draft,” which works like a mutable version of that collection.

FAQ