Array Push uses the same index for the same value in JavaScript

Question

I just found out that using the function array.push(value) using the same value name, will give the same index of the first item with the same value name.

Look at the example code following:

<p>Click the button to add a new element to the array.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

function myFunction() {
    fruits.push("Orange");
var orange_index = fruits.indexOf("Orange");
document.getElementById("demo").innerHTML = orange_index;
}
</script>

If you run it, you will notice that the answer is "1" , that corrisponds to the first "Orange" item inserted into the array.

How can I avoid this behaviour ? I need to insert the same values into an array with different indexes.

Do I need to use multidimensional array ? I have a deck of cards, and I need to store the ranks and suits in array. So far I created two different arrays for ranks and suits, but I'm having this problem. I retrieve the ranks and suits separately, should I push them together into a new multidimensional array? how ?

Thanks

This is how your code looks jsfiddle.net/40vsmeyt. Let me know what you are trying — rajuGT
– rajuGT, Commented Sep 18, 2015 at 18:36
push returns the new length of the array so the index of the item is just the (length-1) — epascarello
– epascarello, Commented Sep 18, 2015 at 19:12

Zakaria Acharki · Accepted Answer · 2015-09-18 18:44:33Z

1

Example fiddle.

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

Your array looks like following after you clicking in button :

["Banana", "Orange", "Apple", "Mango", "Orange"]

So when you try :

var orange_index = fruits.indexOf("Orange");

That will return the first index of Orange like you saw in description, so normally it will return 1.

edited Sep 18, 2015 at 18:44

answered Sep 18, 2015 at 18:38

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Zakaria Acharki Over a year ago

How do you expect from the javascript to know that you mean second Orange and not the first ?

myh34d Over a year ago

You're completely right. So how can i solve this problem ? If you check the last part of my question, I explain my real problem

Zakaria Acharki Over a year ago

Ok please try to update your question and clarify more with an example ?

myh34d Over a year ago

I'll create a new question because I changed the way I was doing it; I'm using objects now and actually I need to find that index. Thank you anyway.

RealWorldCoder · Accepted Answer · 2015-09-18 18:54:34Z

1

Use .lastIndexOf() instead of .indexOf(), and it will get the last (most recently added) one instead of always the first.

Fiddle

edited Sep 18, 2015 at 18:54

answered Sep 18, 2015 at 18:43

RealWorldCoder

1,0211 gold badge10 silver badges17 bronze badges

8 Comments

Zakaria Acharki Over a year ago

How you expect that he want always the last.

RealWorldCoder Over a year ago

Assuming op is able to grasp the concept of distinct values to keep the integrity of the array. If not, I would then suggest keeping the array values distinctive, but this would need to be done using more functionality. Op didn't clarify, he just wanted the index of the most recently added item.

myh34d Over a year ago

I'm sorry I didn't specify it, but I don't need the last index item. (anyway thanks for the suggestion, It will be useful in the future) . I explained the real problem in the last part of the question

RealWorldCoder Over a year ago

@koo27 Then you may want to consider creating your own push function that will remove existing values with the same name before appended to the array.

myh34d Over a year ago

@RealWorldCoder actually I can't remove the other existing values with the same name, because they represent a deck of cards. So I think I may use a multidimensional array with ranks and suits, am I right ?

|

Collectives™ on Stack Overflow

Array Push uses the same index for the same value in JavaScript

2 Answers 2

4 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related