Destructuring

const {🧍🏻‍♀️} = 👩🏻‍🤝‍👨🏼

This week at FlatIron Bootcamp, we started Phase 2: working with React. Now as a baby software engineer that just **barely** got her footing with (vanilla) JavaScript, I felt absolutely slapped in the face with the introduction of React and JSX, the X-rated version of JavaScript. (Just kidding. JSX stands for JavaScript XML, a syntax extension of plain ol’ JavaScript. This is what we use to do stuff with React.) While I could and maybe one day will write about JSX, all we need to know for the purposes of understanding what I’m about to write about (hint: see the title), is that JSX is declarative (it’s a dommy mommy language that “orders” React to do things/carry out tasks that in vanilla JS we would have to do manually), looks weirdly like HTML, and we can run functions and vanilla JS alongside it.

We started learning how to build components, the basic building blocks of React, and how to manipulate the DOM and update it dynamically/based on user input. React is cool because it’s a library of code that we can import and use in our own projects — there’s no need to reinvent the wheel. One such thing we imported, a hook called useState, allowed us to track data or properties that change over the course of a component’s life, i.e. a state. Once you import useState, which is a function, and use it, useState allows you to set the current state (by providing it an initial value) and also returns the current state and a function that updates that state. It looks like this:

const [currentState, updateCurrentState] = useState("initial value")

HOLD UP. WHAT is happening here? Everything is backwards?! BREATHE, dear reader (and past Ashley). This useState info is presented through array destructuring. Backing up a bit, recall that SWE’s are all about being streamlined with their code and making it aesthetically pleasing and efficient. Array destructuring is a method to do that. Basically, we are assigning values to multiple variables in one line. Here’s a simpler example. Both of these are doing the same thing:

const array = [1, 2, 3, 4]
const a = array[0]
const b = array[1]

const [a, b] = array

In both cases, if we console log the variables a and b, we are going to get the values of 1 and 2, respectively; the latter is just an easier, lazier way to write the former.

In addition to being less code, array destructuring allows us to set variables to the output of functions.

function sumMultiply(c, d) {
return [c+d, c*d]
}
sumMultiply(5, 10) //=> [15, 50]

OR

const array = sumMultiply(5, 10)
console.log(array) // => [15, 50]

Here we’ve set the value of the array as the return value of the function. BUT WAIT, THERE’S MORE! Unlike the disappointing follow-ups done by infomercials and Gotcha ads of the 90’s, array destructuring keeps on giving – we can set individual variables to the elements of the return array.
const [x, y] = sumMultiply(5, 10)
// x is equal to 15 and y is equal to 50

What does this have to do with the price of potatoes?! Well, this is how we are assigning values to the return values of useState! useState is a function that is already written and we grab it from React. The code goes *beep boop beep* and then it returns its version of [x, y], were x is the current state and y is a function. Instead of writing it longhand, we go ahead and assign its outputs variables right there and then.

Beautiful. Stunning. Fascinating. But the cool thing about destructuring, much like how entropy eventually spreads to everything, is that it also applies to objects. [] are to arrays as {} are to objects and so naturally object destructuring also uses curly braces, {}. Object destructuring is useful in React and dealing with react components because of props.

Let’s say we have this object:

const furChild = {
name: "Ruby",
breed: "Samoyed",
age: "9",
color: "white",
personality: "sassy",
loves: "men",
}
Using object destructuring, I can pull out the individual values from this object by grabbing the keys.

const { name, breed, color} = furChild

Now if I console log name, I’ll get Ruby; console log breed, Samoyed; console log color, white.

I’m going to save the meat and potatoes of props for some other time, but basically object destructuring is yet another important method we use in React to make values easier to grab and move around/between components.

Anyway, this is my blog post for today, just me trying to reassure past Ashley that I do understand why useState is const’ed in the way that it is. Hopefully this helps you too, reader, on your quest to gain more knowledge or to troll through the internet.