array.includes doesn't work when checking if an iterator exists in array

Question

I'm encountering some unexpected behavior in my JavaScript code which I'd like to understand. I want a one-line function to detect if a number exists inside an array of integers. The number being checked is the iterator of a loop in another array. I'm using the standard includes() function, should note the same happens with an indexOf() >= 0 check. For this test we have the following code:

const array1 = [0, 1, 2, 3];
const array2 = [1, 2];
for(let i in array1)
    console.log(array2.includes(i));

To my surprise each output returns false instead of the expected false true true false sequence. How can this be? I know I'm checking i not arr[i], but i still corresponds to the numbers included in those arrays: 0 is still 0, 1 is still 1, etc. Using arr.includes(1) does return true, so why not arr.includes(i) when i is also 1?

Answer 1

A for...in loops through all the keys/properties.

It is a string, not number, which comes from the bracket property accessor

const array1 = [0, 1, 2, 3];
const array2 = [1, 2];
for(let i in array1)
    console.log(typeof i, i, array2.includes(i));

A for...of loops through the values if the object is an iterable, defined by some function that I don't know off the top of my head and isn't important right now.

const array1 = [0, 1, 2, 3];
const array2 = [1, 2];
for(let i of array1)
    console.log(typeof i, i, array2.includes(i));

Also know that your for...in loop doesn't do what you seem to expect it to do when array1 isn't an incrementing integer list starting at 0:

const array1 = [6, 4, 3, 95, 45, 3, 3];
for(let i in array1)
    console.log(typeof i, i);

So what you should do is just use for...of (or Array.prototype.forEach, or a traditional for (let i = 0; i < arr.length; i++) loop, etc.) unless you need a for...in (which is almost never), or in this case I guess you can cast the string to a number before checking if it's called on Array.prototype.includes

const array1 = [0, 1, 2, 3];
const array2 = [1, 2];
for(let i in array1)
    console.log(i, array2.includes(parseInt(i)));

Answer 2

for...in loops through all properties, not values. Arrays are objects, and their properties are 0 ... array.length, so i inside the for loop is 1, 2, 3 and 4.

You should be using a for...of loop instead:

const array1 = [0, 1, 2, 3];
const array2 = [1, 2];
for(let i of array1)
    console.log(array2.includes(i));

Answer 3

You should use for..of with arrays and for..in with objects

The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object. - MDN

const array1 = [0, 1, 2, 3];
const array2 = [1, 2];
for (let i of array1) console.log(array2.includes(i));

Alternate options

You can also use forEach here to achieve the exact same result:

const array1 = [0, 1, 2, 3];
const array2 = [1, 2];
array1.forEach((val) => console.log(array2.includes(val)));