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

JavaScript Program to Create Objects in Different Ways


Learn different ways to create objects using JavaScript with our step-by-step guide. From object literals to constructor functions and classes, this p...

Understanding Hoisting in JavaScript


Learn about hoisting in JavaScript: how variables and functions are moved to the top of their scope during compilation, affecting code behavior.

Differences between JavaScript Map and Object


Discover the key dissimilarities between JavaScript Map and Object. Learn how they store data, handle key collisions, and their performance trade-offs...

What is a pure function in JavaScript?


Discover what a pure function is in JavaScript and why it's important. Learn how to create and use pure functions to improve your code's reliability.

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...