ES6 Destructuring with Crayons

#es6 #javascript

Recently I've begun a mentorship program to become a better developer. In my day to day work, I focus mainly on Python but I like to try to keep my hand in other languages and so I spend time working on Express.js, Node.js, and React.js projects as well. I was in one of the first Udacity React Nanodegree classes and though I made it through the program and earned my Nanodegree, it was mostly because I worked my tail off and ground through the concepts. To make a long story short, I made it through but I was far from mastering the content.

One of the core concepts that the course went over but that I didn't really grok on the first pass was ES6 destructuring, specifically the spread and rest operations. I was able to barely get through the Redux portion of the course with a rough understanding of the concept and a lot of help from the mentor Udacity assigned me. Since then, I've gotten a pretty good handle on the concept and as a former Marine, I've decided to break it down crayons and glue style, in true jarhead fashion.

If you don't get the joke or understand the reference suffice to say that when Marines make fun of each other or other branches do, we're basically assumed to be dumb enough that eating crayons and glue is something we do. Now, I've been out of the Marine Corps for almost 20 years but I still think of myself as one and when I really want to make sure that I understand something I try to break it down "Crayon" style for myself and others. So, in keeping with a true crayon breakdown of a concept here's how I came to understand the concept of the Rest and Spread operations.

For my example, I'm going to use a Javascript object representing a box of crayons.

const boxOfCrayons = {
 yellow: "yellow",
   blue:  "blue",
   red:   "Red"
}

Let's say we're super happy with our crayons, just making little suns, and pools of water and red houses but after a time we get bored drawing basic things over and over and we'd like a little more variety in our drawings or our hour devours if we're Marines. Here's where Spread comes in.
To make a new object we Spread the crayons out and add our new objects:

const biggerBoxOfCrayons = { ...boxOfCrayons,
                purple: "purple",
                green:  "green",
                orange: "orange"
               }

This copies all of the objects in our original box, adds the new color objects into our box, and now we have an even larger box of crayons to use in our art projects or to add just the right amount of new wax for our culinary endeavors. However, we might be purists. We only really like to eat our yellow and blue crayons. The rest are just overcomplicated and overwhelm our basic pallets. So we destructure the Bigger Box of Crayons:

const { blue, yellow, red, purple, green, orange } = biggerBoxOfCrayons

and make a smaller box, a pure box:

const pureBox = { blue, yellow }

Now, we've got our pure box of only the most delicious crayons. But what if we're more adventurous? What if we like every crayon except those? Well, this is where Rest comes it.

Very literally, the Rest operation gives you the rest of an object. In this case, if we don't want our yellow and blue crayons we just want the rest all we have to do is pull those out of our bigger box, like this.

const { blue, yellow, ...keepers } = biggerBoxOfCrayons

We take our box of crayons, designate the colors we don't want and then simply mark the ones we want as keepers or as the REST!
Then we make our new Delicious box:

const newDeliciousbox = {...keepers}

That's the simplest way this crayon chomping, glue swilling former Jarhead could figure out how to break down how to use Spread and Rest in ES6. Thanks for taking the time to give it a read. May your crayons always be fresh and your glue always be Elmer's.