JavaScript: Slicing Arrays

Arrays in JavaScript are like containers that hold a list of items, such as numbers, strings, or objects. Sometimes, you don’t want the whole list—you just need part of it. This is where the slice() method helps. It lets you take a small piece of an array without changing the original one.

In this article, you’ll learn how to use slice() to copy parts of arrays safely and easily.

Table of Contents

What is `slice()`?

The slice() method is used to make a copy of part of an array. It doesn’t touch the original array. It simply returns the portion you ask for.

Syntax:

array.slice(start, end);

start: The index where slicing begins (included).
end: The index where slicing stops (not included).
If you skip end, it slices until the end of the array.

Basic Example

Here’s a simple example that shows how the slice() method works:

const colors = ['red', 'green', 'blue', 'yellow'];
const result = colors.slice(1, 3);

console.log(result); // ['green', 'blue']

In this example, slice(1, 3) starts at index 1 (which is 'green') and extracts elements up to, but not including, index 3 (which is 'yellow'). So, it returns 'green' and 'blue'.

Importantly, the original colors array remains unchanged.

Slicing Without an End

If you leave out the end value, the slice continues to the end of the array.

const fruits = ['apple', 'banana', 'cherry', 'date'];
const part = fruits.slice(2);

console.log(part); // ['cherry', 'date']

Slicing starts at index 2 and goes to the end. It returns ‘cherry’ and ‘date’.

Using Negative Indexes

You can also use negative numbers.
A negative index counts from the end of the array.

const nums = [10, 20, 30, 40, 50];
const lastTwo = nums.slice(-2);

console.log(lastTwo); // [40, 50]

-2 means “start from the second-to-last item” and go to the end.

Original Array Stays Safe

One big reason to use slice() is because it doesn’t change the original array.

const pets = ['cat', 'dog', 'rabbit'];
const newPets = pets.slice(0, 2);

console.log(newPets); // ['cat', 'dog']
console.log(pets);    // ['cat', 'dog', 'rabbit']

The slice() method returns a new array, but the original stays untouched.

Slicing Strings Too

You can also use slice() with strings by calling it like this:

const language = "JavaScript";
const part = language.slice(4, 10);

console.log(part); // "Script"

Note: String slice() works the same way as array slice(), but it’s a method on strings, not arrays.

When to Use `slice()`

You want a copy of part of an array
You don’t want to change the original array
You’re working with pagination, filters, or need a safe backup of data

Conclusion

The slice() method is a safe and easy way to get a piece of an array in JavaScript. It gives you a new array without changing the original one. Whether you’re working with lists, filtering data, or just trying to make a quick copy, slice() is a handy tool to know.

Keep experimenting with different examples to understand it better. The more you use it, the more natural it becomes!

What is slice()?