Javascript : What is the difference between these two fat arrow functions?

Question

const f = ({x,y})=>{...do something...};

const f = (x,y)=>{...do something...};

What is the difference between these two lines ?

My understanding is both pass "x" and "y" are arguments.

Are both the same then ?

Look for [**Destructing assignment**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring). — ibrahim mahrir, Nov 23 '17 at 22:36
The top function is used in React jsx files to create a Component — Jay Harris, Nov 23 '17 at 22:43
@ibrahimmahrir I also failed to name it correctly on the first try :), it's actually called destructuring — Daniil Grankin, Nov 23 '17 at 22:55
@DanielGrankin LOL. Took me some time to understand your comment. Thank you very very much. I swear every time I stumble upon destruct**ur**ing I get confused as there is no actual destructon of any kind. Now it is all clear. Thanks. — ibrahim mahrir, Nov 23 '17 at 23:04

Daniil Grankin · Accepted Answer · 2017-11-23T22:45:28.790

1

The first one uses destructuring you can use it as

f({x: 0, y: 1})

you pass one object with fields x and y

and then in body you can access fields of object as variables x and y.

In the second one you have to pass 2 variables

f(0, 1)

Bodies can be the same of those functions and they would work analogically for instance

=> { return x + y; }

but params should be passed in different ways

edited Nov 23 '17 at 22:45

answered Nov 23 '17 at 22:42

Daniil Grankin

yes, thank you, just fixed before read your comment :) – Daniil Grankin Nov 23 '17 at 22:46
1

Another *beauty* is that you can pass an entire Object, but thanks to destructuring you make available to your function only a narrower subset of **allowed** (expected) properties `const obj = {x:"foo",y:"bar",z:"baz"}; f(obj)` (where `z` will be ignored) – Roko C. Buljan Nov 23 '17 at 22:50
The real benefit of such implementation is also that even if you mutate `x` from within your function, it will not mutate it's original Object property value. https://jsfiddle.net/nsLx2873/ - on the other hand if you pass an object as plain argument like in `(obj, x,y)=>` and mutating the object from within the function will also mutate the values at the original reference. – Roko C. Buljan Nov 23 '17 at 22:55
@RokoC.Buljan property can be an object or an array in that case it can be mutated. – Daniil Grankin Nov 23 '17 at 22:57
@RokoC.Buljan https://jsfiddle.net/0g0f13s1/2/ – Daniil Grankin Nov 23 '17 at 23:05
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/159713/discussion-between-daniel-grankin-and-roko-c-buljan). – Daniil Grankin Nov 23 '17 at 23:16

Melchia · Answer 2 · 2017-11-23T23:23:44.533

0

The first one you're passing an object as a parameter. But I don't think it's a working example. Here is one

class O {
  x;
  y;
}
const example =(o:O)=>{
 //do something 
  return o.x+o.y;
};

The equivalent is

var example = function example(o) {
  //do something 
  return o.x+o.y;
};

The second one you're passing two parameters the equivalent is

var example2 = function example2(x, y) {
  //do something 
  return 0;
};

edited Nov 23 '17 at 23:23

answered Nov 23 '17 at 22:58

Melchia

what is o:O? is it Flow? types are not supposed to be used in the example – Daniil Grankin Nov 23 '17 at 23:16

2 Answers2