JavaScript: Array.prototype.splice

Clear All

arrayX.splice(0)

const xx = [3, 4, 5];
xx.splice(0);
console.log(xx.length === 0);

Note, it's different from simply assign it a new empty array such as

arrayX = []

Because that gives the variable arrayX a new value.

This is important when you use const to declare the variable.

const xx = [3, 4, 5];
xx = [];
// TypeError: Assignment to constant variable.

Delete Tail

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

// example of delete tail of array
// removed rest starting at index 2
const yy = xx.splice(2);

// array is modified
console.log( JSON.stringify( xx ) === "[0,1]" );

// removed items
console.log( JSON.stringify( yy ) === "[2,3,4,5]");

Delete N Items at a Index

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

// example of array splice, 2 arguments form

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

// the new value
console.log(JSON.stringify(xx) === "[0,1,5]");

// removed items
console.log(JSON.stringify(yy) === "[2,3,4]");

Insert Element to Array

Example of adding element to array:

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

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

console.log(JSON.stringify(xx) === `[0,1,"b",2,3,4,5]`);

// removed items
console.log(JSON.stringify(yy) === "[]");

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

/*
example of adding array to array
if you add a array, it won't be flattened
add [88,99] before index 2
 */
xx.splice(2, 0, [88, 99]);

console.log(JSON.stringify(xx) === "[0,1,[88,99],2,3]");

Replace a Slice (Delete and Add)

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

/*
example of array splice, remove some, add some
start at index 2, removed 3 items, add "a"
*/
const yy = xx.splice(2, 3, "a");

// the new value
console.log( JSON.stringify( xx ) === `[0,1,"a",5]` );

// removed items
console.log( JSON.stringify( yy ) === "[2,3,4]");

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 JS2015, 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.
const ff = ((x,y) => [x,y]);
// you need to use this function to insert elements

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

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

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

// insert without creating nesting
xx.splice(xstart, xdeleteN, ...ff("a","b"));

// check
console.log( JSON.stringify( xx ) === `[1,"a","b",2,3,4]`);

pre-JS2015 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 ]