Why find method giving me a result while there is no object key available

user_18074016 0
Viewed 20

Why find method giving me a result while there is no object key available? as you can see from my below code on the data1 there is no size property but when I try to find by size property it gives me a result it should give me an empty object.

const data1= [{title: 'extra Tomato', price: 2},
              {title: 'ketchup', price: 1},
              {title: 'extra large', price: 8.1}]

const data2 = [{title: 'extra Tomato', price: 2},
                {title: 'ketchup', price: 1}]

const isOptionExist = data1.find((elm) =>
          data2.map((item) => item.title === elm.size)
        );
console.log(isOptionExist)

reactjs find javascript
2 Answers

Let's break down the problem you are running into. First, what does the data2.map((item) => item.title === elm.size) return?

data1= [{title: 'extra Tomato', price: 2},
          {title: 'ketchup', price: 1},
          {title: 'extra large', price: 8.1}]

const data2 = [{title: 'extra Tomato', price: 2},
                {title: 'ketchup', price: 1}]

const elm = data1[0]
const result = data2.map((item) => item.title === elm.size)

console.log(result)

You can see that the return value is [false, false]. This is because .map is iterating through data2 and creating a new array where the value of each element is the value of item.title === elm.size, which is false.

The next part of code that will be evaulated will be:

data1.find((elm) => [false, false])

In the below example, we can that this returns { "title": "extra Tomato", "price": 2 }

data1= [{title: 'extra Tomato', price: 2},
          {title: 'ketchup', price: 1},
          {title: 'extra large', price: 8.1}]

const data2 = [{title: 'extra Tomato', price: 2},
                {title: 'ketchup', price: 1}]

const result = data1.find((elm) => [false, false])

console.log(result)

So why is [false, false] being considered true? That's becasue [false, false] is a truthy value in javascript.

Here's an snippet with !! to prove it:

console.log(!![false, false])

From the docs:

In JavaScript, a truthy value is a value that is considered true when encountered in a Boolean context. All values are truthy unless they are defined as falsy. That is, all values are truthy except false, 0, -0, 0n, "", null, undefined, and NaN.

If you want to return three empty arrays from your query you can do this:

const data1= [{title: 'extra Tomato', price: 2},
              {title: 'ketchup', price: 1},
              {title: 'extra large', price: 8.1}]

const data2 = [{title: 'extra Tomato', price: 2},
                {title: 'ketchup', price: 1}]

const isOptionExist = data1.map((elm) => data2.filter((item) => item.title === elm.size))
        
console.log(isOptionExist)

If you are jus trying to get a boolean value for if an option was found, try this:

const data1= [{title: 'extra Tomato', price: 2},
              {title: 'ketchup', price: 1},
              {title: 'extra large', price: 8.1}]

const data2 = [{title: 'extra Tomato', price: 2},
                {title: 'ketchup', price: 1}]

const isOptionExistTrue = data1.some((elm) => data2.some((item) => item.title === elm.title))
        
console.log(isOptionExistTrue)

const isOptionExistFalse = data1.some((elm) => data2.some((item) => item.title === elm.size))
        
console.log(isOptionExistFalse)

user_153516400

This is not correct syntax. What you wrote there is the same as:

const isOptionExist = data1.find((elm) => true);

Because

Boolean(data2.map((item) => item.title === elm.size))

is true.

And that would return you the first data1 element. As it did.

user_188149990
Related