Why Did My ES6 Array Destructuring Lead to Unexpected Behavior?

ES6 Array Destructuring: Understanding the Unexpected Behavior

In ES6, array destructuring allows us to extract specific elements from an array and assign them to variables. However, unexpected behavior can occur when certain syntax rules are overlooked. Consider the following code:

<code class="js">let a, b, c;
[a, b] = ['A', 'B'];
[b, c] = ['BB', 'C'];
console.log(`a=${a} b=${b} c=${c}`);</code>

Expected Outcome:

• a = A
• b = BB
• c = C

Actual Outcome:

• a = BB
• b = C
• c = undefined

Explanation:

As pointed out in the question, the absence of semicolons between lines leads to this unexpected behavior. Without explicit semicolons, the code is interpreted as a single statement:

<code class="js">let a = undefined, b = undefined, c = undefined;
[a, b] = (['A', 'B']
[(b, c)] = ['BB', 'C']);
console.log(`a=${a} b=${b} c=${c}`);</code>

This breakdown explains the unusual outcome:

• [a, b] = (['A', 'B'] sets a to undefined and b to B.
• [(b, c)] = ['BB', 'C'] wraps the assignment of the array to b and c inside an assignment expression, causing it to evaluate to the array.
• 'A', 'B' is a property reference on the array literal.
• (b, c) uses the comma operator, which has the effect of evaluating c (which is undefined).

To avoid these unintended consequences, it is essential to explicitly add semicolons after statements that begin with parenthesis, brackets, the divide operator, addition operator, subtraction operator, or backticks (for tagged templates). By following this rule, we ensure that each line is treated as a separate statement, preventing unexpected evaluation and incorrect results.

The above is the detailed content of Why Did My ES6 Array Destructuring Lead to Unexpected Behavior?. For more information, please follow other related articles on the PHP Chinese website!