6

I have been following this tutorial on setting up React with Redux, and I noticed some syntax that I am not familiar with. What are the curly braces inside the function parameter definition doing?

Example:

function Stream({ tracks = [], onAuth }) { #what is going on here?
  return (
    <div>
      ... #component stuff here
    </div>
  );
}

Is this React specific? Or does this have something to do with Babel or some other library? I am new to this tech, so not sure what is going on.

derigible
  • 964
  • 5
  • 15
  • 32
  • The function is being passed an object literal as a parameter. – Hopeless Jul 22 '16 at 22:24
  • What does that mean? That the function, when called, will need to have an object literal? How does one pass something to a function like this? – derigible Jul 22 '16 at 22:25
  • It looks like destructuring syntax, but I didn't know javascript had destructuring. If that's what it is, the function is expecting an object with a `tracks` field (but can default to an empty list of the object doesn't Hebert one), and a `onAuth` field, which must be supplied. It's basically a neater way of accessing the passed object's fields. – Carcigenicate Jul 22 '16 at 22:28
  • @Carcigenicate that is exactly what it is: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment – derigible Jul 22 '16 at 22:31
  • If you put that as an answer I will mark it as correct. I had no idea what this was even trying to do until you mentioned it. – derigible Jul 22 '16 at 22:31
  • Thanks. This must be new in ES7. – Carcigenicate Jul 22 '16 at 22:33
  • @derigible Wow lol. I don't know how I missed that for 5 months :/ – Carcigenicate Jul 22 '16 at 23:24

1 Answers1

6

It looks like destructuring syntax, but I didn't know javascript had destructuring.

If that's what it is, the function is expecting an object with a tracks field (but can default to an empty list if the object doesn't have one), and an onAuth field, which will default to undefined. It's basically a neater way of accessing the fields of the passed object.

Carcigenicate
  • 43,494
  • 9
  • 68
  • 117