JS: Array.prototype.splice

By Xah Lee. Date: . Last updated: .

splice is the general way to add or remove elements of a array, at any index position.

splice modifies the array variable.

splice return a array of removed elements, or empty array if none removed.

Delete Tail

const uu = [0,1,2,3,4,5];

// example of array splice, 1 argument form
const result = uu.splice(2); // removed rest starting at index 2

console.log(uu); // [ 0, 1 ] the new value

console.log(result); // [ 2, 3, 4, 5 ] removed items

Delete N Items at a Index

const aa = [0,1,2,3,4,5];

// example of array splice, 2 arguments form

const returnValue = aa.splice(2,3); // start at index 2, removed 3 items

console.log(aa); // [ 0, 1, 5 ] the new value

console.log(returnValue); // [ 2, 3, 4 ] removed items

Insert Element to Array

Example of adding element to array:

const uu = [0,1,2,3,4,5];

// example of adding element to array
const rs = uu.splice(2, 0, "b"); // add "b" before index 2

console.log(uu); // [ 0, 1, 'b', 2, 3, 4, 5 ]
console.log(rs); // [] removed items
// example of adding array to array
// if you add a array, it won't be flattened

const uu = [0,1,2,3];

uu.splice(2, 0, [88,99]); // add [88,99] before index 2

console.log(uu); // [ 0, 1, [ 88, 99 ], 2, 3 ]

Replace a Slice (Delete and Add)

const uu = [0,1,2,3,4,5];

// example of array splice, 3 arguments form
const rs = uu.splice(2,3, "a");   // start at index 2, removed 3 items, add "a"

console.log(uu); // [ 0, 1, 'a', 5 ] the new value

console.log(rs); // [ 2, 3, 4 ] removed items

Splice Insert Without Nesting

if you have a function that returns a array, and you need to call a function to insert into a array but without creating a nested array. Here's how.

In ES2015, use the “spread operator” of 3 dots, which basically removes the bracket:

// array splice insert without nesting

// you have a function that returns a array.
// you need to use this function to insert elements
function addEle () { return ["a","b"]; }

// your array
const tt = [1,2,3,4];

// the index to insert at
const i = 1;

// number of element to delete before insert
const d = 0;

// insert without creating nesting
tt.splice( i, d, ... addEle());

console.log(tt);
// [ 1, 'a', 'b', 2, 3, 4 ]

pre-ES2015 version:

// array splice insert without nesting

// you have a function that returns a array.
// you need to use this function to insert elements
function addEle () { return ["a","b"]; }

// your array
const tt = [1,2,3,4];

// the index to insert at
const i = 1;

// number of element to delete before insert
const d = 0;

// insert without creating nesting
Array.prototype.splice.apply(tt, [i, d].concat(addEle()));

console.log(tt);
// [ 1, 'a', 'b', 2, 3, 4 ]

Don't use 「delete」

Warning: Don't use delete to remove elements in a array, because that creates a sparse array.

[see JS: Sparse Array]

[see JS: Delete operator]

Reference

ECMAScript® 2016 Language Specification#sec-array.prototype.slice

Array Topic

  1. JS: Array Basics
  2. JS: Understand JS Array
  3. JS: Create Array
  4. JS: Sparse Array
  5. JS: Array-Like Object
  6. JS: Array How-To

  1. JS: Array Object
  2. JS: Array.prototype
Liket it? Put $1 at patreon.

Or, Buy JavaScript in Depth