Debunking Array.toSpliced: Alternatives for Safe Array Manipulation in JavaScript


  • Functionality

    1. It removes deleteCount number of elements starting from the start index of the original array.
    2. If new elements are provided, it inserts them at the start index.
    3. Finally, it returns a new array containing the removed elements. (Important
      The original array is modified!)
    • start: The index at which to start removing/replacing elements (defaults to 0).
    • deleteCount: The number of elements to remove (defaults to all elements from start).
    • item1, item2, ...: Optional new elements to insert at the specified index.
const fruits = ["apple", "banana", "orange", "mango"];
const removedFruits = fruits.splice(1, 2, "kiwi", "grape");  // Remove banana and orange, insert kiwi and grape

console.log(fruits); // Output: ["apple", "kiwi", "grape", "mango"]
console.log(removedFruits); // Output: ["banana", "orange"]


Removing elements

const colors = ["red", "green", "blue", "purple", "yellow"];

// Remove the element at index 2 (which is "blue")
const removedColor = colors.splice(2, 1);

console.log(colors); // Output: ["red", "green", "purple", "yellow"]
console.log(removedColor); // Output: ["blue"]

Removing elements from a specific index to the end

const numbers = [1, 2, 3, 4, 5];

// Remove elements from index 2 (which is 3) to the end
const removedNumbers = numbers.splice(2);

console.log(numbers); // Output: [1, 2]
console.log(removedNumbers); // Output: [3, 4, 5]

Replacing elements

const animals = ["cat", "dog", "bird", "fish"];

// Replace "bird" with "snake" at index 2
animals.splice(2, 1, "snake");

console.log(animals); // Output: ["cat", "dog", "snake", "fish"]

Inserting elements

const letters = ["a", "c", "e"];

// Insert "b" and "d" at index 1
letters.splice(1, 0, "b", "d");

console.log(letters); // Output: ["a", "b", "d", "c", "e"]
const tools = ["hammer", "wrench", "screwdriver"];

// Remove "wrench" and insert "pliers" and "saw" at index 1
const removedTool = tools.splice(1, 1, "pliers", "saw");

console.log(tools); // Output: ["hammer", "pliers", "saw", "screwdriver"]
console.log(removedTool); // Output: ["wrench"]


Using slice() for Copying a Sub-section

If your goal is to create a new array containing a portion of the original array without modifying the original, you can use the slice() method.

const originalArray = [1, 2, 3, 4, 5];
const copiedArray = originalArray.slice(1, 4); // Copies elements from index 1 (inclusive) to 4 (exclusive)

console.log(originalArray); // Output: [1, 2, 3, 4, 5] (original remains unchanged)
console.log(copiedArray); // Output: [2, 3, 4]

Using the Spread Operator (...) for Copying the Entire Array

The spread operator (...) can be used to create a shallow copy of the entire array.

const originalArray = [10, 20, 30];
const copiedArray = [...originalArray];

console.log(originalArray); // Output: [10, 20, 30]
console.log(copiedArray); // Output: [10, 20, 30] (a new copy)

Using concat() for Combining Arrays

concat() allows you to create a new array by merging the original array with other elements or arrays.

const numbers = [1, 2, 3];
const letters = ["a", "b"];
const combinedArray = numbers.concat(letters);

console.log(numbers); // Output: [1, 2, 3] (original remains unchanged)
console.log(combinedArray); // Output: [1, 2, 3, "a", "b"]