A solution for Array.includes to handle NaN values

Question

A solution for Array.includes to handle NaN values

While browsing some Javascript blogs, I stumbled upon the Array prototype methods .indexOf and .includes. I noticed that if an array includes NaN as a value, indexOf may not be able to detect it, leaving us with the option of using .includes. However, considering that includes is not supported by IE, what can be used as an alternative method to check for NaN? I considered creating a polyfill using the guidance provided here

if (Array.prototype.includes) {
  Object.defineProperty(Array.prototype, "includes", {
    enumerable: false,
    value: function(obj) {
        var newArr = this.filter(function(el) {
          return el == obj;
        });
        return newArr.length > 0;
      }
  });
}

var arr = [NaN];
console.log(arr.includes(NaN));

However, the output is still false. Are there any other alternatives available? Am I overlooking something?

javascript arrays nan polyfills

Answer 1

Answer №1

If you want to ensure compatibility for Number.isNaN, you can add a polyfill for it and then incorporate it into your filter test. This way, if both the obj and el values pass the Number.isNaN check, you can return true:

Number.isNaN = Number.isNaN || function(value) {     
    return value !== value;
}

// if (!Array.prototype.includes) {
  Object.defineProperty(Array.prototype, "includes", {
    enumerable: false,
    value: function(obj) {
        var newArr = this.filter(function(el) {
          return el == obj || Number.isNaN(el) && Number.isNaN(obj);
        });
        return newArr.length > 0;
      }
  });
// }

var arr = [NaN];
console.log(arr.includes(NaN));

Answer 2

If you want to ensure compatibility for Number.isNaN, you can add a polyfill for it and then incorporate it into your filter test. This way, if both the obj and el values pass the Number.isNaN check, you can return true:

Number.isNaN = Number.isNaN || function(value) {     
    return value !== value;
}

// if (!Array.prototype.includes) {
  Object.defineProperty(Array.prototype, "includes", {
    enumerable: false,
    value: function(obj) {
        var newArr = this.filter(function(el) {
          return el == obj || Number.isNaN(el) && Number.isNaN(obj);
        });
        return newArr.length > 0;
      }
  });
// }

var arr = [NaN];
console.log(arr.includes(NaN));

Answer 3

Answer №2

Array#includes utilizes the Same-Value-Zero concept, distinct from the == operator.

The Same-Value aspect is explained in Object.is(), allowing manual checking for -0 and +0 to address the "Zero" component of the evaluation.

While the linked resource provides a polyfill, it alters the treatment of -0 and +0, which isn't ideal for a Same-Value-Zero algorithm. Consequently, following a more simplified approach is recommended:

function SameValueZero(x, y) {
    return x === y || (x !== x && y !== y);
}

Answer 4

Array#includes utilizes the Same-Value-Zero concept, distinct from the == operator.

The Same-Value aspect is explained in Object.is(), allowing manual checking for -0 and +0 to address the "Zero" component of the evaluation.

While the linked resource provides a polyfill, it alters the treatment of -0 and +0, which isn't ideal for a Same-Value-Zero algorithm. Consequently, following a more simplified approach is recommended:

function SameValueZero(x, y) {
    return x === y || (x !== x && y !== y);
}

Answer 5

Answer №3

To locate the position of the NaN in an array, you can utilize the method findIndex. Here is an example of how you can achieve this:

var arr = [NaN];
let index = arr.findIndex(Number.isNaN)
console.log(index >= 0);

Answer 6

To locate the position of the NaN in an array, you can utilize the method findIndex. Here is an example of how you can achieve this:

var arr = [NaN];
let index = arr.findIndex(Number.isNaN)
console.log(index >= 0);

A solution for Array.includes to handle NaN values

Answer №1

Answer №2

Answer №3

Similar questions

Differences between using a getter in Vue.js/Vuex compared to directly accessing state values on the create lifecycle hook

Instructions for setting a cookie to conceal a notification bar upon the second page load

What could be causing Node Pdfkit to sometimes generate a corrupted file within my code?

A guide on extracting data from an uploaded JSON file in a React and Next.js application

What is the best way to dynamically load content with AJAX that includes a script?

Exploring the utilization of type (specifically typescript type) within the @ApiProperty type in Swagger

Halting the HTML-Embedded Video

What could be the reason for the failure to inject Angular Bootstrap?

Using Chrome.downloads.download within a Chrome application

Updating object values within a while loop using JavaScript

Error with SwitchMap on ActivatedRoute.paramMap

Managing the state of dynamically generated tabs within a NextJS application

Instructions for utilizing img.shape() in Javascript

Sending parameters in GraphQL with Typescript results in an empty set of curly braces being returned

Exploring the syntax of ReactJS state management with setState

Combining outcomes from two separate jQuery AJAX requests and implementing deferred/promise functionality

Having trouble with Node.js GET request functionality not functioning properly

Troubleshooting an Ajax Error

OBJ and MTL Loaders from Three.js are not being continuously invoked

The state value is not preserved after redirecting to another page