Skip to main content

JavaScript Arrays

JavaScript Array slice and splice

Written by Published

JavaScript slice copies part of an array, while splice changes the array in place.

The names look alike but they behave very differently.

slice leaves the original alone; splice does not.

Example

Example

javascript

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

console.log(list.slice(1, 3).join(","));
console.log(list.length);

The copy holds 2,3.

The original still has five elements.

slice and splice

slice(start, end) returns a new array from start up to but not including end.

splice(start, count, ...items) removes count elements and can insert new ones.

The easiest way to remember: slice copies.

Syntax

Syntax

javascript

array.slice(start, end);
array.splice(start, count, item);

In slice, the end index is not included.

slice Copies

The original array is never changed.

Example

Example

javascript

const list = ["a", "b", "c", "d"];
const part = list.slice(1, 3);

console.log(part.join(","));
console.log(list.length);

The copy holds b,c and the original still has four elements.

slice with Negative Numbers

Negative values count from the end.

Example

Example

javascript

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

console.log(list.slice(-2).join(","));

The output is 4,5, the last two elements.

Copying a Whole Array

slice() with no arguments is a quick way to copy an array.

Example

Example

javascript

const original = [1, 2, 3];
const copy = original.slice();

copy.push(4);

console.log(original.length);

The original is untouched.

splice Removes

The second argument is how many elements to remove.

Example

Example

javascript

const list = ["a", "b", "c", "d"];

list.splice(1, 2);

console.log(list.join(","));

Two elements were removed, leaving a,d.

splice Inserts

Anything after the count is inserted at that position.

Example

Example

javascript

const list = ["a", "d"];

list.splice(1, 0, "b", "c");

console.log(list.join(","));

A count of 0 means nothing is removed, only inserted.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript slice and splice</title>
</head>
<body>

  <h1>JavaScript slice and splice</h1>

  <p id="result"></p>

  <script>
    const list = ["a", "b", "c", "d", "e"];
    const copy = list.slice(1, 4);

    list.splice(0, 2);

    document.getElementById("result").innerHTML =
      "Copy: " + copy.join(",") + "<br>Original after splice: " + list.join(",");
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try inserting instead:

Change the splice to list.splice(1, 0, "x") and see where x appears.

Important Points

  • slice returns a copy and never changes the original.
  • The end index of slice is not included.
  • Negative indexes count from the end.
  • splice changes the array in place.
  • splice can remove, insert, or do both at once.

Conclusion

slice and splice look similar but sit on opposite sides of a key line.

One copies, the other modifies, and mixing them up causes real bugs.

Understanding both lets you take pieces of a list safely.