Can you explain destructuring in ES6 with examples?

Can you explain destructuring in ES6 with examples?

Sure! Destructuring in ES6 allows you to unpack values from arrays or properties from objects into distinct variables. For example, for an array:

const arr = [1, 2, 3];
const [a, b] = arr;
console.log(a); // 1
console.log(b); // 2

And for an object:

const obj = { x: 1, y: 2 };
const { x, y } = obj;
console.log(x); // 1
console.log(y); // 2

What are the benefits of using destructuring?

Destructuring makes your code cleaner and more readable. It reduces the need for repetitive code when accessing properties or elements. It also allows for easier variable assignment and can help avoid errors when dealing with nested structures.

Can you show me an example with nested objects?

Absolutely! Here's an example with a nested object:

const user = {
  id: 1,
  name: 'John',
  address: {
    city: 'New York',
    zip: '10001'
  }
};

const { name, address: { city } } = user;
console.log(name); // John
console.log(city); // New York

Are there any common mistakes to avoid?

Yes, a common mistake is trying to destructure undefined values. Always ensure the object or array you're destructuring exists. Also, be careful with variable names; if they don't match the property names, you'll end up with undefined values.