Typescript code encountering unexpected behavior with Array.includes()

Question

Typescript code encountering unexpected behavior with Array.includes()

Below is a snippet of TypeScript code from my NextJS application:

const holeSet:any[] = [];
.....

let xx = 1, yy = 2;
holeSet.push({x:xx,y:yy});

xx = 3;
yy = 4;
holeSet.push({x:xx,y:yy});

holeSet.map((e) => {
  console.log("element ::"+JSON.stringify(e));
});

const a = 1;
const b = 2;

if (holeSet.includes({x:a.toString(),y:b.toString()}))
  console.log("Value {1;2} FOUND !");

Upon executing the code, the following output is generated:

element ::{"x":1,"y":2} element ::{"x":3,"y":4}

Despite expecting the message: Value {1;2} FOUND !

to be displayed, it doesn't appear. What am I doing incorrectly?

Could this be due to a syntax error within the if statement?

javascript arrays typescript next.js

Answer 1

Answer №1

Utilizing object literal syntax generates a fresh object. For instance, in the provided code snippet:

holeSet.push({ x: xx, y: yy });
//           ^^^^^^^^^^^^^^^^

and

if (holeSet.includes({ x: a.toString(), y: b.toString() }))
//                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

...these produce new, distinct objects.

Array.prototype.includes() utilizes same-value-zero equality to compare the first argument with each array element (referred to as the SameValueZero algorithm in the specification). Two unique objects will never be equal to each other based on that algorithm, thus... by using object literal syntax to create the first argument value when calling holeSeet.includes, it will always result in false:

holeSet.includes({ x: a.toString(), y: b.toString() })
//               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Employing a unique object for this argument will consistently return `false`

You can utilize Array.prototype.some() to check if any of the elements have the expected structure by utilizing a function that compares the property values of x and y to the expected values:

if (holeSet.some((o) => o.x === a && o.y === b))

Code in the TypeScript Playground

This will cause the condition to evaluate to true and the expected message will be displayed in the console.

Answer 2

Utilizing object literal syntax generates a fresh object. For instance, in the provided code snippet:

holeSet.push({ x: xx, y: yy });
//           ^^^^^^^^^^^^^^^^

and

if (holeSet.includes({ x: a.toString(), y: b.toString() }))
//                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

...these produce new, distinct objects.

Array.prototype.includes() utilizes same-value-zero equality to compare the first argument with each array element (referred to as the SameValueZero algorithm in the specification). Two unique objects will never be equal to each other based on that algorithm, thus... by using object literal syntax to create the first argument value when calling holeSeet.includes, it will always result in false:

holeSet.includes({ x: a.toString(), y: b.toString() })
//               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// Employing a unique object for this argument will consistently return `false`

You can utilize Array.prototype.some() to check if any of the elements have the expected structure by utilizing a function that compares the property values of x and y to the expected values:

if (holeSet.some((o) => o.x === a && o.y === b))

Code in the TypeScript Playground

This will cause the condition to evaluate to true and the expected message will be displayed in the console.

Answer 3

Answer №2

The issue occurring here is due to the way includes function operates. When comparing objects, they are compared based on reference, not value. Therefore, it is trying to determine if it is the exact same object, which it never will be. To fix this, you can utilize the following technique:

holeSet.some(e => e.x === a && e.y === b)

By using this approach, you can compare the values of each object in the array, which I believe will yield the desired outcome similar to what you expect from includes function.

Answer 4

The issue occurring here is due to the way includes function operates. When comparing objects, they are compared based on reference, not value. Therefore, it is trying to determine if it is the exact same object, which it never will be. To fix this, you can utilize the following technique:

holeSet.some(e => e.x === a && e.y === b)

By using this approach, you can compare the values of each object in the array, which I believe will yield the desired outcome similar to what you expect from includes function.

Typescript code encountering unexpected behavior with Array.includes()

Answer №1

Answer №2

Similar questions

Deactivate the signup button automatically when the user is not present, without the need to refresh

Require assistance in understanding JSON data in the form of a variable

ng-click-outside event triggers when clicking outside, including within child elements

Ways to invoke a controller function from a window listener function

Steps to temporarily turn off Backbone.sync for a fresh model and then reactivate it once the user clicks the save button

Leveraging LESS in an Angular2 component

Can a single shield protect every part of an Angular application?

"Troubleshooting issue with jQuery failing to identify PHP variable within an if

The body classList variable is inaccurately updated when making a JQuery Ajax call

Using the Unleash Feature server in a browser for React projects: A step-by-step guide

Setting up TypeScript in Jest without the need for webpack

Place the array contents inside a fresh division labeled "row" once it reaches 4 elements

Tips for creating unit tests for my Angular service that utilizes the mergeMap() function?

What is the best way to conditionally render table data in React JS using a loop?

Encountering a 404 (Not Found) error when attempting to make an API call in React JS with Azure MVC

PHP: When an Array Key is Not Defined

Tips for expanding the functionality of the d3-selection module using TypeScript

Why does the MEAN Stack continue to route using the '#' symbol in the URL?

Issue with useEffect EventListener in REACT HOOKS

Is it possible to modify the parameters of a function by utilizing a MethodDecorator without affecting the "this" value?