DEV Community

loading...
Cover image for Difference Between SLICE and SPLICE in JavaScript

Difference Between SLICE and SPLICE in JavaScript

capscode
Rahul Nag, Founder at CapsCode | Senior Software Developer | Technical Blogger | YouTuber | Exploring and Refactoring | Photographer
・4 min read

Difference between SLICE & SPLICE in JavaScript

Hello Devs,

In this article, we will discuss what's the difference between the two most important methods of Array in JavaScript (i.e Slice and Splice)

The splice() method

  • returns the removed items in an array.

The slice() method

  • returns the selected element(s) in an array, as a new array object.

The splice() method

  • changes the original array but

slice() method

  • doesn’t change the original array.

Lets see some of the simple examples to get the small clarification.

let arr1=[1,2,3,4,5]
let arr2=[1,2,3,4,5]
arr1.splice(1,3) //returns [2, 3, 4]
console.log(arr1) //[1, 5]

arr2.slice(1,3) //returns [2, 3]
console.log(arr2) //[1, 2, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode

Lets discuss these two methods in more details.

First we will discuss the splice method in detail.

Syntax:

splice(start, deleteCount, item1, item2,... itemN)
Enter fullscreen mode Exit fullscreen mode

where,
start (required) -> where you want to start editing the array.

  • if start is not provided then empty array is returned and it will not affect the original array
  • If start is greater than length of array then start will set to length of an array.
  • If negative then it is treated as array.length-start and if now the negative value will come then treat it as 0

deleteCount(optional) -> number of element you want to delete from start index

  • if it is not provided or greater than or equal to array.length then all the element from start to end of an array is deleted.
  • If deleteCount is 0 or negative, no elements will be deleted.

  • item1, item2...itemN(optional) ->The elements to add to the array, beginning from start.

  • If you do not specify any elements, splice() will only remove elements from the array.

lets see some of examples.

let a = [1,2,3,4,5]
a.splice() //[]
console.log(a) // [1,2,3,4,5]

let a = [1,2,3,4,5]
a.splice(2) //returns [3,4,5]
console.log(a) //[1,2]

let a=[1,2,3,4,5]
a.splice(-3) //returns [3,4,5], here start is treated as array.length-start
console.log(a) //[1,2]

let a=[1,2,3,4,5]
a.splice(-7) //returns [1,2,3,4,5], here start is treated as array.length-start and this is ngative so start will now be treated as 0
console.log(a) //[]
//(an empty array)

let a=[1,2,3,4,5]
a.splice(2,9) //returns [3,4,5]
console.log(a) //[1,2]

let a=[1,2,3,4,5]
a.splice(2, 2, 'a','b','c','d') //returns [3, 4]
console.log(a) //[1, 2, "a", "b", "c", "d", 5]
//slice has removed 2 elements starting from index '2' and added the item1, item2, ...itemN at start positon

Enter fullscreen mode Exit fullscreen mode

Now lets discuss the slice method.

This method just extract the a part from an array.

Syntax:

slice(start, end)
Enter fullscreen mode Exit fullscreen mode

where,
start(required) -> starting index from where to start the extraction from an array.

  • if the value of start is negative then it is treated as arr.length-1
  • if start is undefined, slice starts from the index 0.
  • if start is greater than length of an array, then an empty array is returned.

end (optional)-> denotes till which index (excluding) you want to extract from the start,

  • If end is omitted, then its treated as array.length
  • If end is negative then it is treated as array.length-end
  • If end is non-negative & less than start, then empty array is returned
  • If end is greater than length of an array, then it is treated as array.length

Lets see some of the examples,

let arr=[1,2,3,4,5]
arr.slice() //returns [1,2,3,4,5]
arr.slice(2) //returns [3,4,5]
console.log(arr) //[1,2,3,4,5]

arr.slice(2,1) //returns []
console.log(arr) //[1,2,3,4,5]

arr.slice(2,-1) //returns [3,4], here end is treated as arr.length-1 which is 4 i.e arr.slice(2,4)
console.log(arr) //[1,2,3,4,5]

arr.slice(2,9) //[3,4,5]
console.log(arr) //[1,2,3,4,5]
Enter fullscreen mode Exit fullscreen mode

Using slice we can also convert an array like objects to an array ?
Syntax:

Array.prototype.slice.call(arguments)
Enter fullscreen mode Exit fullscreen mode

example,

let array_like_obj={
    0: 'john',
    1: 'doe',
    2: 'capscode',
    length: 3
}
console.log(Array.prototype.slice.call(array_like_obj)) 
//["john", "doe", "capscode"]
Enter fullscreen mode Exit fullscreen mode

Thank you for reading this far. This is a brief introduction of Difference between SLICE & SPLICE method on Array in JS .
If you find this article useful, like and share this article. Someone could find it useful too. If you find anything technically inaccurate please feel free to comment below.
Now you can also play around the objects in JS.

Hope its a nice and informative read for you.
VISIT https://www.capscode.in/#/blog TO LEARN MORE...

IF MY ARTICLE HELPED YOU

Buy Me A Coffee

Thanks,
@capscode

Discussion (1)

Collapse
lukeshiru profile image
LUKESHIRU

I believe by far the most important difference between the two is that Array.prototype.slice doesn't mutate while Array.prototype.splice does, making this last one generally the option you want to avoid (like any other method that does mutations on arrays). One website I tend to recommend is doesitmutate.xyz which lists all the Array methods and which ones change or not the original array :)

Cheers!