Destructuring

“Destructuring” w JavaScript to technika umożliwiająca wyciąganie wartości z obiektów (oraz tablic) i przypisywanie ich do zmiennych w bardziej zwięzły sposób. Ta metoda znacznie upraszcza kod i czyni go bardziej czytelnym, szczególnie gdy pracujemy z obiektami o dużej złożoności.

Załóżmy, że mamy obiekt reprezentujący użytkownika:

const user = {
	name: 'Jan Kowalski',
	age: 30,
	email: 'jan.kowalski@example.com'
};

Bez użycia destructuring, dostęp do tych właściwości wyglądałby tak:

const name = user.name;
const age = user.age;
const email = user.email;

Dzięki destructuring, możemy to zrobić w jednej linii:

const { name, age, email } = user;

Destructuring z domyślnymi wartościami

Czasami możemy chcieć ustawić domyślne wartości dla niektórych właściwości, na wypadek gdyby nie były one dostępne w obiekcie. Destructuring znakomicie sobie z tym radzi:

const { name, age, phone = 'brak danych' } = user;

Jeśli user nie zawiera właściwości phone, zmienna phone otrzyma wartość 'brak danych'.

Zmiana nazw zmiennych

Możemy również zmienić nazwy zmiennych podczas destructuring:

const { name: userName, age: userAge } = user;

Teraz zamiast name i age, używamy userName i userAge.

Głębszy destructuring

Destructuring może być stosowany rekurencyjnie, co pozwala na wydobywanie właściwości z zagnieżdżonych obiektów:

const user = {
	name: 'Jan Kowalski',
	age: 30,
	contact: {
		email: 'jan.kowalski@example.com',
		phone: '123-456-789'
	}
};

const {
	name,
	contact: { email, phone }
} = user;

console.log(email); // Wynik: jan.kowalski@example

Użycie z funkcjami

Destructuring jest szczególnie użyteczny w parametrach funkcji, gdy parametry są obiektami o wielu właściwościach. Zamiast przekazywać cały obiekt, możemy przekazać tylko te właściwości, których potrzebujemy:

const user = {
	name: 'Jan Kowalski',
	age: 30,
	email: '',
	phone: '123-456-789'
};

function displayUser({ name, age, email }) {
	console.log(`Nazwa: ${name}, Wiek: ${age}, Email: ${email}`);
}

displayUser(user);

🔗 Dodatkowe materiały:

Masz pytania lub uwagi?

Przejdź na Discord