Desestructuración de matrices ES6: comportamiento imprevisto

En ES6, la tarea de desestructuración de matrices puede generar resultados inesperados, dejando a los programadores desconcertados. Uno de esos casos se ilustra con el siguiente código:

let a, b, c
[a, b] = ['A', 'B']
[b, c] = ['BB', 'C']
console.log(`a=${a} b=${b} c=${c}`)

Salida prevista:
a=A b=BB c =C

Salida real:
a=BB b=C c=indefinido

Explicación:

Contrario Según las expectativas, este código no produce el resultado deseado. En cambio, intercambia los valores de b y c, dejando c indefinido. Para comprender por qué sucede esto, debemos examinar el código de cerca.

Análisis y evaluación:

En JavaScript, los puntos y coma son opcionales para delimitar declaraciones. Sin punto y coma explícitos, el código se analiza como una sola declaración:

let a = undefined, b = undefined, c = undefined;
[a, b] = (['A', 'B']
[(b, c)] = ['BB', 'C']);
console.log(`a=${a} b=${b} c=${c}`);

Desglose de la declaración:

• [a, b] = (['A', 'B'] es una asignación desestructurante, similar a la del código original.
• [(b, c)] = ['BB' , 'C'] es una expresión de asignación que asigna la matriz ['BB', 'C'] al operando de la izquierda. Esta expresión se evalúa como la misma matriz.
• ['A', 'B. '][…] es una referencia de propiedad en un literal de matriz, que se evalúa como indefinido.
• (b, c) utiliza el operador de coma, que se evalúa como el último operando (c), que no está definido.

Implicaciones:

Por lo tanto, el código asigna indefinido tanto a a como a c, mientras que b recibe correctamente el valor 'C'. Para evitar este comportamiento, los programadores. debe usar explícitamente punto y coma o comenzar cada línea con un operador que requiera que se inserte automáticamente un punto y coma (por ejemplo, (, [, /, - o `).

Esta comprensión garantiza que las asignaciones de desestructuración en ES6 funcionen como se esperaba, evitando intercambios de valor inesperados y asignaciones indefinidas.