JS: What do the curly braces inside function parameter declarations mean? [duplicate]

Question

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.

Answer 1

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.