Learn basic JavaScript Array methods: slice, split, push, pop

Arrays are basic data structures in JavaScript that allow developers to store and manipulate collections of values. JavaScript arrays come with many built-in methods that simplify common tasks such as adding, removing, and modifying elements. In this article, we will take you through slice, partition, push, shift, and some other important array methods to help you gain a deeper understanding of array manipulation.

1. slice()

The slice() method allows you to create a new array by extracting a portion of an existing array. It takes two arguments: the starting index (inclusive) and the end index of the slice (exclusive). The original array remains unchanged.

const originalArray = [1, 2, 3, 4, 5];
const slicedArray = originalArray.slice(1, 4); // [2, 3, 4]

2. splice()

The Spice() method has a dual purpose: it can be used to remove elements from an array and insert new elements into an array. It takes three or more arguments: the starting index, the number of elements to remove, and additional elements to insert.

const originalArray = [1, 2, 3, 4, 5];
originalArray.splice(2, 2); // Remove elements at index 2 and 3 => [1, 2, 5]
originalArray.splice(1, 0, 6, 7); // put 6 and 7 at index 1 and > [1, 6, 7, 2, 5]

3. push()

The push() method adds one or more elements to the end of an array and returns the new length of the array.

const originalArray = [1, 2, 3];
const newLength = originalArray.push (4, 5); // add 4 and 5 => [1, 2, 3, 4, 5]

4. pop()

The pop() method removes the last element from an array and returns that element.

const originalArray = [1, 2, 3, 4, 5];
const removedElement = originalArray.pop(); // 5 => remove [1, 2, 3, 4]

5. shift()

The shift() method removes the first element from the array and returns that element. This process also changes the pointers of the rest of the elements.

const originalArray = [1, 2, 3, 4, 5];
const removedElement = originalArray.shift(); // 1 => remove [2, 3, 4, 5]

6. unshift()

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

const originalArray = [3, 4, 5];
const newLength = originalArray.unshift(1, 2); // add 1 and 2 => [1, 2, 3, 4, 5]

7. concat()

The concat() method is used to merge two or more arrays. Returns a new array containing the combined elements of the original array.

const array1 = [1, 2];
const array2 = [3, 4];
const combinedArray = array1.concat(array2); // [1, 2, 3, 4]

8. indexOf() and lastIndexOf()

The IndexOf() method returns the first index of the given element that can be found in the array, or -1 if the element does not exist. The LastIndexOf() method works the same way, but starts searching at the end of the array.

const originalArray = [1, 2, 3, 2, 4];
const firstIndex = originalArray.indexOf (2); // 1
const lastIndex = originalArray.lastIndexOf (2); // 3

The results

Understanding and mastering JavaScript's Array methods is essential for efficient and effective Array manipulation in your application. The methods we've discussed—slice, splice, push, pop, shift, unshift, concat, indexOf, and lastIndexOf—provide powerful tools for manipulating arrays. in a different way. By adding these techniques to your coding repertoire, you will be well equipped to work with arrays in your JavaScript projects.