Destructuring

In Jurassic Park's laboratory, when a DNA sample arrives, technicians immediately sort it into the right containers - the genetic sequence here, the specimen ID there, the classification data somewhere else. JavaScript destructuring does the same: it unpacks values from objects and arrays into separate variables in a single, elegant statement.

Object Destructuring

1const dinosaur = {
2  name: 'Rex',
3  species: 'Tyrannosaurus Rex',
4  weight: 8000,
5  zone: 'A',
6  health: 95
7};
8
9// Without destructuring
10const oldName = dinosaur.name;
11const oldSpecies = dinosaur.species;
12
13// With destructuring
14const { name, species, weight } = dinosaur;
15console.log(name);    // "Rex"
16console.log(species); // "Tyrannosaurus Rex"
17console.log(weight);  // 8000
18
19// Renaming variables
20const { name: dinoName, zone: dinoZone } = dinosaur;
21console.log(dinoName); // "Rex"
22console.log(dinoZone); // "A"
23
24// Default values
25const { name: n, color = 'unknown', health = 100 } = dinosaur;
26console.log(color);  // "unknown" - not in object, uses default
27console.log(health); // 95 - in object, uses actual value

Nested Destructuring

Objects often contain nested structures. Destructuring can reach deep inside them:

1const dinoReport = {
2  name: 'Rex',
3  vitals: {
4    heartRate: 65,
5    temperature: 37.2,
6    bloodPressure: { systolic: 120, diastolic: 80 }
7  },
8  location: { zone: 'A', sector: 3 }
9};
10
11// Nested destructuring
12const {
13  name: reportName,
14  vitals: { heartRate, temperature },
15  location: { zone: reportZone, sector }
16} = dinoReport;
17
18console.log(reportName);  // "Rex"
19console.log(heartRate);   // 65
20console.log(temperature); // 37.2
21console.log(reportZone);  // "A"
22console.log(sector);      // 3

Array Destructuring

Arrays are destructured with square brackets. Position in the destructuring corresponds to index in the array:

1const dnaSequence = ['A', 'T', 'C', 'G', 'T', 'A'];
2
3// Extract first three elements
4const [first, second, third] = dnaSequence;
5console.log(first);  // "A"
6console.log(second); // "T"
7console.log(third);  // "C"
8
9// Skipping elements using commas
10const [, , thirdNucleotide, , fifthNucleotide] = dnaSequence;
11console.log(thirdNucleotide); // "C"
12console.log(fifthNucleotide); // "T"

Swapping Variables

Array destructuring allows elegantly swapping two variables without a temporary variable:

1let zoneA = 'Rex';
2let zoneB = 'Blue';
3
4// Swap values
5[zoneA, zoneB] = [zoneB, zoneA];
6console.log(zoneA); // "Blue"
7console.log(zoneB); // "Rex"

Default Values in Arrays

1const coordinates = [12.5];
2const [latitude, longitude = 0] = coordinates;
3console.log(latitude);  // 12.5
4console.log(longitude); // 0 (default)

Destructuring in Function Parameters

Destructuring is especially useful in function parameters:

1// Object destructuring in parameter
2function displayDino({ name, species, weight = 'unknown' }) {
3  console.log(`${name} (${species}) - ${weight} kg`);
4}
5
6displayDino({ name: 'Rex', species: 'T-Rex', weight: 8000 });
7// "Rex (T-Rex) - 8000 kg"
8
9displayDino({ name: 'Blue', species: 'Velociraptor' });
10// "Blue (Velociraptor) - unknown kg"
11
12// Array destructuring in parameter
13function processCoords([lat, lon]) {
14  console.log(`Latitude: ${lat}, Longitude: ${lon}`);
15}
16
17processCoords([12.345, 67.890]);
18// "Latitude: 12.345, Longitude: 67.890"

Combining Destructuring with Rest

The

...

1const allSpecies = ['T-Rex', 'Velociraptor', 'Triceratops', 'Brachio', 'Stego'];
2
3const [firstSpecies, secondSpecies, ...otherSpecies] = allSpecies;
4console.log(firstSpecies);   // "T-Rex"
5console.log(secondSpecies);  // "Velociraptor"
6console.log(otherSpecies);   // ["Triceratops", "Brachio", "Stego"]
7
8// Rest in objects
9const fullDino = { name: 'Rex', species: 'T-Rex', weight: 8000, zone: 'A', health: 95 };
10const { name: restName, ...dinoStats } = fullDino;
11console.log(restName);   // "Rex"
12console.log(dinoStats);  // { species: "T-Rex", weight: 8000, zone: "A", health: 95 }

"Destructuring is like sorting DNA samples in the lab" - says Dr. Rex. "Instead of manually pulling out each test tube, one move and you have exactly the data you need!"