Safely access nested object with ES6 Destructuring

How can we use ES6 Destructuring to access values from nested object or array without using safeguards with && operators?

Let's start with a basic example of destructuring. This is how we can destructure values from the object and assign them to variables.
We can also rename variables to a different name and give default value ie. if an object doesn't have that key(this is important for our topic)

  const data = {
    id: '123',
    value: 'someValue'
  };

  // access id and value from data with destructuring 
  const { id , value } = data;

Now let's try to access the nested object.

  const data = {
    user: {
      id: 1,
      name: {
        first: 'Amit',
        last: 'Chauhan'
      }
    }
  };

If we want to safely read firstName from this data this is how we would write without destructuring

  const firstName = data && data.user && data.user.name && data.user.name.first;

Let's do it with destructuring.

  const {
    user: {
      name: {
        first: firstName // rename variable to firstName
      } = {} // this part is where we give default value to empty object so code doesn't break
    } = {} 
  } = data;
  console.log(firstName); // Amit

We can use destructuring to access an array as well.

  const dataArray = [{
    name: {
      first: 'Amit'
    }
  }];

  const [{
    name: {
      first: firstName
    } = {}
  } = {}] = dataArray;
  console.log(firstName); // Amit

Bonus tip

We can use destructuring to swap variables.

let a = 10;
let b = 20;

[a, b] = [b, a];
console.log({ a, b }); // { a: 20, b: 10 }