Menu
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.
838
{} (curly braces)Define the beginning and end of functions blocks and statement blocks such as the for and if structures. Curly braces are also used for defining initial values in array declarations.
The curly braces are a special syntax to let the JSX parser know that it needs to interpret the contents in between them as JavaScript instead of a string. You need them when you want to use a JavaScript expression like a variable or a reference inside JSX.
Different programming languages have various ways to delineate the start and end points of a programming structure, such as a loop, method or conditional statement. For example, Java and C++ are often referred to as curly brace languages because curly braces are used to define the start and end of a code block.
In languages like C curly braces ( {} ) are used to create program blocks used in flow control. In Python, curly braces are used to define a data structure called a dictionary (a key/value mapping), while white space indentation is used to define program blocks.
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.
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
