El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Fa tres lliçons que fas servir aquesta sintaxi de gairell i amb una nota al peu que deia «això s'explica a 04-06». Ha arribat el moment. const [eliminada] = tasques.splice(i, 1), for (const [i, tasca] of backlog.entries()), parell[0] i parell[1] recorrent Object.entries: tots aquests casos són la mateixa idea, i la idea s'anomena desestructuració. Consisteix a desempaquetar els elements d'un array en variables amb nom, en una sola línia i sense índexs. Sembla un detall cosmètic i no ho és: canvia la llegibilitat dels bucles amb índex, permet intercanviar variables sense auxiliar, fa que els paràmetres d'una funció es llegeixin sols i és la base de patrons que veuràs a React i a gairebé qualsevol codi modern. En aquesta lliçó l'aprendràs completa, i l'aplicaràs a partir una dataLimit ISO i a processar els parells clau-valor del resum per responsable de Taller Nómada.

Contingut

Què és desestructurar
La sintaxi bàsica
Saltar elements amb comes
Valors per defecte
La resta amb ...
Intercanviar variables sense auxiliar
Desestructurar als paràmetres d'una funció
Arrays imbricats
Desestructurar el resultat de split()
Desestructurar Object.entries()
Desestructuració a for...of
El patró [error, valor] i els seus límits
Errors Habituals i Consells
Exercicis
Conclusió

Què és desestructurar

Mira aquestes dues maneres de treure els elements d'un array a variables:

const posicio = ['Iván', 25, 3];

// A mà, amb índexs
const responsableA = posicio[0];
const horesA = posicio[1];
const tasquesA = posicio[2];

// Amb desestructuració
const [responsable, hores, tasques] = posicio;

console.log(responsable, hores, tasques);   // Iván 25 3

La segona versió fa exactament el mateix en una línia. La regla és senzilla:

Quan al costat esquerre d'una assignació hi poses un patró entre claudàtors, JavaScript no crea un array: desempaqueta l'array de la dreta, element a element, en les variables que hagis anomenat, per posició.

El punt clau és aquest: per posició, no per nom. Els noms de les variables els tries tu lliurement; el que mana és l'ordre.

const [a, b, c] = ['Iván', 25, 3];
console.log(a);   // 'Iván'   ← el nom tant és, compta la posició

Aquesta és la diferència essencial amb la desestructuració d'objectes, que estudiaràs a la lliçó següent i que funciona a l'inrevés: allà mana el nom i l'ordre és irrellevant.

La sintaxi bàsica

const etiquetes = ['fusteria', 'compres', 'urgent'];

// Totes les variables que vulguis, en ordre
const [primera, segona, tercera] = etiquetes;
console.log(primera);    // 'fusteria'

// Pots agafar menys elements dels que hi ha: la resta s'ignora
const [nomesLaPrimera] = etiquetes;
console.log(nomesLaPrimera);   // 'fusteria'

// Si en demanes més dels que hi ha, sobren undefined
const [x, y, z, w] = etiquetes;
console.log(w);          // undefined

Funciona igual amb let, amb const i amb variables ja declarades:

let responsable;
let hores;

[responsable, hores] = ['Lucía', 14];      // sense declaració
console.log(responsable, hores);           // Lucía 14

Compte amb aquesta última forma. Si la línia anterior no acaba en punt i coma, JavaScript pot interpretar els claudàtors com un accés a índex (és un dels casos d'ASI que vas veure a 01-04). Quan desestructuris sobre variables existents, comença la línia amb ; o assegura't de tancar l'anterior.

I funciona amb qualsevol iterable, no només amb arrays: strings, Set, Map…

const [primeraLletra, segonaLletra] = 'Nómada';
console.log(primeraLletra, segonaLletra);   // N ó

const [un, dos] = new Set([10, 20, 30]);
console.log(un, dos);                       // 10 20

Saltar elements amb comes

Si només t'interessen algunes posicions, deixa el buit amb una coma:

const fila = ['Iván', 'alta', 'en-curs', 12, '2026-09-30'];

// Vull el responsable i les hores: salto tres posicions
const [persona, , , horesEstimades] = fila;
console.log(persona, horesEstimades);      // Iván 12

// Només l'estat (tercera posició)
const [, , estat] = fila;
console.log(estat);                        // 'en-curs'

Compta les comes amb cura: [, , estat] té dues comes abans del nom, així que estat recull la tercera posició. És una sintaxi compacta però fàcil de comptar malament; si necessites saltar més de dues posicions, sol ser més llegible accedir per índex o replantejar la dada com a objecte.

Valors per defecte

Quan una posició no existeix (o val undefined), pots indicar un valor per defecte amb =, exactament igual que als paràmetres d'una funció (03-03):

const [titol, responsable = 'sense assignar', revisor = null] = ['Revisar la guillotina'];

console.log(titol);         // 'Revisar la guillotina'
console.log(responsable);   // 'sense assignar'   ← la posició 1 no existia
console.log(revisor);       // null

El detall crític, el mateix dels paràmetres per defecte: el valor per defecte només s'aplica amb undefined, no amb null, ni amb 0, ni amb ''.

const [a = 'defecte'] = [null];
console.log(a);        // null     ← null NO activa el valor per defecte

const [b = 'defecte'] = [undefined];
console.log(b);        // 'defecte'

const [c = 10] = [0];
console.log(c);        // 0        ← el 0 tampoc no l'activa

És la mateixa distinció que separa ?? de || (01-06), i pel mateix motiu. Si necessites que null també activi el valor per defecte, desestructura primer i aplica ?? després.

Els valors per defecte poden ser expressions, i només s'avaluen si calen:

function dataAvui() {
  console.log('  (calculant la data...)');
  return '2026-09-20';
}

const [titol1, data1 = dataAvui()] = ['Tasca A', '2026-10-01'];
// no imprimeix res: la posició 1 existia

const [titol2, data2 = dataAvui()] = ['Tasca B'];
//   (calculant la data...)
console.log(data2);   // '2026-09-20'

La resta amb `...`

L'element resta (rest element) recull en un array nou tot el que quedi sense assignar:

const cua = ['Cartelleria', 'Samarretes', 'Bosses de tela', 'Reimpressió'];

const [seguent, ...enEspera] = cua;
console.log(seguent);      // 'Cartelleria'
console.log(enEspera);     // [ 'Samarretes', 'Bosses de tela', 'Reimpressió' ]

// Serveix també per separar capçalera i cos
const [primera, segona, ...resta] = cua;
console.log(resta);        // [ 'Bosses de tela', 'Reimpressió' ]

Tres regles de l'element resta:

Ha d'anar l'últim. const [...tot, ultim] = cua; és un SyntaxError.
Sempre produeix un array, encara que no quedi res: aleshores serà [], mai undefined.
No admet valor per defecte: [...resta = []] no és vàlid.

const [unic, ...buit] = ['només un'];
console.log(buit);         // []   ← array buit, no undefined

I una aplicació molt útil, copiar sense el primer, que és el que fa una cua:

function atendre(cua) {
  const [ates, ...pendents] = cua;
  return { ates, pendents };     // no muta la cua original
}

const resultat = atendre(cua);
console.log(resultat.ates);            // 'Cartelleria'
console.log(resultat.pendents.length); // 3
console.log(cua.length);               // 4  ✓ intacta

Compara-ho amb cua.shift(), que fa el mateix però mutant l'array (04-03). Aquesta versió és immutable, que és la línia de disseny del projecte.

Intercanviar variables sense auxiliar

El truc més celebrat de la desestructuració. Abans calia fer servir una variable temporal:

let a = 'Iván';
let b = 'Marta';

// A l'antiga
let temporal = a;
a = b;
b = temporal;

// Amb desestructuració: una línia, sense auxiliar
[a, b] = [b, a];
console.log(a, b);      // Iván Marta   (tornen al seu lloc)

Funciona perquè el costat dret s'avalua sencer abans d'assignar: es construeix l'array ['Marta', 'Iván'] i només aleshores es reparteix. Serveix també per a elements d'un array:

const ordre = ['T1', 'T2', 'T3'];
[ordre[0], ordre[2]] = [ordre[2], ordre[0]];
console.log(ordre);     // [ 'T3', 'T2', 'T1' ]

I per rotar tres o més valors de cop:

let x = 1, y = 2, z = 3;
[x, y, z] = [z, x, y];
console.log(x, y, z);   // 3 1 2

Desestructurar als paràmetres d'una funció

Si una funció rep un array, el pots desempaquetar a la mateixa signatura. El paràmetre deixa d'anomenar-se «aquell array» i passa a anomenar les seves parts:

// Sense desestructurar: cal recordar què significa cada índex
function descriureFilaA(fila) {
  return `${fila[0]}: ${fila[1]} h`;
}

// Desestructurant a la signatura: es llegeix sol
function descriureFila([persona, hores]) {
  return `${persona}: ${hores} h`;
}

console.log(descriureFila(['Iván', 25]));    // 'Iván: 25 h'

Admet valors per defecte i resta, igual que a fora:

function resumirCua([seguent = 'res', ...resta] = []) {
  return `Següent: ${seguent}. En espera: ${resta.length}`;
}

console.log(resumirCua(['Cartelleria', 'Samarretes']));   // 'Següent: Cartelleria. En espera: 1'
console.log(resumirCua([]));                              // 'Següent: res. En espera: 0'
console.log(resumirCua());                                // 'Següent: res. En espera: 0'

Aquell = [] final és important: sense ell, cridar resumirCua() sense arguments llançaria un TypeError, perquè no es pot desestructurar undefined. És la mateixa protecció que veuràs a 04-07 amb el truc = {}.

On més es nota és als callbacks dels mètodes que vas estudiar a 04-05:

const carrega = { 'Iván': 25, 'Marta': 6, 'Lucía': 14 };

// Sense desestructurar: parell[0] i parell[1] no diuen res
Object.entries(carrega).forEach((parell) => console.log(`${parell[0]}: ${parell[1]} h`));

// Desestructurant al paràmetre del callback: llegible
Object.entries(carrega).forEach(([persona, hores]) => console.log(`${persona}: ${hores} h`));
// Iván: 25 h
// Marta: 6 h
// Lucía: 14 h

Arrays imbricats

El patró de l'esquerra pot reproduir qualsevol estructura, tan profunda com calgui:

const setmana = [
  ['dilluns', [8, 6]],
  ['dimarts', [7, 5]]
];

const [[dia, [mati, tarda]]] = setmana;
console.log(dia, mati, tarda);         // dilluns 8 6

Llegeix-ho de fora cap a dins: el [[...]] exterior diu «agafa el primer element de setmana»; a dins, [dia, [mati, tarda]] diu «aquest element és un array de dos: el primer s'anomena dia, i el segon és al seu torn un array de dos, mati i tarda».

És potent, però es torna il·legible de seguida. Regla pràctica: més de dos nivells d'imbricació i probablement la dada hauria de ser un objecte. Compara:

// Difícil de llegir
const [[, [horesMati]]] = setmana;

// La mateixa dada modelada com a objecte: no cal comptar claudàtors
const setmanaObj = [{ dia: 'dilluns', mati: 8, tarda: 6 }];
console.log(setmanaObj[0].mati);       // 8

Desestructurar el resultat de `split()`

Aquí arriba l'aplicació directa al projecte. split(separador) parteix un string en un array, i aquest array és candidat perfecte per desestructurar. El cas canònic: partir una dataLimit ISO.

const dataLimit = '2026-09-30';

const [any, mes, dia] = dataLimit.split('-');
console.log(any, mes, dia);       // 2026 09 30
console.log(typeof any);          // 'string'  ← split sempre retorna strings

Convertint a número sobre la marxa amb map (04-04):

const [a, m, d] = dataLimit.split('-').map(Number);
console.log(a, m, d);             // 2026 9 30
console.log(typeof a);            // 'number'

Amb això ja pots escriure una funció de presentació que la Marta demana des del Mòdul 1: mostrar la data en format català.

const MESOS = ['gener', 'febrer', 'març', 'abril', 'maig', 'juny',
               'juliol', 'agost', 'setembre', 'octubre', 'novembre', 'desembre'];

function dataLlegible(iso) {
  const [any, mes, dia] = iso.split('-');
  return `${Number(dia)} de ${MESOS[Number(mes) - 1]} de ${any}`;
}

console.log(dataLlegible('2026-09-30'));   // '30 de setembre de 2026'
console.log(dataLlegible('2026-09-05'));   // '5 de setembre de 2026'
console.log(dataLlegible('2026-11-05'));   // '5 de novembre de 2026'

Fixa't en MESOS[Number(mes) - 1]: el -1 és perquè els mesos van d'1 a 12 i els índexs de l'array de 0 a 11. És el clàssic desajust d'un, i aquí està aïllat en una sola línia fàcil de revisar.

Un altre ús freqüent, partir una línia de text en camps:

const linia = 'Iván;alta;12;2026-09-30';
const [responsable, prioritat, hores, data] = linia.split(';');
console.log(`${responsable} té ${hores} h de prioritat ${prioritat}`);
// Iván té 12 h de prioritat alta

Un avís: si el string no té tots els separadors esperats, les variables sobrants queden undefined sense cap error. Quan processis dades que vénen de fora, combina la desestructuració amb valors per defecte i una validació.

const [r = 'desconegut', p = 'mitjana', h = '0'] = 'Lucía'.split(';');
console.log(r, p, h);      // Lucía mitjana 0

Desestructurar `Object.entries()`

Object.entries (04-01) retorna un array de parells [clau, valor]. Desestructurar-los és el que converteix un recorregut críptic en un de llegible.

const carrega = { 'Iván': 25, 'Marta': 6, 'Lucía': 14 };

// Sense desestructurar
for (const parell of Object.entries(carrega)) {
  console.log(`${parell[0]} porta ${parell[1]} h`);
}

// Desestructurant: noms en lloc d'índexs
for (const [persona, hores] of Object.entries(carrega)) {
  console.log(`${persona} porta ${hores} h`);
}
// Iván porta 25 h
// Marta porta 6 h
// Lucía porta 14 h

Combinat amb els mètodes de 04-05, el resultat és directament el bloc «càrrega per persona» de l'informe setmanal:

Object.entries(carrega)
  .toSorted(([, horesA], [, horesB]) => horesB - horesA)     // desestructurant i saltant la clau
  .forEach(([persona, hores], i) => console.log(`${i + 1}. ${persona}: ${hores} h`));
// 1. Iván: 25 h
// 2. Lucía: 14 h
// 3. Marta: 6 h

Val la pena aturar-se a la comparadora: ([, horesA], [, horesB]) => horesB - horesA. Els dos paràmetres són parells, i a cadascun saltem la clau amb una coma per quedar-nos només amb el valor. Comparada amb (a, b) => b[1] - a[1], la versió desestructurada diu què es compara, no en quina posició és.

El camí de tornada també existeix: Object.fromEntries reconstrueix un objecte a partir de parells.

const carregaEnJornades = Object.fromEntries(
  Object.entries(carrega).map(([persona, hores]) => [persona, Number((hores / 8).toFixed(1))])
);
console.log(carregaEnJornades);    // { Iván: 3.1, Marta: 0.8, Lucía: 1.8 }

Desestructuració a `for...of`

Ja ho has vist a la lliçó 04-04 amb una nota al peu. Ara entens exactament què passa:

for (const [index, tasca] of backlog.entries()) {
  console.log(`${index + 1}. ${tasca.titol}`);
}
// 1. Redissenyar la sala polivalent
// 2. Cartelleria del taller de serigrafia
// ...

backlog.entries() produeix, a cada volta, un array de dos elements: [0, {tasca 1}], [1, {tasca 2}]… El patró const [index, tasca] desempaqueta aquell parell en el moment. I com que continua sent un for...of, conserva break i continue, que era la raó de preferir-lo a forEach:

for (const [i, tasca] of backlog.entries()) {
  if (tasca.estat === 'feta') continue;
  if (i >= 3) break;
  console.log(`${i}: ${tasca.titol}`);
}

També funciona recorrent arrays d'arrays directament:

const assignacions = [['Iván', 12], ['Marta', 6], ['Lucía', 14]];

for (const [persona, hores] of assignacions) {
  console.log(`${persona} → ${hores} h`);
}

I amb Map, que produeix parells de manera natural (04-05):

const recompte = new Map([['Iván', 3], ['Marta', 2], ['Lucía', 1]]);
for (const [persona, tasques] of recompte) {
  console.log(`${persona}: ${tasques} tasca(ques)`);
}

El patró `[error, valor]` i els seus límits

A 03-03 vas estudiar com retornar diversos valors d'una funció. Una de les opcions era retornar un array, i ara la desestructuració fa que aquesta opció resulti còmoda: el patró [error, valor], popular en moltes biblioteques.

/**
 * Valida una tasca. Retorna [error, tasca]:
 * si va bé, error és null; si va malament, tasca és null.
 */
function validarTasca(tasca) {
  if (typeof tasca.titol !== 'string' || tasca.titol.trim() === '') {
    return ['El títol és obligatori.', null];
  }
  if (!(tasca.horesEstimades > 0 && tasca.horesEstimades <= 40)) {
    return ['Les hores han de ser entre 0 i 40.', null];          // R3
  }
  return [null, tasca];
}

const [error, tascaValida] = validarTasca({ titol: 'Revisar la guillotina', horesEstimades: 2 });
if (error) {
  console.log(`✗ ${error}`);
} else {
  console.log(`✓ ${tascaValida.titol}`);
}
// ✓ Revisar la guillotina

const [error2] = validarTasca({ titol: '', horesEstimades: 2 });
console.log(error2);       // 'El títol és obligatori.'

La seva virtut és que qui crida tria els noms, cosa que evita col·lisions quan fas diverses crides seguides:

const [errorA, tascaA] = validarTasca(candidataA);
const [errorB, tascaB] = validarTasca(candidataB);

Ara els límits, perquè convé saber quan no fer-lo servir:

	Retornar un array `[error, valor]`	Retornar un objecte `{ error, valor }`
Noms	Els posa qui crida	Els posa la funció (es poden reanomenar, 04-07)
Ordre	Significatiu: equivocar-lo és un bug silenciós	Irrellevant
Agafar només el segon	`const [, valor] = ...` (coma incòmoda)	`const { valor } = ...`
Afegir una tercera dada	Trenca qui comptava posicions	No trenca res
Autodocumentació	Baixa: cal llegir la funció	Alta

El bug silenciós de la segona fila és real i molt fàcil de cometre:

const [tasca, error] = validarTasca({ titol: 'Alguna cosa', horesEstimades: 2 });
// ✗ Estan a l'inrevés: tasca val null i error val l'objecte tasca.
// No hi ha cap avís. El programa simplement fa el contrari del que et penses.

Regla pràctica: fes servir l'array de dos elements quan els dos valors siguin inseparables i evidents (un resultat i el seu error, una coordenada, un parell clau-valor), i sempre que qui cridi vulgui posar-hi noms propis. Per a tres o més dades, o quan els noms importin, retorna un objecte, com feia resumirCarrega() a 03-03. És la mateixa recomanació d'aquella lliçó, ara amb les dues sintaxis a la mà per comparar-les.

Errors Habituals i Consells

1. Confondre posició amb nom. En arrays mana l'ordre. const [titol, id] = [1, 'Redissenyar...'] assigna titol = 1. Amb objectes (04-07) mana el nom.

2. Desestructurar undefined o null.

const [a] = undefined;    // ✗ TypeError: undefined is not iterable
const [b] = null;         // ✗ TypeError
const [c] = [];           // ✓ c és undefined, sense error

Protegeix-te amb = [] als paràmetres o amb ?? [] al valor.

3. Comptar malament les comes en saltar elements. [, , estat] agafa la tercera posició. Si dubtes, compta les comes: hi ha tantes posicions saltades com comes abans del nom.

4. Posar la resta al mig. const [...tot, ultim] = a; és un SyntaxError. La resta va sempre l'última.

5. Esperar que el valor per defecte actuï amb null. Només actua amb undefined. Si null també ha d'activar-lo, aplica ?? després.

6. Oblidar el punt i coma a la línia anterior en desestructurar sobre variables ja declarades: [a, b] = [b, a] es pot unir a la línia de dalt i produir un error confús.

7. Desestructurar un Set esperant un ordre concret. Funciona perquè és iterable, però l'ordre és el d'inserció; no el facis servir per «agafar els dos menors».

Consell professional. Desestructura quan millori la lectura, no per esport. const [a, , , , , f] = fila; no és millor que fila[5]. El senyal que l'estàs forçant és haver de comptar comes: si la teva dada necessita noms, probablement hauria de ser un objecte, i la lliçó següent et donarà la sintaxi exacta per desempaquetar-lo.

Exercicis

Exercici 1 — La data, per parts. Escriu una funció desglossarData(iso) que rebi una dataLimit en format 'yyyy-mm-dd' i retorni un objecte { any, mes, dia, llegible }, on any, mes i dia siguin números i llegible tingui el format '30 de setembre de 2026'. Després escriu mateixMes(isoA, isoB), que retorni true si dues dates cauen al mateix any i mes. Prova-les amb '2026-09-30', '2026-09-05' i '2026-11-05'.

Exercici 2 — Podi de càrrega. Partint de l'objecte const carrega = { 'Iván': 25, 'Marta': 6, 'Lucía': 14 };, escriu podi(carrega) que retorni un objecte { primer, segon, resta }, on primer i segon siguin strings amb el format 'Iván (25 h)' i resta sigui un array amb el mateix format per als altres. Fes servir Object.entries, toSorted amb desestructuració a la comparadora, i desestructuració amb element resta.

Exercici 3 — Cua del taller de serigrafia, immutable. Escriu tres funcions que no mutin l'array d'entrada:

atendreSeguent(cua) → retorna [ates, cuaRestant].
avancar(cua, posicio) → retorna una cua nova amb l'encàrrec d'aquesta posició col·locat el primer.
intercanviar(cua, i, j) → retorna una cua nova amb dues posicions intercanviades, fent servir desestructuració.

Prova-les amb ['Cartelleria', 'Samarretes', 'Bosses de tela', 'Reimpressió'].

Solucions

Exercici 1

const MESOS = ['gener', 'febrer', 'març', 'abril', 'maig', 'juny',
               'juliol', 'agost', 'setembre', 'octubre', 'novembre', 'desembre'];

function desglossarData(iso) {
  const [any, mes, dia] = iso.split('-').map(Number);
  return { any, mes, dia, llegible: `${dia} de ${MESOS[mes - 1]} de ${any}` };
}

function mateixMes(isoA, isoB) {
  const [anyA, mesA] = isoA.split('-');
  const [anyB, mesB] = isoB.split('-');
  return anyA === anyB && mesA === mesB;
}

console.log(desglossarData('2026-09-30'));
// { any: 2026, mes: 9, dia: 30, llegible: '30 de setembre de 2026' }

console.log(desglossarData('2026-09-05').llegible);   // '5 de setembre de 2026'

console.log(mateixMes('2026-09-30', '2026-09-05'));   // true
console.log(mateixMes('2026-09-30', '2026-11-05'));   // false

Dues observacions. A desglossarData, el .map(Number) converteix les tres parts de cop, i això fa que dia sigui 5 en lloc de '05' —just el que volem per al text llegible—. A mateixMes, en canvi, no convertim: comparar els strings '09' amb '09' funciona perfectament i estalvia la conversió. Fixa't també en { any, mes, dia, ... }: escriure any en lloc de any: any és l'abreviatura de propietat, que la lliçó següent explicarà juntament amb la resta de la sintaxi d'objectes.

Exercici 2

function podi(carrega) {
  const [primer, segon, ...resta] = Object.entries(carrega)
    .toSorted(([, horesA], [, horesB]) => horesB - horesA)
    .map(([persona, hores]) => `${persona} (${hores} h)`);

  return { primer, segon, resta };
}

console.log(podi({ 'Iván': 25, 'Marta': 6, 'Lucía': 14 }));
// { primer: 'Iván (25 h)', segon: 'Lucía (14 h)', resta: [ 'Marta (6 h)' ] }

console.log(podi({ 'Iván': 25 }));
// { primer: 'Iván (25 h)', segon: undefined, resta: [] }

La cadena fa tres coses encadenades de 04-05 —convertir a parells, ordenar i transformar en text— i la desestructuració de la primera línia reparteix el resultat en un sol gest. El segon console.log mostra el comportament al cas límit: segon queda undefined i resta queda [] (mai undefined), tal com deia la regla de l'apartat 5. Si volguessis un text en lloc d'undefined, n'hi hauria prou amb const [primer, segon = '—', ...resta].

Exercici 3

function atendreSeguent(cua) {
  const [ates, ...cuaRestant] = cua;
  return [ates, cuaRestant];
}

function avancar(cua, posicio) {
  if (posicio < 0 || posicio >= cua.length) return cua.slice();
  const copia = cua.slice();
  const [triat] = copia.splice(posicio, 1);
  copia.unshift(triat);
  return copia;
}

function intercanviar(cua, i, j) {
  const copia = cua.slice();
  [copia[i], copia[j]] = [copia[j], copia[i]];
  return copia;
}

const cua = ['Cartelleria', 'Samarretes', 'Bosses de tela', 'Reimpressió'];

const [ates, restant] = atendreSeguent(cua);
console.log(ates);                         // 'Cartelleria'
console.log(restant);                      // [ 'Samarretes', 'Bosses de tela', 'Reimpressió' ]

console.log(avancar(cua, 3));
// [ 'Reimpressió', 'Cartelleria', 'Samarretes', 'Bosses de tela' ]

console.log(intercanviar(cua, 0, 3));
// [ 'Reimpressió', 'Samarretes', 'Bosses de tela', 'Cartelleria' ]

console.log(cua);
// [ 'Cartelleria', 'Samarretes', 'Bosses de tela', 'Reimpressió' ]  ✓ intacta a les tres

Les tres respecten la regla del projecte: copiar abans de modificar. atendreSeguent ni tan sols necessita copiar, perquè l'element resta ja crea un array nou. avancar combina slice (copiar), splice amb desestructuració (treure i quedar-se amb el que s'ha tret) i unshift (posar davant), tots tres de 04-03. I intercanviar és el truc de l'apartat 6 aplicat a posicions d'un array; sense desestructuració necessitaria una variable temporal.

Conclusió

La desestructuració d'arrays és una sintaxi petita amb un impacte gran en la llegibilitat. Saps que desempaqueta per posició, que pots saltar elements amb comes, donar valors per defecte que només s'activen amb undefined, i recollir la cua amb l'element resta ..., que va sempre l'últim i sempre produeix un array. Saps intercanviar variables sense auxiliar, desestructurar directament als paràmetres d'una funció —inclòs el = [] que evita l'error en cridar sense arguments— i desempaquetar estructures imbricades, amb l'advertiment que a partir de dos nivells la dada probablement demanava ser un objecte.

I l'has aplicada on de debò es nota: partint una dataLimit ISO amb split('-') per construir dataLlegible('2026-09-30') → '30 de setembre de 2026'; recorrent el resum de càrrega per responsable amb for (const [persona, hores] of Object.entries(carrega)); escrivint comparadores que diuen què comparen, ([, horesA], [, horesB]) => horesB - horesA; i entenent per fi, sense nota al peu, què significa for (const [i, tasca] of backlog.entries()). També has vist el patró [error, valor] i, sobretot, els seus límits davant de retornar un objecte: l'ordre és significatiu, equivocar-lo no dóna cap avís, i afegir una tercera dada trenca qui comptava posicions.

Aquest límit és justament la porta d'entrada a la lliçó següent. Les dades de Nómada Tasques no són parells ni ternes: són tasques amb nou camps amb nom, i per a elles desempaquetar per posició no té cap sentit. A Desestructuració d'Objectes, Spread i Rest aprendràs la variant que mana per nom, amb reanomenament i valors per defecte, escriuràs per fi l'objecte d'opcions de 03-03 directament a la signatura de la funció, i descobriràs l'operador ... en la seva altra faceta —el spread—, que permet copiar i combinar objectes i, amb això, escriure l'actualització immutable { ...tasca, estat: 'feta' } que és la base de tot el treball amb estat als frameworks moderns.

Desestructuració d'Arrays

Contingut

Què és desestructurar

La sintaxi bàsica

Saltar elements amb comes

Valors per defecte

La resta amb `...`

Intercanviar variables sense auxiliar

Desestructurar als paràmetres d'una funció

Arrays imbricats

Desestructurar el resultat de `split()`

Desestructurar `Object.entries()`

Desestructuració a `for...of`

El patró `[error, valor]` i els seus límits

Errors Habituals i Consells

Exercicis

Solucions

Conclusió

Curs de JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final

Desestructuració d'Arrays

Contingut

Què és desestructurar

La sintaxi bàsica

Saltar elements amb comes

Valors per defecte

La resta amb ...

Intercanviar variables sense auxiliar

Desestructurar als paràmetres d'una funció

Arrays imbricats

Desestructurar el resultat de split()

Desestructurar Object.entries()

Desestructuració a for...of

El patró [error, valor] i els seus límits

Errors Habituals i Consells

Exercicis

Solucions

Conclusió

Curs de JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final

La resta amb `...`

Desestructurar el resultat de `split()`

Desestructurar `Object.entries()`

Desestructuració a `for...of`

El patró `[error, valor]` i els seus límits