DEV Community

Syed Muhammad Ali Raza
Syed Muhammad Ali Raza

Posted on

Javascript Array methods : slice ,splice , concat , push ,pop ,shift ,unshift

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (2)

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo) • Edited

Hey! Great post! Did you knew the includes() Method? Instead of using indexOf > -1 to verify if an item exist in the array, this method returns a boolean and is more semantic.

Oh! And a small tip, highlight your code is very easy, just add the language name after the first 3 backticks of the code blocks, for example:

```js
if(['highlighted', 'code'].includes('highlighted'))
console.log('Is highlighted')
```

Displays something similar to this:

if(['highlighted', 'code'].includes('highlighted'))
    console.log('Is highlighted')
Enter fullscreen mode Exit fullscreen mode

Hope it helps!

Collapse
 
efpage profile image
Eckehard

Maybe worth to mention that all this might be useful for string handling too. We often use the following pattern to substitute a replaceAll in JS (replace only preplaces the first occurance ):

    s.split("A").join("B")
Enter fullscreen mode Exit fullscreen mode

So, inbetween we generate an array that can be treated with the array methods:

    s.split(" ").slice(1, 4).join(" ")
Enter fullscreen mode Exit fullscreen mode

This gives you a part of a sentence.