derigible derigible - 4 months ago 13
Javascript Question

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

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

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.

Comments