ES6 Series: Default Arguments, Object Definitions & Destructuring

The reason I have put all three of these into a single article is because separate they are just average updates, but their powers combine to create Amazing Awesomeness. So I will introduce you to each of them, then show ways they combine to do awesome things.

Default Arguments

This is something that has been needing to happen for quite some time. To show how this works, I am going to show how we do it now, then how we used to do it.

Do you remember those days. I try not to anymore.

The argument=defaultValue seems pretty straight forward, if you have an argument you can have a default value assigned.

Object Definitions

There are some cool things with object Definitions to showcase.

The object uses the same name naming. If the variable is the same name you don’t need to declare it like we used to name: name instead you can just use the name. You can also declare a function just by functionName(){} no need to functionName: () => ().

Destructuring

This is my favorite one. Watch this!

Now name and car are their own variables. But it gets better. What if you didn’t want you variable named song, but music?

Boom, done.

Is there anything else? Oh ya.

It works with arrays.

Combine the powers!

That is pretty crazy. I also threw in the spread operator as a bonus. ([…props] and {…props} preforms a shallow copy and spreads then on the same level, pretty sweet)

Bonus Track

I was going to close it off there but I can’t leave without one of the coolest parts of destructuring and reassigning. I was going to leave it off because it is dependent on a framework at the moment, it is importing. This stuff works there too!

Cool huh!

Be sure to look at the whole series: ES6 Series

or the next section: ES6 Series: Arrow Functions