Category: javascript

Posted on

Destructure Nested Array And Object

When doing deep and nested destructuring, you can destructure array items by index

function nestedArrayAndObject() {
  const info = {
    title: 'Once Upon a Time',
    protagonist: {
      name: 'Emma Swan',
      enemies: [
        {name: 'Regina Mills', title: 'Evil Queen'},
        {name: 'Cora Mills', title: 'Queen of Hearts'},
        {name: 'Peter Pan', title: `The boy who wouldn't grow up`},
        {name: 'Zelena', title: 'The Wicked Witch'},
      ],
    },
  }

  // const title = info.title
  // const protagonistName = info.protagonist.name
  // const enemy = info.protagonist.enemies[3] <----
  // const enemyTitle = enemy.title
  // const enemyName = enemy.name

  const {
    title,
    protagonist: {
      name: protagonistName,
      enemies: {
        3: { // destructure nested array by index
          title: enemyTitle,
          name: enemyName,
        },
      },
    },
  } = info;

  return `${enemyName} (${enemyTitle}) is an enemy to ${protagonistName} in "${title}"`
}

console.log(nestedArrayAndObject());
// Zelena (The Wicked Witch) is an enemy to Emma Swan in "Once Upon a Time"

Thanks to @KentDodds for the example on his ES6 and Beyond YouTube series.

Posted on

Never console.log(objOrArray) and have to dig down into the items or properties again!

console.table(data) logs your data as a table in the console

console.table(data) can be used to log any array or enumerable properties of an object into a table format in the console.

This function is available in all modern browsers, except IE.

The function takes one mandatory argument, the data that you want to log. It must be an object or array. It has a second optional parameter which can define which columns that you want to display.

The first column in the table will be labeled (index). If data is an array, then its values will be the array indices. If data is an object, then its values will be the property names.

// logs a sortable table right in the console!
console.table(["one", "two", "three"]);
(index) Values
0 “one”
1 “two”
2 “three”

Object with string properties


  const person = {
    firstName: "RJ",
    lastName: "Schmertz"
  }

  console.table(person);
(index) Values
firstName “RJ”
lastName “Schmertz”

Array of objects


  const person1 = {
    firstName: "RJ",
    lastName: "Schmertz"
  }
  const person2 = {
    firstName: "Ryan",
    lastName: "Smith"
  }
  const person3 = {
    firstName: "Cassie",
    lastName: "Jones"
  }

  console.table([person1, person2, person3]);
(index) firstName lastName
0 “RJ” “Schmertz”
1 “Ryan” “Smith”
2 “Cassie” “Jones”

Object whose properties are objects


  const person1 = {
    firstName: "RJ",
    lastName: "Schmertz"
  }
  const person2 = {
    firstName: "Ryan",
    lastName: "Smith"
  }
  const person3 = {
    firstName: "Cassie",
    lastName: "Jones"
  }

  const family = {};

  family.father = person1;
  family.brother = person2;
  family.sister = person3;


  console.table(family);
(index) firstName lastName
father “RJ” “Schmertz”
brother “Ryan” “Smith”
sister “Cassie” “Jones”

Restricting which columns are displayed


  const person1 = {
    firstName: "RJ",
    lastName: "Schmertz"
  }
  const person2 = {
    firstName: "Ryan",
    lastName: "Smith"
  }
  const person3 = {
    firstName: "Cassie",
    lastName: "Jones"
  }

  const family = {};

  family.father = person1;
  family.brother = person2;
  family.sister = person3;


  console.table([person1, person2, person3], ["firstName"]);
(index) firstName
0 “RJ”
1 “Ryan”
2 “Cassie”
Proudly powered by WordPress