I know indexOf cannot be used in an array of objects, e.g. below.
const objs = [
{name: 'darling', age: 28},
{name: 'eliot', age: 29}
]
console.log(objs.indexOf({ name: 'eliot', age: 29 })) // print -1
However, why DOM element array index can be traced by indexOf??
e.g. below
document.getElementById('slides').addEventListener('click', function (e) {
const nodes = document.querySelectorAll('#slides > .slide')
const newNodes = [...nodes]
console.log(newNodes);
console.log(newNodes.indexOf(e.target)) // can print out the index
})
Every time the interpreter comes across an object literal when it runs a line - for example:
const objs = [
{name: 'darling', age: 28},
{name: 'eliot', age: 29} // this line
]
or
console.log(objs.indexOf(
{ name: 'eliot', age: 29 } // this line
))
It creates a new object with those properties. They aren't the same.
console.log(
// two separate objects, which happen to contain the same value
{ foo: 'foo' } === { foo: 'foo' }
);In contrast, when looking up nodes in the DOM, the nodes are generally static - they don't change unless JavaScript runs which explicitly does so. The e.target refers to one such static node, and querySelectorAll returns a collection of such static nodes.
So they're ===, and .indexOf works.
Consider the following behavior:
const element = { foo: 1 };
const arr = [{ foo: 1 }, { foo: 2 }, element];
console.log(arr.indexOf({ foo: 1 })); // -1
console.log(arr.indexOf(element)); // 2
console.log(arr.indexOf(arr[0])); // 0It clearly demonstrates how indexOf matches the reference to an object, rather than an object with the same keys and values.
For one { name: 'eliot', age: 29 } is a new object and hence not found in your array
So you can find an object if it is the actual same object
Otherwise look for it by the value of one or more of the entries
const objs = [
{name: 'darling', age: 28},
{name: 'eliot', age: 29}
]
const objToFind = objs[1]
console.log(objs.indexOf(objToFind))
// find the index by name
const idxOfEliot = objs.findIndex(({name}) => name==="eliot")
console.log(idxOfEliot)