Destrukturyzacja obiektów i tablic

W laboratorium Parku Jurajskiego naukowcy codziennie pracują z ogromnymi zbiorami danych - parametry witalne dinozaurów, współrzędne GPS, wyniki analiz DNA. Destrukturyzacja w JavaScript pozwala szybko "wyciągnąć" potrzebne wartości z obiektów i tablic, zamiast odwoływać się do nich ręcznie za każdym razem.

Destrukturyzacja obiektów - podstawy

Destrukturyzacja obiektów pozwala wyciągnąć właściwości z obiektu do osobnych zmiennych w jednej linii:

1const dinosaur = {
2  name: 'Rex',
3  species: 'Tyrannosaurus',
4  weight: 8000,
5  zone: 'A'
6};
7
8// Bez destrukturyzacji
9const name1 = dinosaur.name;
10const weight1 = dinosaur.weight;
11
12// Z destrukturyzacją - znacznie krócej!
13const { name, species, weight, zone } = dinosaur;
14console.log(name);    // "Rex"
15console.log(species); // "Tyrannosaurus"
16console.log(weight);  // 8000

Nie musisz wyciągać wszystkich właściwości - możesz wybrać tylko te, których potrzebujesz:

1const { name: dinoName, zone: dinoZone } = dinosaur;
2console.log(dinoName); // "Rex"
3console.log(dinoZone); // "A"

Zmiana nazwy zmiennej (alias)

Gdy nazwa właściwości obiektu koliduje z istniejącą zmienną lub chcesz użyć innej nazwy, możesz nadać alias za pomocą dwukropka:

1const sensor = { id: 'S-001', value: 42.5, status: 'active' };
2
3// Zmieniamy nazwy zmiennych
4const { id: sensorId, value: reading, status: sensorStatus } = sensor;
5console.log(sensorId);     // "S-001"
6console.log(reading);      // 42.5
7console.log(sensorStatus); // "active"

Wartości domyślne

Jeśli właściwość nie istnieje w obiekcie, możesz ustawić wartość domyślną:

1const specimen = { name: 'Blue', species: 'Velociraptor' };
2
3// health nie istnieje w obiekcie - użyj wartości domyślnej
4const { name: specimenName, health = 100, zone: specimenZone = 'Nieznana' } = specimen;
5console.log(specimenName);  // "Blue"
6console.log(health);        // 100 (domyślna)
7console.log(specimenZone);  // "Nieznana" (domyślna)

Destrukturyzacja zagnieżdżona

Obiekty często zawierają zagnieżdżone struktury. Destrukturyzacja pozwala sięgnąć w głąb:

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// Destrukturyzacja zagnieżdżona
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

Destrukturyzacja tablic

Tablice destrukturyzujemy za pomocą nawiasów kwadratowych. Pozycja w destrukturyzacji odpowiada indeksowi w tablicy:

1const dnaSequence = ['A', 'T', 'C', 'G', 'T', 'A'];
2
3// Wyciągamy pierwsze trzy elementy
4const [first, second, third] = dnaSequence;
5console.log(first);  // "A"
6console.log(second); // "T"
7console.log(third);  // "C"
8
9// Pomijanie elementów za pomocą przecinków
10const [, , thirdNucleotide, , fifthNucleotide] = dnaSequence;
11console.log(thirdNucleotide); // "C"
12console.log(fifthNucleotide); // "T"

Zamiana wartości zmiennych

Destrukturyzacja tablic pozwala elegancko zamienić wartości dwóch zmiennych bez zmiennej tymczasowej:

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

Wartości domyślne w tablicach

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

Destrukturyzacja w parametrach funkcji

Destrukturyzacja jest szczególnie przydatna w parametrach funkcji:

1// Destrukturyzacja obiektu w parametrze
2function displayDino({ name, species, weight = 'nieznana' }) {
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) - nieznana kg"
11
12// Destrukturyzacja tablicy w parametrze
13function processCoords([lat, lon]) {
14  console.log(\`Szerokość: \${lat}, Długość: \${lon}\`);
15}
16
17processCoords([12.345, 67.890]);
18// "Szerokość: 12.345, Długość: 67.890"

Łączenie destrukturyzacji z resztą (rest)

Operator `...` pozwala zebrać "resztę" elementów:

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 w obiektach
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 }

"Destrukturyzacja to jak sortowanie próbek DNA w laboratorium" - mówi Dr. Rex. "Zamiast ręcznie wyciągać każdą probówkę, jeden ruch i masz dokładnie te dane, których potrzebujesz!"