Array.slice vs Array.splice

Introduction

In the world of JavaScript and array manipulation, two methods stand out: slice and splice. These methods allow us to extract and modify elements within arrays, but they come with distinct behaviours and use cases. In this discussion, we will delve into the characteristics of Array.slice and Array.splice, examining their syntax, key properties, and practical examples. By the end of this exploration, you'll have a clear understanding of when and how to use these array methods effectively.

Array.slice()

Syntax

Array.slice(startIndex, endIndex);

Key properties

It returns a new array containing the extracted elements.
It does not mutate the original array.
It takes two arguments: startIndex(optional) and endIndex(optional).
startIndex is included while endIndex is not included.

Examples

Example-1

  let arr1 = [1, 2, 3, 4, 5];
  let newArr = arr1.slice(0, 2);
  console.log(newArr); // [ 1, 2 ]

In the above example, we copied elements from index 0 to index 1 in the newArr.

Example-2
```
  let arr2 = [1, 2, , 4, 5];
  let arrSliced = arr2.slice(0, 4);
  console.log(arrSliced); // [ 1, 2, <1 empty item>, 4 ]
```
The above array is sparse, and we use the slice method to copy elements from index 0 to 4. However, since index 2 is empty when we print the result, we'll see <1 empty item> at that index.

Example-3

  const arr3 = {
    length: 4,
    0: 2,
    1: 3,
    2: 4,
    3: 5,
  };
  console.log(Array.prototype.slice.call(arr3, 1, 3)); // [ 3, 4 ]

The object must have a length property.
The object should be integer-keyed.
These two conditions allow you to use the slice method on non-array objects.

Array.splice()

Syntax

Array.splice(startIndex, deleteCount, itemsToInsert);

Key properties

It returns a new array containing the extracted elements.
It mutates the original array.
It takes three arguments: startIndex, deleteCount(optional) and itemsToInsert(optional).
startIndex is the index from where the slicing of elements will start.
deleteCount is the number of elements to be removed.
itemsToInsert these elements will be inserted at the startIndex.

Examples

Example-1

  let arr1 = [1, 2, 3, 4, 5];
  let newArr = arr1.splice(0, 2);
  console.log(newArr); // [ 1, 2 ]
  console.log(arr1); // [ 3, 4, 5 ]

In the above example, we extracted elements from index 0 to index 1 in the newArr and arr1 got modified.

Example-2
```
  let arr2 = [1, 2, , 4, 5];
  let arrSpliced = arr2.splice(0, 4);
  console.log(arrSpliced); // [ 1, 2, <1 empty item>, 4 ]
  console.log(arr2); // [ 5 ]
```
- First of all original array will be modified.
- The above array is sparse, and we use the splice method to extract elements from index 0 to 3. However, since index 2 is empty when we print the result, we'll see <1 empty item> at that index.

Example-3

  const arr3 = {
    length: 4,
    0: 2,
    1: 3,
    2: 4,
    3: 5,
  };
  console.log(Array.prototype.splice.call(arr3, 1, 3)); // [ 3, 4, 5 ]
  console.log(arr3); // { '0': 2, length: 1 }

The object must have a length property.
The object should be integer-keyed.
These two conditions allow you to use the splice method on non-array objects.

Example-4

  let arr4 = ["Iron man", "Captain America", "Superman", "Thor"];
  let arrSpliced = arr4.splice(1, 1, "Hulk");
  console.log(arrSpliced); // [ 'Captain America' ]
  console.log(arr4); // [ 'Iron man', 'Hulk', 'Superman', 'Thor' ]

The above example showcases the use of the third argument itemsToInsert.
In this example, the element at index 1 is removed.
Hulk, which is passed as itemsToInsert argument is inserted at index 1, which is the startIndex.

Conclusion

slice and splice are both array methods used to manipulate and extract elements, but they have distinct behaviours:

Array.slice returns a new array containing extracted elements and does not mutate the original array. It takes a start index and an end index, and it is suitable for non-array objects that meet specific conditions.
Array.splice returns a new array with extracted elements but also mutates the original array. It takes a start index, an optional delete count, and optional items to insert. It's a versatile method for both removing and inserting elements in an array.

These methods are handy tools for array manipulation, but it's important to understand their differences to use them effectively in your code.

Array.slice vs Array.splice

Table of contents

Introduction

Array.slice()

Syntax

Key properties

Examples

Array.splice()

Syntax

Key properties

Examples

Conclusion