Javascript: No more confusion — Splice vs Slice

They were built for different purposes but they look same in several scenarios. I will clear confusion first instead of dragging it to the end of the article.

Tip 1: Look at their meanings

Splice: join or connect (a rope or ropes) by interweaving the strands at the ends.

Slice: cut (something, especially food) into slices.

Ok. First I should thank Google for their meanings. Thank you, Google. 😃

Hope you got cleared to some extent.

Tip 2: Not a very intuitive tip but it is worth clearing your confusion a little more. Splice — text length is greater than the slice. Based on which remember, the splice can take more params when compared to slice. See the declaration here:

arr.splice(start, deleteCount, item1, item2, ..., itemN);

arr.slice(start, end);

Tip 3: It's a technical tip here. Splice mutates original array whereas slice won’t.

Just remember, if someone asks bread slice what would you do.

Don’t need to remember every tip. Just remember one that caught your attention.

➡️ Also, if you have remembered in another way. Please do comment.

Now, tech stuff. What do they really do?

Splice first:

It is an array method that works only on JS arrays. It removes, replaces, and/or adds new elements in the array.

mutates original array.

splice(start, deleteCount, item1, item2, ..., itemN);

start — where to start changing the array.

deleteCount— no.of elements to remove from the start and is optional.

item1, item2 and so on — to add elements to the array after the start.

splice returns removed items in an array if none then returns an empty array.

	const mainArr = ['apple', 'banana', 'mango', 'grapes', 'orange'];
	// start > mainArr.length.
	mainArr.splice(5, 1);
	> []
	// start < mainArr.length to delete on item.
	mainArr.splice(1, 1);
	> ['banana']
	mainArr
	> ['apple', 'mango', 'grapes', 'orange']
	// add banana again at same location.
	mainArr.splice(1, 0, 'banana'); // deleteCount is not optional when items are provided.
	> []
	mainArr
	> ['apple', 'banana', 'mango', 'grapes', 'orange']
	// negative offset.
	mainArr.splice(-1, 1); // orange will be removed.
	> ['orange']
	mainArr
	> ['apple', 'banana', 'mango', 'grapes']
	// no changes to array as 0 elements removed & we are not adding any items to add.
	mainArr.splice(1, 0);
	> []
	mainArr
	> ['apple', 'banana', 'mango', 'grapes']
	// remove & insert at a time.
	mainArr.splice(1, 1, 'newBanana');
	> ['banana']
	mainArr // banana removed & replaced with newBanana.
	> ['apple', 'newBanana', 'mango', 'grapes']
	// remove all items from specific index.
	mainArr.splice(2);
	> ['mango', 'grapes']
	mainArr
	> ['apple', 'newBanana']
	// remove all items.
	mainArr.splice(0);
	> ['apple', 'newBanana']
	mainArr
	> []

view raw splice.js hosted with ❤ by GitHub

➡️ I hope, the above examples covered all scenarios. If you find any more interesting scenarios, please comment. I am very much happy to update the article with your suggestion any time.

Slice now

Slices the array and returns a shallow copy.

Doesn’t mutate (alter) the original array

slice(start, end); - slice from start (including) to end (excluding) and accepts negative values.

const mainArr = ['Apple', 'banana', 'mango', 'grapes', 'orange'];

const shallowArr = mainArr.slice(1,4);
shallowArr
> ['banana', 'mango', 'grapes']

// only start index till end of the arr.
const onlyStart = mainArr.slice(3);
onlyStart
> ['grapes', 'orange']

// start greater than array length.
const startGreaterThanIndex = mainArr.slice(5);
startGreaterThanIndex
> []

// copy everything.
const copyArr = mainArr.slice();
> ['Apple', 'banana', 'mango', 'grapes', 'orange']

// with negative start and end. Negative values represents offset from end of the array.
const negativeSlice = mainArr.slice(-1);
negativeSlice
> ['orange']

const negativeRange = mainArr.slice(-3, 2);
negativeRange;
> []

const negativeRange1 = mainArr.slice(-3, -2);
negativeRange1;
> ['mango']

const negativeIndex = mainArr.slice(-4);
negativeIndex;
> ['banana', 'mango', 'grapes', 'orange']

const negativeGreaterOffset = mainArr.slice(-6);
negativeGreaterOffset;
> ['Apple', 'banana', 'mango', 'grapes', 'orange']

Similar to slice in Array, there is a slice in String as well. Which also acts in the same manner but works on strings.

Thank you. 😊

---

💎 Love to see your response

1. Like - You reached here means. I think, I deserve a like.
2. Comment - We can learn together.
3. Share - Makes others also find this resource useful.
4. Subscribe / Follow - to stay up to date with my daily articles.
5. Encourage me - You can buy me a Coffee

---

Let's discuss further.

1. Just DM @urstrulyvishwak

2. Or mention
   @urstrulyvishwak

For further updates:

Follow @urstrulyvishwak