JavaScript arrays can be retrieved or have elements removed using the functions slice and splice. They can occasionally be difficult to understand, but we'll be going over the procedures in depth to clear things up.

slice

Technically, the word "slice" implies to cut anything into pieces. It is employed to remove objects from an array. It has no impact on the initial array.

Syntax

array.slice(start, end)

The start index of the array's slicing is indicated by the variable start.

The index at which the array stops slicing is indicated by end.

Return value

An array of the values discovered between start and finish, except the value at end, is the value returned by the slice method.

If end is not supplied, the array's length will be applied. All values starting at the start index would therefore be returned.

Example

let arr = [
  "codesolutionstuff",
  4,
  [1,3],
  {type: "bird"}
];
let slicedValues = arr.slice(1,3);
console.log(arr);
console.log(slicedValues);

The starting index is 1 and the ending index is 3, as indicated in the syntax above.

The value at arr[1] is 4. The value at arr[3] is "type: bird." These two values are separated by the values [1,3]. As a result, the subarray [4, [1,3]] would be the value returned. Keep in mind that the value at the last index is disregarded.

However, arr continues to uphold its principles.

splice

The dictionary definition of "splice" is "to bind things together." It is used to add or take away elements from an array.

Syntax

removedArray = array.splice(index, count, item1......itemN)

Removed Array : The array which stores all the removed elements that the splice() method returns

Array: The array on which splice() method is being applied

Splice: Function call to the method

Index: Starting index for the splice() method

Count: Specifies the number of items in the array to replace/remove from the starting index

Items: Items that replace the array elements from the starting index

Return value

The values that are affected, or erased, are the ones that are returned. The array would be empty if deleteCount is 0.

let arr = [
  "codesolutionstuff",
  4,
  [1,3],
  {type: "bird"}
];
let returnedArr = arr.splice(2,1,{name: "codesolutionstuff"});
console.log(arr);
console.log(returnedArr);

The initial array, arr, is changed and becomes:

[
    "codesolutionstuff",
    4,
    {name: "codesolutionstuff"},
    {type: "bird"}
]

start is 2deleteCount is 1newElem1 is {name: "codesolutionstuff"}. At arr[2], the value is [1,3]1 item is deleted from the array which is [1,3]newElem1 is then added immediately after the start. Since start is removed, newElem replaces it.

returnedArr is [[1,3]], which contains the value that was affected.

Summary

Slice returns a portion of the array but has no impact on the entire array. Splice replaces, adds, or subtracts values from the original array and then returns the modified values.

You decide when to utilize each one. Slice is the method to use if all you want to do is get a subarray; splice is the method to use if you need to change the contents of the array.


Recommended Posts

View All

What is the purpose of the array slice method


The array slice method is a powerful tool in JavaScript used to extract a section of an array and return a new array. In this article, you'll learn ab...

Learn JavaScript Closures with Code Examples


Master JavaScript closures with code examples! Our comprehensive guide explains how closures work and how to use them in your code. Start learning now...

4 Ways of Passive Income for a Programmer


Everyone wants to make extra money, but owing to time limits and jobs, we can't devote more time to it.. Find out how to become a programmer who makes...

JavaScript Program to Check if An Object is An Array


The function toString method?from Object.prototype is the best approach to determine whether an object is an instance of a given class or not.

What is JSON? Know how it Works with Examples


Learn what JSON is and how it works with examples in this comprehensive guide. Discover the basics of JSON syntax, its applications, and why it has be...