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]

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.

Comments

[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")

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

    s.split(" ").slice(1, 4).join(" ")

This gives you a part of a sentence.

[Schemetastic (Rodrigo)]

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')

Hope it helps!