JavaScript Object Spreading And Destructuring

"It's dangerous to go alone... Take this!" Here are a few tools to throw into your JavaScript tool belt!

• Object Spreading
• Object Destructuring
• Object Rest Parameter

 

Why these tools are awesome

All of these features of JavaScript help you write more concise code. I'll go over a very minimal set of examples, and give you a few keywords to search for if you want to learn more.

 

Object Spreading

You can use the special triple-dot "..." operator to spread object properties as arguments into a function call or other piece of code.

// Assume we have diabloReference(stay: string, and: string)
// Let's set up an object for an example
const deckardCain = {stay: "awhile", and: "listen" }

// You could pass them like this
diabloReference(deckardCain.stay, deckardCain.and)

// or you can use spread operator
diabloReference(...deckardCain)

You can also use the spread operator to combine, and override props of another object

const firstTry = {hero: "batman", color: "black"}
// Note, the order matters, the last value for a prop wins
const secondTry = {
    ...firstTry,
    color: "reallyReallyDarkGray",
    optional: "sidekick"
}
console.log(secondTry)
// Here, batman prefers gray because that color value came last
// {hero: "batman", color: "reallyReallyDarkGray", optional: "sidekick"}

const thirdTry = {
    color: "reallyReallyDarkGray",
    ...firstTry
}
console.log(thirdTry)
// But here, batman prefers black because it was applied last
// {color: "black", hero: "batman"}

 

Object Destructuring

This is super helpful for quick variable assignment. Have you ever written code like this? (note this is a bad example... but it still shows the power of what you can do :D)

const mario = getMario()
const hat = mario.hat
const power = mario.power
// ... more props extracted for good reasons of course

With destructuring you can do this instead

const {hat, power} = getMario();

See the power there? All assignment done in one line, and it reads really clean!

 

Object Rest Parameter

I have to admit, I'm not as familiar with the rest operator, but here's one way to use it, which I ran in to while working on a piece of open source code.

// Assume an object with a structure like this
const mario = {
    hat: "cappy",
    power: "flower",
    style: "oldSchool",
    game: "Mario Odyssey"
}

// You extract specific props, and group the "rest" into a named object
// Here, the triple dot is called a "rest" operator
const {hat, power, ...extras} = mario
console.log(hat, power, extras);
// cappy flower {style: "oldSchool", game: "Mario Odyssey"}

You can see that the extras variable now contains the props that weren't specifically extracted. The clever naming of the rest operator makes a lot of sense here. It now contains the rest of the props.

 

Conclusion

Hopefully you are beginning to see the power of these features. They've definitely changed the way I write my JavaScript. What I showed here is just scratching the surface, and there are a lot of docs and other blog posts to read.

It's probably good to note, spreading and destructuring also work with arrays. If you want great articles to look over, there are plently.

I'd recommend using a GOOGLE search for these terms to learn more

• javascript spread operator
• javascript rest operator
• javascript destructuring

Have fun writing cleaner JS code!