JavaScript find(), what is the difference of passing {} and without {}?

user_5159482 0
Viewed 61

I have the following example. Both of the find() function works, but I am not sure how the first one with {} is passed into the callback function.

1.If {} is used, I assume an object is passed into the find function, but how does 'title' as an object can be used to compare with values(1.2). Can someone please explain the basics, with reference will be even better.

2.I understand the second find function is passing in object, and arr.title refers to the value inside the object 'array1'. I am right?

const array1 = [{name:1,title:1.1}, {name:2,title:1.2}];

const found = array1.find(({title}) => title ==1.2);
const found2 = array1.find(arr => arr.title ==1.2);

console.log(found);
console.log(found2);

The result of the code above is:

> Object { name: 2, title: 1.2 }
> Object { name: 2, title: 1.2 }
reactjs brackets find javascript
3 Answers

This is not related to Array.prototype.find but is rather a general feature of JavaScript function parameter syntax.

A function parameter may be defined using object or array destructuring syntax.

The function definition

 function f(x) {
   return x.p;
 }

Declares a function that takes a single manifest parameter named x.

The behaviorally identical function

 function f({p}) {
    return p;
 }

Declares a single manifest parameter that is anonymous, and extracts its p property.

From the caller's perspective, both functions behave identically, and indeed both will throw if the first argument passed is undefined and both will return undefined if x does not have a p property and so on.

The second form is purely a syntactic convenience employed in the functions implementation to pull out a property named p and work with it without qualification.

Parameter destructuring is an instance of JavaScript's general destructuring syntax, which has other applications including variable declarations, assignments, and providing defaults.

user_19158930

If { } is used, I assume an object is passed into the find function...

This is some Javascript magic called destructuring, a special syntax.

What's happening: The value of the object/s are being unpacked by their keys.

The result: The object is destructured by the key passed. What this results in is the returning of the value of the key as you're seeing in your find function.

To better understand destructuring you can read here or here

To better understand what's happening though, you probably first have to fully understand the find function and how it works.

I understand the second find function is passing in object...

What's happening: You're passing what's known as a callback. You're essentially saying, for each of the entries in my array, run this function and based on the evaluation of my callback (your function), give me the output.

The result: This means, if title is equal to 1.2 for any/each object checked, in the case of your callback arr => arr.title ==1.2 it will evaluate to true and thus the object is returned.

You may find this and/or this helpful.

user_63967610
user_136623390
Related