I’ve been doing some good ol es6/babel related Javascript, and destructuring has been something I seem to always forget! This entry will simply be a refresher for me (and hopefully, for you too) on how to destructure javascript objects!
Let’s start with some object I’m going to use for the rest of this example:
const human = {
name: 'bobby',
head: {
eyes: 'brown',
ears: 'normal',
mouth: {
color: 'red',
voice: 'loud'
}
},
height_in_inches: '70',
two_thumbs: true
}
Boom. You want to be able to grab data from an object. Rather than:
const eyes = human.head.eyes;
You can destructure the variable by doing the following:
const { eyes } = human.head;
Pretty neat, considering you don’t have to type eyes
twice when you want the variable name to be the same. SWEET!!
Let’s suppose you want to rename a value without changing the results from an API. Note that this API uses snake case rather than camel case. You would have to do the following:
const heightInInches = human.height_in_inches;
With destructuring javascript, renaming a variable is a breeze! Here’s how to do it:
const { height_in_inches: heightInInches } = human;
heightInInches
will be the name of variable.
What if you need to extract multiple variables from nested data? for example, you might want the human’s head
, as well as the eyes
and ears
from within the head
. Naively, you might try a two step approach, first getting the head
from the human
, and then the data within it:
const { name, head } = human;
const { eyes, ears } = head;
But wait! You can do that all in one shot! Here’s how:
const {
name,
head,
head: { eyes, ears }
} = human;
When you console.log:
console.log(name); //=> bobby
console.log(head); //=> { eyes: 'brown', ears: 'normal', mouth: { color: 'red', voice: 'loud'} }
console.log(eyes); //=> brown
console.log(ears); //=> normal
Now, you’ve learned how to destructure, rename while destructuring, and extracting nested data within an object!
No Comments Yet
Let us know what you think