Reading a React/Redux example I stumble upon this piece of syntax
const CartContainer = ({ products, total, checkout }) => (
What is the = ({x,y,z}) shorthand for?
Asked
Active
Viewed 52 times
0
softcode
- 2,999
- 8
- 29
- 59
-
4This is [destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) combined with the new [arrow function syntax](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions). – royhowie Dec 22 '16 at 16:49
-
CartContainer is a function (likely a React Component) that takes one object as its only argument. Then creates 3 local variables in the function that are properties of the object that was passed in – azium Dec 22 '16 at 16:51
-
1[What does this symbol mean in JavaScript?](http://stackoverflow.com/q/9549780/1529630) – Oriol Dec 22 '16 at 16:56
-
@azium so this could be rewritten as `const CartContainer = function({products, total, checkout}) {};` and those 3 variables would be available in the function? – softcode Dec 22 '16 at 16:58
-
@softcode no; `function CartContainer ({products, total, checkout}) {…}`, which is the same as `function CartContainer (obj) { /* access obj.products, obj.total, and obj.checkout here */}` – royhowie Dec 22 '16 at 16:59
-
@rayhowie HA! got it. thx man – softcode Dec 22 '16 at 17:00