JavaScript mutator methods
In JavaScript, arrays are list-like objects whose prototype has functions and methods to perform bulk operations, mutations, and traversals. Arrays in JavaScript are dynamic and can contain a collection of elements of mixed types including strings, numbers, and objects:
const mixedTypes = [‘Martins’, ‘🐮’, ’Sam’, [1, 2, 3], { name: ‘David’ } ];
Arrays in JavaScript only use numbers as element index. One thing to note about arrays in JavaScript is that they aren’t dense data structures. Instead, the length of the array can be changed at any time, and data can be stored at non-contiguous locations in the array (as opposed to statically typed languages where the length and element type is defined on initialization).
Mutator methods
These methods modify the array.
push
The array push method in JavaScript appends a specified element to the end of the array. It takes one parameter and then argument passed is and added to the end of the array:
const barn = ['🐮', '🐑', '🐔'];barn.push('🐰')console.log(barn) // ['🐮', '🐑', '🐔', '🐰']
unshift
Unlike the push method, the unshift method is used to add an element to the beginning of an array. It takes one parameter as well, the element to insert at the start of the array:
const barn = ['🐮', '🐑', '🐔'];barn.unshift('🐶')console.log(barn) // ['🐶' '🐮', '🐑', '🐔',]
pop
Sometimes, we decide to remove the most recently added element from the end of an array. The pop method removes the last element in an array – it follows the LIFO (Last In First Out)method:
const barn = ['🐮', '🐑', '🐔', '🐶'];barn.pop();console.log(barn) // ['🐮', '🐑', '🐔']
shift
We can equally remove elements from the beginning of an array (FIFO method). The shift method takes no argument and removes the first element in the array.
const barn = ['🐮', '🐑', '🐔', '🐶'];barn.shift();console.log(barn) // ['🐑', '🐔', '🐶']
reverse
The reverse methods reverses the order of the elements of an array in place (first becomes the last, last becomes first). This method accepts no argument.
const barn = ['🐮', '🐑', '🐔', '🐶'];barn.reverse();console.log(barn) // ['🐶', '🐔', '🐑', '🐮',]
sort
The array sort function sorts the elements of an array (in place) and returns the sorted array – it modifies the initial array. In the example below, the sort method on the array is used to arrange the elements in alphabetical order.
const barn = ['b', 'm', 'c', 'a'];barn.sort();console.log(barn) // ['a', 'b', 'c', 'm']
copyWithin
The copyWithin method does a shallow copy of array elements at one specified index into another specific index. The copied values replace the values previously existing in that location. To understand this look at the following example.
Given an array of numbers [1, 2, 3, 4, 5]:
- Element
1is at index 0. Element4is at index 3. If we call thecopyWithin(…)function on the array to replace the element at index 0 with the element at index 3, we would get: [4, 2, 3, 4, 5].
const alpha = ['a', 'b', 'c', 'd', 'e'];console.log(alpha.copyWithin(0, 3, 4));console.log(alpha.copyWithin(1, 3));
fill
The fill method changes all elements in an array with a specified value from one specific index to another, not including the end index. Here’s an analogy, given the barn variable:
If we ran out of cows and sheep and decided to raise rabbits in their place, we would need to fill up the space in the barn that was formerly occupied by cows and sheep with rabbits.
arr.fill(value, start, end)
const barn = ['🐮', '🐑', '🐔'];barn.fill('🐰', 0, 2);console.log(barn);
splice
The splice method inserts an element into an array at a specific index. It takes 3 arguments. The first argument (start) is the position (index) to start the insertion of the element, the second argument (deleteCount) is the number of elements to replace/delete from the start index. If set to 0, no element is removed or deleted, the new element is just inserted into the specified position.
const barn = ['🐮', '🐑', '🐔'];barn.splice(1, 0, '🐰');console.log(barn);
Mutator methods, iteration methods, and accessor methods are the most common array methods in Javascript. You can use most of them in practical terms, others you can use together to perform complex data manipulation on JavaScript array objects.
You can find all the examples used here.
