How to Get Elements between Indexes in Javascript Array?

If you want to be a good programmer, you have to learn how to use the array. Almost every JavaScript project will need to use and change arrays with different types of elements.

You might need to get a range of elements from an array, which is an operation. Here’s how to get the elements in a JavaScript array between two indexes.How to Get Elements between Indexes in Javascript Array?

It is easy to get the elements in an array between two indexes. This process is also called getting a “range” of things. We will use the slice prototype as the answer to this problem.

Solution: Slice Prototype

var YourArray = ['a','b','c','d','e','f','g','h','i','j'];
var ArrayRange = YourArray.slice(0, 3);

//Output: ["a", "b", "c"]

Our answer uses a built-in prototype for an array called a slice. Slice can take two indexes and return an array of all the elements that fall between those two indexes.

In our example, we give it a starting with index 0, which is where we will start adding elements. Our end value in index 3 is where we’ll start leaving out values.

Notice that it only counts up to the end index and not past it. In our example, this means that the return indexes will be 0, 1, and 2 for A, B, and C.

If we wanted to retrieve D, E, and F, our code would look like this:

var YourArray = ['a','b','c','d','e','f','g','h','i','j'];
var ArrayRange = YourArray.slice(3, 6);

//Output: ["d", "e", "f"]

The slice method can also work with a single start value or a value that is negative. Let’s look at a couple of examples.

var YourArray = ['a','b','c','d','e','f','g','h','i','j'];
var ArrayRange = YourArray.slice(6);

//Output: ["g", "h", "i", "j"]

A single positive value sets the starting index, and everything from that point to the end of the array is printed.

var YourArray = ['a','b','c','d','e','f','g','h','i','j'];
var ArrayRange = YourArray.slice(-2);

//Output: ["i", "j"]

With just one negative value, the array will be moved and the output values will start from the end.

var YourArray = ['a','b','c','d','e','f','g','h','i','j'];
var ArrayRange = YourArray.slice(0, -2);

//Output: ["a", "b", "c", "d", "e", "f", "g", "h"]

If the end index was set to a negative number, we will move the end and add everything except the last two values.

Caveats: The Reference Problem

One important thing to know is that the slice operation does not change the original array. It will copy only the references to the elements into a new array.

If you work with Strings, Numbers, or Boolean values in your original array, everything works as you would expect.

But if you are working with an array of objects, the same reference will be used for both arrays. If you change an item in the original array, it will also change in your sliced array.

Let’s look at a real-world example:

var YourArray = [{id: 'a'},{id: 'b'},{id: 'c'}]
var ArrayRange = YourArray.slice(0, 2);
console.log(ArrayRange)
YourArray[1].id = 'what?'
console.log(ArrayRange)

//Output [{id: "a"},{id: "b"}]
//Output [{id: "a"},{id: "what?"}]

Notice that those whose id values we changed in our original array also changed in our new array.

This may seem like a strange thing to do. If you know that your original array won’t change, this might not be a problem. However, if your original array might change, this reference problem can make it hard to find bugs.

Here’s how to get around this problem:

var YourArray = [{id: 'a'},{id: 'b'},{id: 'c'}]
var ArrayRange = JSON.parse(JSON.stringify(YourArray.slice(0, 2)));
console.log(ArrayRange)
YourArray[1].id = 'what?'
console.log(ArrayRange)

//Output [{id: "a"},{id: "b"}]
//Output [{id: "a"},{id: "b"}]

To avoid the reference problem, we just use the JSON stringify and parse methods to make a copy of the array.

This will give us a new array that has no links to the first one. This cloning operation can be done in a number of different ways.