DEV Community

Magima Felix O
Magima Felix O

Posted on

Help with includes() in js

#filter #includes 
 ANY HELP WITH JAVASCRIPT includes() function
Enter fullscreen mode Exit fullscreen mode 
const formA = [
    {id:37,name:'New',another:'things'},
    {id:31,name:'Old',another:'things'},           
    {id:3,name:'Oldest',another:'things'}
 ];

 const formB = [
    {id:37,name:'New',another:'things'},
   {id:31,name:'Old',another:'things'},          
   ];

   const difference = formA.filter(x => !formB.includes(x.name))
   console.log(difference);
Enter fullscreen mode Exit fullscreen mode

would someone kindly explain to me how includes() method works?
i was expecting____ [{id:3,name:'Oldest',another:'things'}] as output

but instead getting.

//__________output
[
{ id: 37, name: 'New', another: 'things' },
{ id: 31, name: 'Old', another: 'things' },
{ id: 3, name: 'Oldest', another: 'things' }
]

Top comments (8)

Collapse
 
vonheikemen profile image
Heiker • • Edited

Let's just say that Array.includes is making a "shallow comparison". What is happening is that you're comparing an object against a string. Imagine something like this.

'Oldest' === ({ id:3, name:'Oldest', another:'things' })
Enter fullscreen mode Exit fullscreen mode

If you try that it would return false.

Array.includes doesn't try to find the string inside the object it, just compares the whole item in the array against your argument.

If I were to try implement Array.includes as a function it would be like this.

function includes(array, search) {
   for(const item of array) {
      if(item === search) {
         return true;
      }
   }

   return false;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
magimart profile image
Magima Felix O •

i have to look into this approach, thank you very much for the response

Collapse
 
vonheikemen profile image
Heiker •

Actually I was just trying to explain how Array.includes works.

What would solve your problem is to transform formB into an array of names before using formA.filter. Like this.

const formBNames = formB.map((x) => x.name);

const difference = formA.filter((x) => !formBNames.includes(x.name));
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
magimart profile image
Magima Felix O •

thank your very much for your kind efforts, i tried it like you stated already but got got a desirable result. i used a set method instead and worked well.
Another contribute here also commented with reducer() that also works perfect :)

Collapse
 
peerreynders profile image
peerreynders •

Array.prototype.includes()

The includes() method determines whether an array includes a certain value

Given that your arrays itemize objects, those arrays contain references to objects, not the actual objects.
So includes() can't help here because it can only find one-and-the-same object (because its reference is the same) but it cannot find objects that look the same.

const object = { id: 37, name: 'New', another: 'things' };
console.log(object === object); // true
console.log(object === { id: 37, name: 'New', another: 'things' }); // false
console.log(
  { id: 37, name: 'New', another: 'things' } ===
    { id: 37, name: 'New', another: 'things' }
); // false
Enter fullscreen mode Exit fullscreen mode 
const object = { id: 37, name: 'New', another: 'things' };
const items = [{ id: 37, name: 'New', another: 'things' }];

console.log(items.includes(items[0])); // true
console.log(items.includes(object));  // false
Enter fullscreen mode Exit fullscreen mode

I believe what you are looking for is Array.prototype.some().

const formA = [
  { id: 37, name: 'New', another: 'things' },
  { id: 31, name: 'Old', another: 'things' },
  { id: 3, name: 'Oldest', another: 'things' },
];

const formB = [
  { id: 37, name: 'New', another: 'things' },
  { id: 31, name: 'Old', another: 'things' },
];

function containsNameOf(list, other) {
  return list.some((item) => item.name === other.name);
}

console.log(containsNameOf(formB, formA[0])); // true
console.log(containsNameOf(formB, formA[1])); // true
console.log(containsNameOf(formB, formA[2])); // false
Enter fullscreen mode Exit fullscreen mode
Collapse
 
magimart profile image
Magima Felix O •

because i was looking at this kind of approach with includes() to get the Difference between two arrays
const arrA = ['john','matha','lisa','adam']; const arrB = ['tom','andrew','lisa','adam'];

                    const myDiff = arrA.filter(name => !arrB.includes(name))
                    console.log(myDiff)
Enter fullscreen mode Exit fullscreen mode

but this seems like it does not work with objects

Otherwise thank very much for your take, helps a lot lot...going to look into the approaches

Collapse
 
peerreynders profile image
peerreynders • • Edited 
const arrA = ['john','matha','lisa','adam']; 
const arrB = ['tom','andrew','lisa','adam'];

console.log(arrA.filter(name => !arrB.includes(name))); // ["john", "matha"]
console.log(arrA.filter(name => !arrB.some(other => other === name))); // ["john", "matha"]
console.log(arrA.filter(name => arrB.every(other => other !== name))); // ["john", "matha"]
Enter fullscreen mode Exit fullscreen mode

JavaScript data types and data structures

Strings are a primitive type.
Objects are a structural type.

So with objects you simply have to "dig deeper" until you can compare the primitive types (referenced by the object) that matter to you.

const formA = [
  { id: 37, name: 'New', another: 'things' },
  { id: 31, name: 'Old', another: 'things' },
  { id: 3, name: 'Oldest', another: 'things' },
];

const formB = [
  { id: 37, name: 'New', another: 'things' },
  { id: 31, name: 'Old', another: 'things' },
];

console.log(
  formA.filter((itemA) => formB.every((itemB) => itemB.name !== itemA.name))
); // [ {id: 3, name: "Oldest", another: "things" } ]

function differenceByName(itemsA, itemsB) {
  const keepNotInB = (itemA) => {
    const isNameDifferent = (itemB) => itemB.name !== itemA.name;
    return itemsB.every(isNameDifferent);
  };
  return itemsA.filter(keepNotInB);
}

console.log(differenceByName(formA, formB)); // [ {id: 3, name: "Oldest", another: "things" } ]
Enter fullscreen mode Exit fullscreen mode

Array.prototype.every()

Thread Thread
 
magimart profile image
Magima Felix O •

thank you peerreynders, i like this approach, quiet understandable too, thanks alot for the efforts i am more than ever energised :)

Read next

j0y444 profile image

The importance of semantic HTML for SEO and accessibility.

J0y444 -

teclearn profile image

Sniffing Out Code Smells and Design Smells: A Guide to Cleaner Code | Web Theory: Part 13

Mohammadreza Emamyari -

thearchitect123 profile image

KmpEssentials Available for All Kotlin Developers

TheArchitect123 -

brokenbound profile image

From user experience to wealth growth: How Broken Bound can empower your decentralized finance journey

BrokenBound -