splice and slice in javascript code example

Example 1: javascript slice vs splice

var array=[1,2,3,4,5]
console.log(array.slice(2));
// shows [3, 4, 5], returned selected element(s).
 
console.log(array.slice(-2));
// shows [4, 5], returned selected element(s).
console.log(array);
// shows [1, 2, 3, 4, 5], original array remains intact.
 
var array2=[6,7,8,9,0];
console.log(array2.slice(2,4));
// shows [8, 9]
 
console.log(array2.slice(-2,4));
// shows [9]
 
console.log(array2.slice(-3,-1));
// shows [8, 9]
 
console.log(array2);
// shows [6, 7, 8, 9, 0]

Example 2: javascript slice vs splice

var array=[1,2,3,4,5];
console.log(array.splice(2));
// shows [3, 4, 5], returned removed item(s) as a new array object.
 
console.log(array);
// shows [1, 2], original array altered.
 
var array2=[6,7,8,9,0];
console.log(array2.splice(2,1));
// shows [8]
 
console.log(array2.splice(2,0));
//shows [] , as no item(s) removed.
 
console.log(array2);
// shows [6,7,9,0]
 
var array3=[11,12,13,14,15];
console.log(array3.splice(2,1,"Hello","World"));
// shows [13]
 
console.log(array3);
// shows [11, 12, "Hello", "World", 14, 15]
 
           -5 -4 -3 -2 -1
            |  |  |  |  |
var array4=[16,17,18,19,20];
             |  |  |  |  |
             0  1  2  3  4
 
console.log(array4.splice(-2,1,"me"));
// shows  [19]
 
console.log(array4);
// shows [16, 17, 18, "me", 20]

Example 3: javascript splice

let arr = ['foo', 'bar', 10, 'qux'];

// arr.splice(<index>, <steps>, [elements ...]);

arr.splice(1, 1);			// Removes 1 item at index 1
// => ['foo', 10, 'qux']

arr.splice(2, 1, 'tmp');	// Replaces 1 item at index 2 with 'tmp'
// => ['foo', 10, 'tmp']

arr.splice(0, 1, 'x', 'y');	// Inserts 'x' and 'y' replacing 1 item at index 0
// => ['x', 'y', 10, 'tmp']

Example 4: use of slice and splice add elements array

function frankenSplice(arr1, arr2, n) {
  // Create a copy of arr2.
  let combinedArrays = arr2.slice()
  //                   [4, 5, 6]

  // Insert all the elements of arr1 into arr2 beginning
  // at the index specified by n. We're using the spread
  // operator "..." to insert each individual element of 
  // arr1 instead of the whole array.
  combinedArrays.splice(n, 0, ...arr1)
  //                   (1, 0, ...[1, 2, 3])
  //                   [4, 1, 2, 3, 5, 6]

  // Return the combined arrays.
  return combinedArrays
}

frankenSplice([1, 2, 3], [4, 5, 6], 1);

Example 5: array.splice javascript

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

months.splice(0, 1);
// removes 1 element at index 0
console.log(months);
// expected output: Array ["Feb", "March", "April", "May"]