How to correctly use JavaScript indexOf in a date array

Question

Here is the code:

var collection = [new Date(2014, 11, 25), new Date(2014, 11, 24)];
var d=new Date(2014, 11, 24);

var idx= collection.indexOf(d);

I guess the variable idx should have a value of 1 since it is the second value in the array collection. But it turns out to be -1.

Why is that? Is there any special thing for the JavaScript Date type I need to pay attention?

Here is a snippet:

(function() {

  var collection = [new Date(2014, 11, 25), new Date(2014, 11, 24)];
  var d = new Date(2014, 11, 24);

  var idx1 = collection.indexOf(d);

  var intArray = [1, 3, 4, 5];
  var idx2 = intArray.indexOf(4);

  $('#btnTry1').on('click', function() {
    $('#result1').val(idx1);
  });

  $('#btnTry2').on('click', function() {
    $('#result2').val(idx2);
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Index:
<input type="text" id="result1" value="">
<button id="btnTry1">Find index in a date array</button>
<br />Index:
<input type="text" id="result2" value="">
<button id="btnTry2">Find index in a regular array</button>

`d` is a new instance of Date, and even though the date is the same as index 1, the objects are different, hence the result being -1. — Tristan Lee, Dec 12 '14 at 19:39
Two different instances are never equal to each other. FYI, ES6 solves this by introducing [`Array#findIndex`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex), which accepts a callback for comparison: `collection.findIndex(function(x) { return x.valueOf() === d.valueOf(); });`. — Felix Kling, Dec 12 '14 at 19:39
Related: http://stackoverflow.com/questions/8668174/indexof-method-in-an-object-array — Compass, Dec 12 '14 at 19:39

score 64 · Accepted Answer · answered Dec 12 '14 at 19:43

64

Two Objects will never be equal unless you serialise them. Lucky, Date is pretty easy to serialise as an integer.

var collection = [new Date(2014, 11, 25), new Date(2014, 11, 24)],
    d = new Date(2014, 11, 24),
    idx;

idx = collection.map(Number).indexOf(+d); // 1
//              ^^^^^^^^^^^^         ^ serialisation steps

answered Dec 12 '14 at 19:43

Paul S.

64,864
9
122
138

4

Neat! Your `map` and the `+d` are eye-opening for me. – Blaise Dec 12 '14 at 19:57
Supposing the Dates were in an array of objects like `data = [{ date: Date 2018-09-15T00:00:00.000Z, pn: 55, other: "blah" },...]` how would the map and such translate? – deadandhallowed Dec 12 '18 at 03:48

score 8 · Answer 2 · answered Dec 12 '14 at 19:43

Two different objects are never equal to each other, even if they have the same properties / values. Here is a forward looking answer to the problem:

ECMAScript 6 introduces Array#findIndex which accepts a comparison callback:

var index = collection.findIndex(function(x) { 
    return x.valueOf() === d.valueOf(); 
});

Browser support isn't great yet though.

score 2 · Answer 3 · answered Dec 12 '14 at 19:46

indexOf() won't work here... It's been well explained in the previous answers...

You'd be able to create your own lookup for the index. Here's a simple example comparing the dates using their .getTime() value...

(function() {

  var collection = [new Date(2014, 11, 25), new Date(2014, 11, 24)];
  var d = new Date(2014, 11, 24);

  var idx1 = -1;
  collection.forEach(function(item, index){
    if(d.getTime() == item.getTime())
      idx1 = index;
  });

  var intArray = [1, 3, 4, 5];
  var idx2 = intArray.indexOf(4);

  $('#btnTry1').on('click', function() {
    $('#result1').val(idx1);
  });

  $('#btnTry2').on('click', function() {
    $('#result2').val(idx2);
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Index:
<input type="text" id="result1" value="">
<button id="btnTry1">Find index in a date array</button>
<br />Index:
<input type="text" id="result2" value="">
<button id="btnTry2">Find index in a regular array</button>

score 1 · Answer 4 · answered Dec 12 '14 at 19:41

1

This is because your "d" object is the different object. In other words:

var d = new Date(2014, 11, 24);

d === new Date(2014, 11, 24); // returns false

You can try this:

var d = new Date(2014, 11, 24);
var collection = [new Date(2014, 11, 25), d];

var idx = collection.indexOf(d); // returns 1

answered Dec 12 '14 at 19:41

Seva Arkhangelskiy

685
3
12

Thanks. Now I understand why. But what is the correct way to see if a date value is contained in the array? – Blaise Dec 12 '14 at 19:42

score 1 · Answer 5 · answered Dec 12 '14 at 19:45

1

Array.prototype.indexOfDate = function(date){
   for (var i = 0; i < this.length; i++){
      if (+this[i] === +date) return i;
   };
   return -1;
};

// then 
var idx1 = collection.indexOfDate(d);

answered Dec 12 '14 at 19:45

Freez

7,208
2
19
29

How to correctly use JavaScript indexOf in a date array

5 Answers5

Linked