In JavaScript, arrays are one of the most commonly used data structures. They are a collection of elements, each with a unique index or key. JavaScript offers a variety of methods to work with arrays that make it easy to manipulate and transform your data.

This short series will list out some of the most commonly used array methods, grouped into three classifications (destructive, non-destructive, and static). We will also see a short example for each method to illustrate how it works.

Destructive Methods

Let’s jump right in! In this first part of the series, we will cover some of the destructive Array methods in JavaScript. These methods, also known as mutative methods, modify the original array they are called on, thus making them destructive. They are useful when you specifically want to update or alter the existing data within an array.

1. push()

The push() method is used to add elements to the end of an array. It takes one or more arguments, which represent the elements to be added.

const myArray = ['apple', 'banana', 'orange'];
myArray.push('grape');
console.log(myArray); // Output: ['apple', 'banana', 'orange', 'grape']

2. pop()

The pop() method is used to remove the last element from an array. It does not take any arguments.

const myArray = ['apple', 'banana', 'orange'];
myArray.pop();
console.log(myArray); // Output: ['apple', 'banana']

3. shift()

The shift() method is used to remove the first element from an array. It does not take any arguments.

const myArray = ['apple', 'banana', 'orange'];
myArray.shift();
console.log(myArray); // Output: ['banana', 'orange']

4. unshift()

The unshift() method is used to add elements to the beginning of an array. It takes one or more arguments, which represent the elements to be added to the array.

const myArray = ['apple', 'banana', 'orange'];
myArray.unshift('grape', 'strawberry');
console.log(myArray); // Output: ['grape', 'strawberry', 'apple', 'banana', 'orange']

5. splice()

The slice() method is used to create a new array from a section of an existing array. It takes two arguments, which represent the starting and ending positions of the section to be extracted.

const myArray = ['apple', 'banana', 'orange', 'grape', 'kiwi'];
const newArray = myArray.slice(1, 4);
console.log(newArray); // Output: ['banana', 'orange', 'grape']

If the second parameter is omitted, or if its value is greater than or equal to the number of elements after the position specified by the first parameter, then all the elements from the starting position to the end of the array will be deleted.

6. reverse()

The reverse() method is used to reverse the order of the elements in an array. It doesn’t take any arguments.

let array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array); // [5, 4, 3, 2, 1]

7. sort()

The sort() method sorts the elements of an array in place (no copy is made) and returns the reference to the original array, in sorted order. It takes one argument, which is a function that represents the order in which the elements should be sorted.

const myArray = [3, 1, 4, 2, 5];
myArray.sort((a, b) => a - b);
console.log(myArray); // Output: [1, 2, 3, 4, 5]

By default, if no function is passed, the elements in the array will be converted to strings and ordered based on their Unicode code points.

8. fill()

The fill() method is used to fill all elements in an array with a specified value. It does this by converting all of the elements in the array to a static value, from a start index (default 0) to an end index (default array.length), and returns the modified array.

let array = [1, 2, 3, 4, 5];
array.fill(0, 2, 4);
console.log(array); // [1, 2, 0, 0, 5]

This method takes three parameters:

1. the value to fill the array with.
2. A zero-based start index (optional).
3. A zero-based end index (optional).

Wrapping Up

In this part, you’ve learned about some of the destructive methods in JavaScript, along with short examples on how to use them.

Next up in this series, we’re going to cover JavaScript’s non-destructive methods.

---