The Methods to Update an Array: Cheat Sheet

ECMAScript 2023 (ES2023 or ES14) introduces a fresh set of array instance methods to enhance the way arrays can be modified.

In total four new methods are added, toSorted() (vs sort()), toReversed() (vs reverse()), toSpliced() (vs splice()), and with (vs bracket notation). These methods use immutable operations on arrays, making it easier and more predictable to work with data without directly modifying the original array.

If you're use TypeScript, these methods are available in version 5.2.

Let's dive into these new methods, and at the same time refresh our knowledge for the existing methods.

 
/**
 * Sorts the array - by id
 * sort: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
 * toSorted: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted
 */
update('sort', (persons) => persons.sort((a, b) => a.id - b.id));
update('sort immutable', (persons) => persons.toSorted((a, b) => a.id - b.id));
 
/**
 * Reverses the array
 * reverse: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
 * toReversed: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed
 */
update('reverse', (persons) => persons.reverse());
update('reverse immutable', (persons) => persons.toReversed());
 
/**
 * Changes an element in the array
 * bracket notation
 * toSpliced: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/with
 */
update('change (bracket notation)', (persons) => {
  persons[1] = { id: 9, name: 'Updated Person' };
  return persons;
});
update('with immutable', (persons) => persons.with(1, { id: 9, name: 'Updated Person' })); // 🎉 New in ES2023 (and TS 5.2)
 
/**
 * Changes the contents of the array - remove person at index 2 and 3, add new person at index 0
 * splice: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
 * toSpliced: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed
 */
update('splice', (persons) => {
  console.log(persons.splice(2, 2)); // returns the deleted item
  console.log(persons.splice(0, 0, { id: 9, name: 'New Person' })); // returns the deleted item (empty in this case)
  return persons;
});
update('toSpliced immutable', (persons) =>
  persons.toSpliced(2, 2).toSpliced(0, 0, { id: 9, name: 'New Person' }),
); // 🎉 New in ES2023 (and TS 5.2)
 
/**
 * Removes the last element
 * pop: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop
 * slice: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
 */
update('pop', (persons) => {
  console.log(persons.pop()); // returns the deleted item
  return persons;
});
update('slice (remove last) immutable', (persons) => persons.slice(0, -1));
 
/**
 * Removes the first element
 * shift: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift
 * slice: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
 */
update('shift', (persons) => {
  console.log(persons.shift()); // returns the deleted item
  return persons;
});
update('slice (remove first) immutable', (persons) => persons.slice(1));
 
/**
 * Adds element(s) to the end of the array
 * push: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
 * concat: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
 */
update('push', (persons) => {
  console.log(persons.push({ id: 9, name: 'New Person' })); // returns the new length
  return persons;
});
update('concat immutable', (persons) => persons.concat({ id: 9, name: 'New Person' }));
 
/**
 * Adds element(s) to the start of the array
 * unshift: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift
 * toSpliced: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSpliced
 */
update('unshift', (persons) => {
  console.log(persons.unshift({ id: 9, name: 'New Person' }, { id: 10, name: 'Other New Person' })); // returns the new length
  return persons;
});
update('toSpliced immutable', (persons) =>
  persons.toSpliced(0, 0, { id: 9, name: 'New Person' }, { id: 10, name: 'Other Person' }),
);
 
/**
 * Changes all elements within a range to a static value
 * fill: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill
 * ❌: has no immutable version
 */
update('fill', (persons) => persons.fill({ id: 9, name: 'New Person' }, 2, 4));
 
/**
 * Shallow copies part of this array to another location in the same array
 * copyWithin: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin
 * ❌: has no immutable version
 */
update('copyWithin', (persons) => persons.copyWithin(1, 2, 3));
 
// Helpers
function update(description: string, updater: (original: Person[]) => Person[]) {
  const original: Person[] = initPersons();
  const updated = updater(original);
  console.log(`[${description}]`, {
    updated,
    original,
  });
}
 
function initPersons(): Person[] {
  return [
    { id: 2, name: 'Mike Johnson' },
    { id: 1, name: 'Sarah Williams' },
    { id: 5, name: 'David Wilson' },
    { id: 4, name: 'Emily Davis' },
    { id: 3, name: 'Michael Johnson' },
  ];
}
type Person = { id: number; name: string };

For additional details, check out the MDN documentation. Besides the new mutable methods, the ES2023 also added the findLast, and findLastIndex methods for an easy lookup of the last element in an array.

A runnable example can be found in the following the TypeScript Playground.

Feel free to update this developer bit on GitHub, thanks in advance!