I came across an interview question as below but I could not figure out how javascript internals interprets the following code.
Can someone please explain how the JS engine is interpreting for in? Does that mean "in" is not a check for values being contained in an array?
const array = [1,2,3,4,5];
console.log(0 in array)
console.log("0" in array)
console.log(4 in [1,2,3,4,5])
console.log(4 in [1,2,3,4])in keyword in this case is a fast way to check whether the value on the right has a property given on the left.
Explanation of the examples from the question:
const array = [1,2,3,4,5];
0 in array
true
true is because the array variable contains the array object containing an element at the 0 index (the value is 1 – you can get it with array[0])
"0" in array
true
true is because the array variable contains the array object containing an element at the "0" key. JavaScript arrays are in fact objects storing elements using string property keys. Value 1 in this case is stored as a "0" property that can be also accessed by a number 0 index (as mentioned above).
4 in [1,2,3,4,5]
true
true is because the [1,2,3,4,5] array contains an element at the 4 index (value 5)
4 in [1,2,3,4]
false
false is because the [1,2,3,4] array does not contain an element at the 4 index.
Can someone please explain how the JS engine is interpreting for in?
None of those examples uses for-in, which looks like this:
for (const key in something)
They just use the in operator, which is something else entirely (though, perhaps, somewhat related).
Two things come into play in that code:
in operator checks to see if the property named on the left (the name is converted to string if needed) exists in the object on the right (on the object itself, or on any of its prototypes).Picking up on that second point, let's look at the array [1,2,3,4,5]:
+−−−−−−−−−−−−−−−+
| (array) |
+−−−−−−−−−−−−−−−+
| "length": 5 | Property name is "length", value is 5
| "0": 1 | Property name is "0", value is 1
| "1": 2 |
| "2": 3 |
| "3": 4 |
| "4": 5 |
| [[Prototype]] |−−−−>Array.prototype, which has various methods
+−−−−−−−−−−−−−−−+
Based on that information:
const array = [1,2,3,4,5];
console.log(0 in array);
in converts 0 to "0" and checks for a property with that name on array. There is one, so the result is true.
const array = [1,2,3,4,5];
console.log("0" in array);
in checks for a property called "0" property on array. There is one, so the result is true.
console.log(4 in [1,2,3,4,5]);
in converts 4 to "4" and checks for a property with that name on [1,2,3,4,5]. There is one, so the result is true.
console.log(4 in [1,2,3,4]);
in converts 4 to "4" and checks for a property with that name on [1,2,3,4]. There isn't one, so the result is false.
The conversions of numbers to strings mentioned above are per the specification, but JavaScript engines optimize arrays where possible, and if dealing with such an optimized array, it can avoid converting the number to string before doing the lookup.
If you are logging for(let i in [1,2,3,4]) you will see that only the indexes of the array will be logged. Since [1,2,3,4] has only index 3, 4 will result false, the other options are true.
Perhaps this clears it up, if we look at objects not arrays you see in is actually looking to see if a property exists in an object
const obj = { foo: "bar"}
console.log( "foo" in obj )
console.log( "bar" in obj )An array is just another type of object, which has properties that look numeric.
So your console.log(4 in [1,2,3,4]) is looking whether a property of 4 exists, not a value of 4 exists.
