Explain the concept of destructuring assignment for objects and arrays
TL;DR
Destructuring assignment is a syntax in JavaScript that allows you to unpack values from arrays or properties from objects into distinct variables. For arrays, you use square brackets, and for objects, you use curly braces. For example:
// Array destructuring
const [a, b] = [1, 2];
// Object destructuring
const { name, age } = { name: 'John', age: 30 };
Destructuring assignment for objects and arrays
Destructuring assignment is a convenient way to extract values from arrays and objects into separate variables. This can make your code more readable and concise.
Array destructuring
Array destructuring allows you to unpack values from arrays into distinct variables using square brackets.
Basic example
const numbers = [1, 2, 3];
const [first, second, third] = numbers;
console.log(first); // 1
console.log(second); // 2
console.log(third); // 3
Skipping values
You can skip values in the array by leaving an empty space between commas.
const numbers = [1, 2, 3];
const [first, , third] = numbers;
console.log(first); // 1
console.log(third); // 3
Default values
You can assign default values in case the array does not have enough elements.
const numbers = [1];
const [first, second = 2] = numbers;
console.log(first); // 1
console.log(second); // 2
Object destructuring
Object destructuring allows you to unpack properties from objects into distinct variables using curly braces.
Basic example
const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name); // John
console.log(age); // 30
Renaming variables
You can rename the variables while destructuring.
const person = { name: 'John', age: 30 };
const { name: personName, age: personAge } = person;
console.log(personName); // John
console.log(personAge); // 30
Default values
You can assign default values in case the property does not exist in the object.
const person = { name: 'John' };
const { name, age = 25 } = person;
console.log(name); // John
console.log(age); // 25
Nested objects
You can destructure nested objects as well.
const person = { name: 'John', address: { city: 'New York', zip: '10001' } };
const {
name,
address: { city, zip },
} = person;
console.log(name); // John
console.log(city); // New York
console.log(zip); // 10001