JavaScript ES6 Destructuring

What is destructuring in JavaScript?

Destructuring is a syntax feature introduced in ES6 that allows you to unpack values from arrays or properties from objects into distinct variables. This makes it easier to extract and work with data.

How do you perform array destructuring?

Array destructuring allows you to assign elements of an array to variables in a single statement using square brackets.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors;

console.log(firstColor); // red
console.log(secondColor); // green

Can you provide an example of object destructuring?

Object destructuring allows you to extract properties from an object into variables using curly braces.

const person = { name: 'Alice', age: 30, city: 'New York' };
const { name, age } = person;

console.log(name); // Alice
console.log(age); // 30

What happens if you try to destructure a property that doesn't exist?

If you try to destructure a property that doesn't exist, the variable will be assigned undefined.

const person = { name: 'Alice' };
const { age } = person;

console.log(age); // undefined

How can you provide default values when destructuring?

You can provide default values for variables in case the property being destructured does not exist in the object.

const person = { name: 'Alice' };
const { name, age = 25 } = person; // Default age is 25

console.log(name); // Alice
console.log(age); // 25

What is nested destructuring?

Nested destructuring allows you to extract values from nested objects or arrays.

const user = {
  id: 1,
  profile: {
    name: 'Alice',
    age: 30
  }
};

const { profile: { name, age } } = user;

console.log(name); // Alice
console.log(age); // 30

Can you destructure function parameters?

Yes, you can destructure function parameters directly in the function definition, allowing you to extract values from objects or arrays passed as arguments.

function displayUser({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

const user = { name: 'Alice', age: 30 };
displayUser(user); // Name: Alice, Age: 30

How do you destructure with rest parameters?

You can use the rest operator (...) to collect the remaining properties into a new variable when destructuring.

const person = { name: 'Alice', age: 30, city: 'New York', country: 'USA' };
const { name, ...rest } = person;

console.log(name); // Alice
console.log(rest); // { age: 30, city: 'New York', country: 'USA' }

What is the difference between destructuring and traditional assignment?

Destructuring allows you to unpack values from arrays or properties from objects in a more concise and readable manner, while traditional assignment requires multiple lines of code and can be less clear.

// Traditional assignment
const colors = ['red', 'green', 'blue'];
const firstColor = colors[0];
const secondColor = colors[1];

// Destructuring
const [firstColor, secondColor] = colors;

Can you destructure arrays and objects at the same time?

Yes, you can destructure both arrays and objects in the same statement, provided they are properly nested.

const data = [1, 2, { a: 3, b: 4 }];
const [first, second, { a, b }] = data;

console.log(first); // 1
console.log(second); // 2
console.log(a); // 3
console.log(b); // 4