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);
YourArray[1].id = 'what?'

//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)));
YourArray[1].id = 'what?'

//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.



Related articles

How to get million views on youtube?

To get a million views on YouTube, you will...

Can I create a custom dashboard in react?

Yes, you can create a custom dashboard in React....

All You Need to Know About Xbox 360 Backward Compatibility

The Xbox 360 works well with some games that...

How to Check if an Array has More than One Element in PHP?

An array is a group of data structures. In...

Learn How to Select All in VIM?

Now is the time to improve your VIM skills...
Peter Graham
Peter Graham
Hi there! I'm Peter, a software engineer and tech enthusiast with over 10 years of experience in the field. I have a passion for sharing my knowledge and helping others understand the latest developments in the tech world. When I'm not coding, you can find me hiking or trying out the latest gadgets.


Please enter your comment!
Please enter your name here