Learn ES6 The Dope Way Part IV: Default Parameters, Destructuring Assignment, and a new method!
Welcome to Part IV of Learn ES6 The Dope Way, a series created to help you easily understand ES6 (ECMAScript 6)!
Today let’s explore two new ES6 concepts and introduce a new method!
- Default Function Parameters
- Destructuring Assignment
- A New ES6 Method ❤
Default Function Parameters
Benefits:
- Useful for situations when you need default values in a function.
- When undefined is passed in, it will still use the default value instead!
Beware:
- If you set a function as a default value inside of another function, it will throw a ReferenceError
- The location of your input values, when you call a function, will affect whether you reach the parameter with the default value. For example, if you had two parameters and wanted to reach the second parameter, you would only enter one item in the function you are calling. Since the second parameter would be missing the default value would appear there. See examples below for further explanation.
If you’ve ever wanted to create a function that would have default values as a backup…CONGRATULATIONS! This glorious day has finally arrived!
Default function parameters allow you to initialize default values if either no values are passed, or if undefined is passed. Before, if you had something like this:
You would get NaN, not a number. But now you can do this:
You get 12! This means if you don’t specifically add values to this function when you call it, it will use the default values. So you can also do this:
The overwriting of default values will occur based on the position in which you enter your input values when you call the function. For example:
When passing undefined values, the default value is still chosen:
If no default value is assigned for a parameter, it will just return undefined, as normal:
Destructuring Assignment
Benefits:
- Extracts data from arrays and objects and assigns them to variables
- Simplifies the amount of keystrokes needed, and improves readability
- Super useful when needing to pass in large amount of data with the same properties (such as user profiles)
Beware:
- Can be a bit complicated to understand in the beginning, but once you understand its benefits, just review the examples provided and research further. You’ll get the hang of it! :)
Let’s take a step back and learn about Destructuring Assignment, and how it’s used in relation to Arrays, Objects, and even in combination with Default Parameters!
First, let’s practice with arrays by creating an array of Bunny’s favorite food. We could access the first and fifth item in the array the traditional way:
Or we could use Destructuring Assignment! We do this by removing the variable name and passing in a bracket that will point to what items we want in the array when we call it:
Whoa whoa whoa! What just happened? Where is our Papaya?
AHA! Got you there!
Check this out — firstItem and fifthItem are just words. The real trick here is where they are placed. The location of the word you place in the brackets will correspond to the location of the item you want in the array.
This is why the first word in the brackets — firstItem — corresponds to the first item in the array ‘Carrots’’ and the second word—fifthItem — corresponds to the second item in the array, ‘Carrot Bits’.
Here’s how to get access to a different location with the same word:
Play around with this code in your console so you can better understand this new concept, and tell us all in the comments section what you find. :)
Ok, we’ve got arrays down, so now how about Destructuring Assignment with objects? Let’s first check out the typical way we access items in an object:
Now let’s destructure this object using a similar approach to what we used with arrays . Take away the variable name and in it’s place, put curly braces — as this is an object — just like we did brackets for arrays.
Inside the curly braces, pass in the object properties that we’ll want access to:
Here’s a slightly more complicated but useful way of using Destructuring:
Let’s say you have a function that you want to gain access to all the objects with the same properties but different values. This can be especially useful for large data sets, such as user profiles. But in this example we will use Bunny’s favorite things to make the concept clear:
So what just happened?
When we passed in our objects(iceCream, sushi, fruit), the favThings function parsed it and allowed us to access these properties because we used same property names in each object.
Combining Destructuring Assignment with Default Parameters
Study the example below:
Or if you had an object and array ready for Destructuring:
A New ES6 Method ❤
Benefits:
- Repeat strings without using your own algorithm
Beware:
- Negative numbers and infinity will cause a RangeError
- Decimal Numbers will be rounded down to an integer
Ever seen that algorithm, the one that you usually get when you first start learning algorithms and it asks you to repeat a word/string several times?
CONGRATULATIONS!
Your string-repeating-algorithm days are over!
Introducing the new repeat.() method brought to you by ES6!
Here’s how it works:
Though if you’re reading this and you’re learning algorithms or haven’t started learning them yet, I would highly advise to actually create a function for repeating a string and not using this method since that would defeat the purpose of learning and solving challenges. Once you got it down, go ahead and use this method to your heart’s content. YIPEE!
Congrats! You’ve made it through Learn ES6 The Dope Way Part IV and now you’ve acquired two super important ES6 concepts: Default Function Parameters and Destructuring Assignment, as well as learned a fun new method for repeating a string! Yay! Go you!
Remember that if you want to use ES6, there are still browser compatibility issues, so use compilers like Babel or a module bundler like Webpack before publishing your code. All of these will be discussed in future editions of Learn ES6 The Dope Way! Thanks for reading ❤
Keep your wisdom updated by liking and following as more Learn ES6 The Dope Way is coming soon to Medium!
Part II: (Arrow) => functions and ‘this’ keyword
Part III: Template Literals, Spread Operators & Generators!
Part IV: Default Parameters, Destructuring Assignment, and a new ES6 method!
Part V: Classes, Transpiling ES6 Code & More Resources!
You can also find me on github ❤ https://github.com/Mashadim
