Destruktyryzacja i spread operator

Destruktyryzacja (destructuring) i operator spread to dwie techniki, które znacznie ułatwiają pracę z danymi w JavaScript. Ich kombinacja otwiera drzwi do szybkiego i czytelnego przetwarzania danych. W tym artykule dowiesz się, jak je wykorzystać.

Desktrukturyzacja

Desktrukturyzacja to mechanizm w JavaScript, który pozwala na wygodne wyciąganie danych z różnych struktur danych, takich jak obiekty i tablice. Dzięki niej możemy szybko i zwięźle uzyskać dostęp do potrzebnych nam elementów, co znacznie ułatwia pracę z danymi.

Desktrukturyzacja obiektów

const person = { firstName: 'John', lastName: 'Doe', age: 30 }

const { firstName, lastName } = person
console.log(firstName) // Wyświetli: John
console.log(lastName)  // Wyświetli: Doe

Desktrukturyzacja tablic

const numbers = [1, 2, 3, 4, 5];

const [first, second, ...rest] = numbers;
console.log(first)  // Wyświetli: 1
console.log(second) // Wyświetli: 2
console.log(rest)   // Wyświetli: [3, 4, 5]

Spread Operator

Operator spread pozwala na łączenie danych w obiektach i tablicach. Dzięki niemu możemy w prosty sposób łączyć dane z różnych źródeł. Operator ten możemy użyć także jako parametr funkcji.

Spread Operator w obiektach

const person = { firstName: 'John', lastName: 'Doe' }
const additionalInfo = { age: 30, occupation: 'Developer' }

const combinedPerson = { ...person, ...additionalInfo }
console.log(combinedPerson)
// Wyświetli: { firstName: 'John', lastName: 'Doe', age: 30, occupation: 'Developer' }

Spread Operator w tablicach

const numbers = [1, 2, 3]
const additionalNumbers = [4, 5, 6]
const combinedNumbers = [...numbers, ...additionalNumbers]
console.log(combinedNumbers)
// Wyświetli: [1, 2, 3, 4, 5, 6]

Spread Operator jako parametr funkcji

Użycie operatora spread jako parametru funkcji pozwala na przekazanie dowolnej liczby argumentów do funkcji. Jest to tzw. parametr rest, który łączy wszystkie przekazane argumenty w tablicę. Funkcja zaprezentowana w poniższym przykładzie dodaje do siebie wszystkie argumenty, w tym sumuje wszystkie elementy tablicy c poprzez funkcje reduce.

function sum(a, b, ...c) {
    return a + b + c.reduce((acc, val) => acc + val, 0);
}
sum(1, 2, 3, 4, 5); // Wyświetli: 15

Połączenie desktrukturyzacji i operatora spread

W poniższym przykładzie wykorzystujemy desktrukturyzację i spread operator do wyciągnięcia z obiektu person pojedynczych wartości firstName i lastName oraz pozostałych wartości do obiektu info.

const person = { firstName: 'John', lastName: 'Doe', age: 30, hobbies: ['reading', 'singing'] }

const { firstName, lastName, ...info } = person
console.log(firstName) // Wyświetli: Alice
console.log(lastName)  // Wyświetli: Doe
console.log(info)      // Wyświetli: { age: 30 hobbies: ['reading', 'singing'] }