Is Array.indexOf(element) !== -1 still preferred over Array.includes()

I understand that Internet Explorer and older versions of browsers don’t support it but I noticed that the Basic Data Structures section has a lesson explaining how to check if an element exists in an array with Array.indexOf() right after a lesson using the spread syntax. Is it that spread Syntax for arrays was in ES2015 and Array.includes() is an ES2016 feature or is it just that Array.includes() didn’t catch on and people don’t use it?

Probably because at the time the lesson was made people didn’t used include yet. For now I prefer to use include because the intention is clear and you can always polyfill it and a multitude of other stuff if you need to support ie/old browsers later.

Just for some fun you can actually write indexOf like this:

~[1, 2, 3].indexOf(1) //  same as [1, 2, 3].indexOf(1) !== -1

Besides being shorter and cooler, it’s probably worse because it’s even more obscure.

1 Like

I agree with you and prefer Array.includes() because it expresses intent explicitly.

As for your example, the ~ not operator just (theoretically) reverses the sign bit for numbers which just gives you -(positive number + 1) and (negative number - 1) so 0 and -1, 1 and -2, and 23 and -24 are pairs that convert to each other with the ~ operator.

The example you gave only seems to work with Array.indexOf() returning 0 because ~0 is -1
image

Although since Array.indexOf() always returns a number I should probably use != -1 instead of !== -1 since the behavior is identical with no coercion.

I made a mistake in my example that probably throws you off, it should have been // same as [1, 2, 3].indexOf(1) !== -1 and not !== 1. Sorry about that.

~ works because indexOf returns -1 when it doesn’t find the element, ~ transforms -1 to 0, and for javascript, every number is true (including negative) except 0, which is false.

if (~[1, 2, 3].indexOf(1)) // true
if (~[1, 2, 3].indexOf(4)) // false
if ([1, 2, 3].indexOf(1) !== -1) // true
if ([1, 2, 3].indexOf(4) !== -1) // false

I agree and wouldn’t use it because few developers knows about this, still, indexOf !== -1 also requires the developer to stop and think for a second on what is happening, that’s why includes is a great inclusion for the language.

I think what confused me is you didn’t have ~Array.indexOf() inside an if statement in your example so the expression can never evaluate to true or false (although it was probably implied that it was in an if statement and I didn’t realize), it evaluates to a number which if put in a if statement gets coerced.

In an if statement ToBoolean get’s called on it doing the 0 (as well as -0 and NaN) is false and other numbers are true (I looked at the spec to double check) but you probably already know this (I was familiar with the == coercion algorithm but hadn’t looked at how expressions in if statements were coerced in depth before).

I’m glad I posted this though these sorts of conversations always lead to more learning for me, thanks for showing the ~Array.indexOf() hack it’s good to know these things.