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 aa = [3, 4, 5];
aa = [];
// TypeError: Assignment to constant variable.

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 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.
// 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-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 ]