Destructure Everything

#javascript #todayilearned #codenewbie #codepen

Destructuring is a convenient way of extracting multiple values
from data stored in objects and Arrays.

Let's take a look on how to destructure an object:

const info = { name: 'Telmo', age: 33, twitterHandler: '@telmo' }

// Destructure data from `info`
const { name, age, twitterHandler } = info

console.log(name, age, twitterHandler) // Telmo 33 @telmo

What we've done here? Instead of accessing the data through info.name, info.age, etc;

We extracted the data from info, this way you prevent calling info.X multiple times.

Let's mock an example where you're making an API call, for this we'll be using JSONPlaceholder, you can take a look to figure out what it does.

A straight forward example is the one provided on the homepage, where we can fetch data from https://jsonplaceholder.typicode.com/todos/1 and it should return something like:

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

Let's build a simple component so we can then extract the data from the API call:

import React from 'react'

export default function MyComponent() {
  return (
    <div>My amazing component 🚀</div>
  )
}

Great, now let's assume the data from the API call is being passed to the component through props, we can either extract the data before we return our component:

import React from 'react'

export default function MyComponent(props) {
  const { userId, id, title, completed } = props

  return (
    <div>
      Task ID: {id}
      Created by user ID: {userId}
      Task title: "{title}"
      Completed: {completed}
    </div>
  )
}

Looks great, but we can still save at least one least in your code, take a look:

import React from 'react'

export default function MyComponent({ userId, id, title, completed }) {
  return (
    <div>
      Task ID: {id}
      Created by user ID: {userId}
      Task title: "{title}"
      Completed: {completed}
    </div>
  )
}

By extracting the data directly on MyComponent(), we no longer need to extract the data through const { ... } = props.

Let's play with brackets (Arrays)

Check the example bellow and notice the comments:

const myTags = ['React', 'Next', 'Gatsby']

// Get first element of the array
console.log(myTags[0]) // React

// Destructuring the array
const [tag] = myTags

console.log(tag) // React

Looks way better.

Going a little further, I found out about this just a few days ago, and it's
amazing how good the code looks using this. Let's imagine the following data structure:

"deliveries": [
  {
    "id": 337948,
    "shipments": [
      {
        "number": "FOO-5905959044",
        "products": [
          {
            "title": "Apple Pie"
          },
          {
            "title": "6 Pack Coronas"
          },
          {
            "title": "Doritos"
          },
          {
            "title": "Burgers"
          }
        ]
      }
    ]
  }
]

Let's destructure this sucker using the same component as before, assuming this data is being passed to the component props:

// Destructuring happening right here within `MyComponent()`
export default function MyComponent({
  data: { deliveries }
}) {
  return (
    deliveries.map(delivery => {
      const {
        id,
         // Beauty of destructuring arrays
        shipments: [shipment]
      } = delivery
      // Destructuring data from the first array of `shipments`
      const { number, products } = shipment

      return (
        <div>
          Order with ID {id} and tracking shipment
          number {number}

          <ul>
            {products.map(({ title }) => ( // Destructuring happening here within `()`
              <li>{title}</li>
            ))}
          </ul>
        </div>
      )
    })
  )
}