slice vs splice vs split — The Way I Finally Understood Them

When I was learning JavaScript, I always got confused between slice, splice, and split.
Their names look very similar, so I kept mixing them up.

Then I understood them in a very clear and simple way — by focusing on what each parameter means and how each method works step-by-step.

So in this article, I want to explain them the same way I learned them — simple, clear, and practical.

What is a method?

A method is just a built-in function that works on a specific data type.

Examples:

Array methods → work on arrays

String methods → work on strings

So:

slice → array + string method

splice → array method

split → string method

1. slice → take a part (without changing original)

slice(startIndex, endIndex)

Parameter meaning:

startIndex → position to start taking values

endIndex → position to stop (not included)

Works on: array and string
Original data: does NOT change

Array example

let arr = [10, 20, 30, 40];

let result = arr.slice(1, 3);
console.log(result);

Explanation:

1 = startIndex → start from value 20

3 = endIndex → stop before index 3

So taken values: 20, 30

Result:

[20, 30]

Original array remains:

[10, 20, 30, 40]

String example

let str = "JavaScript";

let part = str.slice(0, 4);
console.log(part);

Explanation:

0 = startIndex → start from J

4 = endIndex → stop before index 4

So taken characters: J a v a

Result:

Java

So: slice = take part without changing original

2. splice → remove / add / replace inside array

splice(startIndex, deleteCount, items...)

Parameter meaning:

startIndex → where operation starts

deleteCount → how many items to remove

items → values to insert (optional)

Works on: array only
Original array: changes

Remove example

let arr = [10, 20, 30, 40];

arr.splice(1, 2);
console.log(arr);

Explanation:

1 = startIndex → start at 20

2 = deleteCount → remove 2 values

Removed:

20, 30

Result:

[10, 40]

Add example

let arr = [10, 40];

arr.splice(1, 0, 20, 30);
console.log(arr);

Explanation:

1 = startIndex → position after 10

0 = deleteCount → remove nothing

20, 30 = items to insert

Result:

[10, 20, 30, 40]

Replace example

let arr = [10, 20, 30, 40];

arr.splice(1, 2, 99);
console.log(arr);

Explanation:

1 = startIndex → start at 20

2 = deleteCount → remove 20, 30

99 = new value inserted

Result:

[10, 99, 40]

So: splice = change array

3. split → break string into array

split(separator)

Parameter meaning:

separator → where to cut the string

Works on: string only
Original string: does NOT change

Example

let str = "I love JavaScript";

let words = str.split(" ");
console.log(words);

Explanation:

" " = separator (space)

String is cut wherever space appears

So words are separated

Result:

["I", "love", "JavaScript"]

So: split = break string into array.

If you remember just this simple idea, you will never confuse slice, splice, and split again.

Thanks for reading!❤️

Comments

[Rajesh Royal]

I didn't knew slice works on strings too, nice reading.

[Manisha Batesar]

Glad you found it useful!

[Kai Alder]

Nice breakdown! These three tripped me up for way too long when I was starting out.

One thing that finally made splice click for me: thinking of it as "surgery on the array." You're cutting into it at a specific point, removing stuff, and optionally inserting new stuff in the same spot. slice is more like taking a photo of a section — the original stays untouched.

A gotcha worth mentioning: splice returns the removed elements as an array, not the modified array. That trips people up a lot:

let arr = [1, 2, 3, 4];
let removed = arr.splice(1, 2);
// removed = [2, 3], arr = [1, 4]

Also, negative indices work with slice which is super handy — arr.slice(-2) grabs the last two elements. I use that one all the time.