Table of contents

JavaScript Array toSpliced() Method

The JavaScript Array.toSpliced() method returns a new array with some elements removed, replaced, or added based on the specified start index and delete count. Unlike the Array.splice() method, which modifies the original array, toSpliced() returns a modified copy of the array while leaving the original array intact.

For example, array.toSpliced(start, deleteCount, item1, item2, ...) is useful when you want to modify an array non-destructively by removing or inserting elements without affecting the original array.

Syntax

The syntax for the Array.toSpliced() method is:

plaintext
array.toSpliced(start, deleteCount, item1, item2, ...)

Parameters

The Array.toSpliced() method accepts three parameters:

  • start (Required): The index at which to start modifying the array. If negative, it indicates the position from the end of the array.
  • deleteCount (Optional): The number of elements to remove from the array starting from the start index. If 0, no elements are removed.
  • item1, item2, … (Optional): The elements to be added to the array starting from the start index. If no elements are specified, toSpliced() will only remove elements.

Return Value

A new array with the specified elements removed, replaced, or added. The original array is not modified.

Examples of JavaScript Array.toSpliced() Method

Example 1: Removing Elements from an Array

You can use toSpliced() to remove elements from an array and return a new array.

javascript
const fruits = ['apple', 'banana', 'mango', 'orange'];
const newFruits = fruits.toSpliced(1, 2);
console.log(newFruits);  // Output: ['apple', 'orange']
console.log(fruits);     // Output: ['apple', 'banana', 'mango', 'orange']

Explanation: The toSpliced(1, 2) method creates a new array where two elements ('banana' and 'mango') starting at index 1 are removed. The original fruits array remains unchanged.

Example 2: Adding Elements to an Array

You can use toSpliced() to insert new elements into an array without modifying the original array.

javascript
const numbers = [10, 20, 30];
const newNumbers = numbers.toSpliced(1, 0, 15, 25);
console.log(newNumbers);  // Output: [10, 15, 25, 20, 30]
console.log(numbers);     // Output: [10, 20, 30]

Explanation: The toSpliced(1, 0, 15, 25) method adds 15 and 25 at index 1 without removing any elements, returning a new array. The original numbers array is not modified.

Example 3: Replacing Elements in an Array

You can use toSpliced() to replace existing elements in an array with new ones.

javascript
const fruits = ['apple', 'banana', 'mango'];
const newFruits = fruits.toSpliced(1, 1, 'grape', 'kiwi');
console.log(newFruits);  // Output: ['apple', 'grape', 'kiwi', 'mango']
console.log(fruits);     // Output: ['apple', 'banana', 'mango']

Explanation: The toSpliced(1, 1, 'grape', 'kiwi') method removes 'banana' at index 1 and replaces it with 'grape' and 'kiwi', returning a new array.

Example 4: Removing All Elements Starting from an Index

You can use toSpliced() to remove all elements from an array starting from a specific index.

javascript
const numbers = [1, 2, 3, 4, 5];
const newNumbers = numbers.toSpliced(2);
console.log(newNumbers);  // Output: [1, 2]
console.log(numbers);     // Output: [1, 2, 3, 4, 5]

Explanation: The toSpliced(2) method removes all elements starting at index 2 and returns a new array with the remaining elements. The original array remains unchanged.

Example 5: Using Negative Indices with toSpliced()

You can use negative indices to start modifying the array from the end.

javascript
const numbers = [10, 20, 30, 40, 50];
const newNumbers = numbers.toSpliced(-2, 1);
console.log(newNumbers);  // Output: [10, 20, 30, 50]
console.log(numbers);     // Output: [10, 20, 30, 40, 50]

Explanation: The toSpliced(-2, 1) method removes one element starting from the second-to-last element (40), returning a new array. The original array is unchanged.

JavaScript

Related Articles