Javascript Array.prototype.filter unexpected output

Question

Background

I was recently interviewed, and someone did a test for me:

var array = [1, 2, 3]; array[10] = 10; alert(array.filter( n => n === undefined)); 

I was sure that this would warn an array with 7x undefined or some of these lines.

However, it outputs an empty array, as in an array of length 0.

Question

For me this is perplexing. Can someone help me explain why this is happening?

Answer 1

Deleted or uninitialized (by sparse arrays) elements are not visited.

Array#forEach

Description

forEach() executes the provided callback once for each element present in the array, in ascending order. It is not called for index properties that have been deleted or uninitialized (i.e., on sparse arrays).

 var array = [1, 2, 3, , , , , , , , 10]; console.log(array.filter((n, i) => (console.log(i), n === undefined))); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 2

In case knowing the inside helps, Array.prototype.filter (forEach, map, shorthand also) works sort of like this (excluding border / angle checking):

 Array.prototype.filter = function(fun/*, thisArg*/) { var arr = Object(this); var len = arr.length; var res = []; for (var i = 0; i < len; i++) { if (i in arr) { var val = arr[i]; if (fun.call(thisArg, val, i, arr)) { res.push(val); } } } return res; } 

The if key in a for loop:

 if (i in arr) { ... } 

It is clear that the elements of the array must be "filtered", these elements must be explicitly declared / initialized and have key / prop bound in arr , which is not used for sparse array as indicated from another answer.

<sub> note: if you run var array = [1, 2, 3]; array[10] = 10; var array = [1, 2, 3]; array[10] = 10; in the console, the resulting sparse array looks like this:

 Array[11] 0: 1 1: 2 2: 3 10: 10 length: 11 __proto__: Array[0] 

sub>

Answer 3

The arrow function that you set is stopped because the filter returns only elements that are undefined, but none of your elements are undefined, so the result is an empty array. But I think I know where you are confused.

 array[10] = 10 

does not specify the length of the array. It sets a specific element to 10. So, after this line, you have an array with 4 elements: 1, 2, 3 and ... 10.

In an array, you can set the index for a specific value. If you omit it, it will just add 1 to the last index. Try the following:

 var array = [1, 2, 3]; array[10] = 10; array.forEach( (value, index) => console.log(value, index)); 

JSFiddle: https://jsfiddle.net/eetmkd95/1/

you will see that it prints this:

 1 0 2 1 3 2 10 10 

why? because if you do not specify an index, it will generate one based on +1 increments, if you specify, it will put your value in that index. But you specify INDEX, not length. Now try the following:

 var array = [1, 2, 3]; array.length = 10; array[8] = 10; array.forEach( (value, ix) => console.log(value, ix)); console.log(array.length); 

How can it be? the length property reports 10, and forEach prints only 4 lines? that since a) forEach only shows elements that are actually present in the array and have numeric indices, and b) the length is not very reliable. It works only for numeric indices and only if you do not set it to a higher value (it works if you set it to a lower value). Also it does not work if you use strings as indexes. For instance:

 var array = [1, 2, 3]; array['myString'] = 10; array.forEach( (value, ix) => console.log(value, ix)); console.log(array.length); 

prints:

 1 0 2 1 3 2 3 

hope i clarified a bit :)

You can understand this in detail in the Kyle Simpson series of excellent books "You Don't Know JS". The part that talks about this is in the book Types and Grammar, page 44, entitled "Array (..)"

It may also be useful: http://www.2ality.com/2012/06/dense-arrays.html