What Do Curly Brackets ( {... } = ... ) in Destructuring Assignment Statements Represent?

What Does the Curly Brackets in var { ... } = ... Statements Represent?

Destructuring assignment, signified by the curly brackets in var { ... } = ... statements, is a pattern matching feature in JavaScript akin to that found in languages like Haskell. It provides a succinct way to extract and assign values from objects and arrays.

For Objects:

Let's consider the following example:

<code class="javascript">var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var {a, b, c} = ascii;</code>

This statement extracts the a, b, and c properties from the ascii object and assigns them to the corresponding variables. It is equivalent to the following code:

<code class="javascript">var a = ascii.a;
var b = ascii.b;
var c = ascii.c;</code>

For Arrays:

Similar destructuring can be performed on arrays:

<code class="javascript">var ascii = [97, 98, 99];

var [a, b, c] = ascii;</code>

This code extracts and assigns the first, second, and third elements of the ascii array to a, b, and c, respectively. It is equivalent to:

<code class="javascript">var a = ascii[0];
var b = ascii[1];
var c = ascii[2];</code>

Property Renaming:

Destructuring assignment also allows you to extract and rename a property:

<code class="javascript">var ascii = {
    a: 97,
    b: 98,
    c: 99
};

var {a: A, b: B, c: C} = ascii;</code>

This code assigns the a, b, and c properties to variables A, B, and C, respectively.

The above is the detailed content of What Do Curly Brackets ( {... } = ... ) in Destructuring Assignment Statements Represent?. For more information, please follow other related articles on the PHP Chinese website!