"Surprising results encountered when using the filter method in JavaScript Arrays

Question

"Surprising results encountered when using the filter method in JavaScript Arrays

Scenario

During a recent job interview, I was given a coding test:


var array = [1, 2, 3];
array[10] = 10;

alert(array.filter( n => n === undefined));

I confidently expected the alert to show an array with 7x undefined values, or something similar.

To my surprise, it actually displayed an empty array with a length of 0.

Mystery

This outcome is quite puzzling to me. Can anyone shed light on why this result occurred?

javascript arrays

Answer 1

Answer №1

Items that have been deleted or are uninitialized in sparse arrays will not be visited.

Array#forEach

Explanation

forEach() runs the provided callback function once for each element in the array, going through them in order from lowest index to highest. It doesn't run on indices that have been removed or are undefined (such as in 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

Items that have been deleted or are uninitialized in sparse arrays will not be visited.

Array#forEach

Explanation

forEach() runs the provided callback function once for each element in the array, going through them in order from lowest index to highest. It doesn't run on indices that have been removed or are undefined (such as in 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 3

Answer №2

If you need insight into how the internal workings of Array.prototype.filter (and other similar methods like forEach, map, reduce) operate, it can be summarized as follows (excluding boundary/corner checks):

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;
}

An important aspect to note here is the if statement within the for loop:

if (i in arr) { ... }

This condition clearly indicates that in order for array items to be 'filterable', they must be explicitly declared or initialized with a corresponding key or property associated in the arr, which may not hold true for a sparse array as mentioned in another response.

_{note: If you execute}

var array = [1, 2, 3]; array[10] = 10;

in the console, the resulting sparse array would look like this:

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

Answer 4

If you need insight into how the internal workings of Array.prototype.filter (and other similar methods like forEach, map, reduce) operate, it can be summarized as follows (excluding boundary/corner checks):

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;
}

An important aspect to note here is the if statement within the for loop:

if (i in arr) { ... }

This condition clearly indicates that in order for array items to be 'filterable', they must be explicitly declared or initialized with a corresponding key or property associated in the arr, which may not hold true for a sparse array as mentioned in another response.

_{note: If you execute}

var array = [1, 2, 3]; array[10] = 10;

in the console, the resulting sparse array would look like this:

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

Answer 5

Answer №3

The arrow function you are using as a filter is only returning undefined items, but none of your items in the array are undefined, resulting in an empty array. However, I can see where the confusion might be coming from.

array[10] = 10

This line does not set the length of the array; it sets a specific item to the value of 10. So after this line, your array will have 4 elements: 1, 2, 3, and... 10.

In an array, you can specify the index for a particular value. If you omit it, the next index will simply increment by 1. Try this:

var array = [1, 2, 3];
array[10] = 10;

array.forEach((value, index) => console.log(value, index));

If you run this code on JSFiddle: https://jsfiddle.net/eetmkd95/1/, you will see the output displayed as:

Why? Because when you don't specify the index, it increments based on +1, and if you do specify the index, it places the value at that index. Remember, you are specifying the INDEX, not the length of the array.

Now try this piece of code:

var array = [1, 2, 3];
array.length = 10;
array[8] = 10;

array.forEach((value, ix) => console.log(value, ix));
console.log(array.length);

You may notice that even though the length property reports 10, forEach only prints 4 lines. This happens because forEach only displays items with number indexes that actually exist in the array. Also, it's worth noting that the reliability of the length property can vary based on whether you set it to a lower or higher value.

To further understand this concept, consider reading "You Don't Know JS" by Kyle Simpson, specifically the "Array(..)" section on page 44 in the "Types & Grammar" book. Additionally, you may find this resource helpful:

Answer 6

The arrow function you are using as a filter is only returning undefined items, but none of your items in the array are undefined, resulting in an empty array. However, I can see where the confusion might be coming from.

array[10] = 10

This line does not set the length of the array; it sets a specific item to the value of 10. So after this line, your array will have 4 elements: 1, 2, 3, and... 10.

In an array, you can specify the index for a particular value. If you omit it, the next index will simply increment by 1. Try this:

var array = [1, 2, 3];
array[10] = 10;

array.forEach((value, index) => console.log(value, index));

If you run this code on JSFiddle: https://jsfiddle.net/eetmkd95/1/, you will see the output displayed as:

Why? Because when you don't specify the index, it increments based on +1, and if you do specify the index, it places the value at that index. Remember, you are specifying the INDEX, not the length of the array.

Now try this piece of code:

var array = [1, 2, 3];
array.length = 10;
array[8] = 10;

array.forEach((value, ix) => console.log(value, ix));
console.log(array.length);

You may notice that even though the length property reports 10, forEach only prints 4 lines. This happens because forEach only displays items with number indexes that actually exist in the array. Also, it's worth noting that the reliability of the length property can vary based on whether you set it to a lower or higher value.

To further understand this concept, consider reading "You Don't Know JS" by Kyle Simpson, specifically the "Array(..)" section on page 44 in the "Types & Grammar" book. Additionally, you may find this resource helpful:

"Surprising results encountered when using the filter method in JavaScript Arrays

Scenario

Mystery

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to replicate the Ctrl+A action on an element using jQuery or JavaScript?

What are the distinctions between altering the value of a textarea with JS and user input?

How can I substitute specific words in a string with multiple words from an array?

Accessing store state in axios plugin with Nuxt.js

Tips for fixing footer accordion overlap issues

Troubleshooting issues with NodeJS and Express authentication middleware functionality

Sharing parameters between functions in JavaScript

Ordering and displaying data with AngularJS

What can be done to stop the Datepicker from exiting the Dialog box and causing it to malfunction?

Ensuring Node.js backend JavaScript waits for completion of my bash script before proceeding

Saving a multi-dimensional array in a JSONArray on Android devices

Employ jquery to exclusively add either a beginning tag or closing tag

Including item from ajax not within $.when function finished

When utilizing String: Any, my JSON array appears to be devoid of any data

Utilizing JavaScript to capture a client's timestamp and subsequently learning how to analyze and compare different time values

How is it possible to establish dual MySQL connections to separate databases within a single Sails js model?

Text displaying as actionable icons

Steps to Execute PHP Mail Form Script After Successful Form Submission

Troubleshooting a Node.js / Express / JavaScript scope dilemma

Could you provide suggestions on how to update the content of an HTML tag within a Vue component?