· 3 min read

Master JavaScript Array, String and Object Methods: 102 Flashcards, Mutating vs Copying

Master 102 JavaScript methods: map, reduce, splice vs toSpliced, toSorted, Object.freeze vs seal, hasOwn, padStart. Tag mutating vs copying and fix 4 cards.

Curly braces holding glowing array boxes and a wand transforming a row of beads, among floating flashcards

Studying. But it's also a video game. 🎮

Flashcards, quizzes and games that make you actually remember.

Start playing — it's free

Posted by

Most JavaScript bugs around arrays come from one question: does this method change the original, or hand you a copy? The Flip It deck JavaScript: Array, String & Object Methods (deck code QB9736, 102 cards) is a method-by-method reference: 39 Array cards, 20 Object cards, 26 String cards, then a short tail on JSON, Math and Number.

Study this deck: JavaScript: Array, String & Object Methods

1 / 10
Question

Array.push()

Knew itLearning

Tap the card for the answer · swipe right if you knew it, left if not

Ten cards from the deck

FrontBack
Array.reduce()Executes a reducer function on each element to reduce the array to a single value (left to right)
Array.splice()Changes array by removing, replacing, or adding elements in place
Array.slice()Returns a shallow copy of a portion of an array into a new array (start, end)
Array.toSorted()Returns a new sorted array without modifying the original (non-mutating)
Array.with()Returns a new array with element at given index replaced (non-mutating)
Array.at()Returns the element at the given index (accepts negative integers)
Object.seal()Prevents adding/removing properties but allows modification
Object.fromEntries()Transforms a list of key-value pairs into an object
String.padStart()'5'.padStart(3, '0') → '005'
map() vs forEach()map() returns a new array with transformed values; forEach() returns undefined

Everything the deck covers

push, pop, shift, unshift, map, filter, reduce, reduceRight, forEach, find, findIndex, findLast, findLastIndex, some, every, includes, indexOf, lastIndexOf, slice, splice, concat, join, reverse, sort, flat, flatMap, fill, copyWithin, entries, keys, values, toReversed, toSorted, toSpliced, Array.isArray, Array.from, Array.of; Object.keys, values, entries, assign, freeze, seal, create, hasOwn, getPrototypeOf, setPrototypeOf, defineProperty, getOwnPropertyDescriptor, preventExtensions, isFrozen, isSealed, isExtensible; charAt, charCodeAt, substring, substr, split, trim, trimStart, trimEnd, replace, replaceAll, match, search, startsWith, endsWith, repeat, padEnd; JSON.parse, JSON.stringify, Math.floor, Math.ceil, Math.random, Number.parseInt, Number.isNaN, Number.isInteger.

Study tip 1: tag every array method "mutates" or "copies"

The deck says in place on some backs and new array on others, but it never puts the two groups side by side. Add a tag to each card:

  • Mutates: push, pop, shift, unshift, splice, sort, reverse, fill, copyWithin.
  • Copies: map, filter, slice, concat, flat, flatMap, and the ES2023 trio toSorted / toReversed / toSpliced plus with, which are copy versions of sort, reverse, splice and index assignment.

Then review the pairs together: sort with toSorted, splice with toSpliced. Add one more card for sort, because the back leaves out its biggest trap. With no compare function, it sorts values as strings, so [10, 9, 1].sort() gives [1, 10, 9]. Write the fix on the card: (a, b) => a - b.

Study tip 2: fix four cards

  • Card 51 says Object.is() is "stricter than ===". That isn't quite right. It differs from === in exactly two cases: Object.is(NaN, NaN) is true, and Object.is(0, -0) is false.
  • Card 59 (HasOwnProperty(), with a capitalized name that isn't real) repeats card 86. Delete it, and pair card 86 with card 47, Object.hasOwn() (ES2022). hasOwn is the one to use in new code because it also works on objects created with Object.create(null).
  • Card 13 should add that includes finds NaN, while indexOf (card 14) returns -1 for it.
  • Card 98 should show the radix: Number.parseInt('08', 10).

Learn at() (cards 26 and 102) next to charAt and slice(-1). All three answer "give me the last item", and recall works better when they sit together.

Keep going

Many of these methods arrived after ES6: at and hasOwn in ES2022, the copy methods in ES2023. To place each one in its ECMAScript year, see our guide JavaScript ES6+ Features: Learn 110 Flashcards Sorted by ECMAScript Year.

Find JavaScript: Array, String & Object Methods (QB9736) in the library on Flip It.

Ready to learn faster? 🚀

Join FLIP IT for free and turn studying into a game.

Create my free account