Learn ES6 The Dope Way Part III: Template Literals, Spread Operators, and Generators!
Welcome to Part III of Learn ES6 The Dope Way, a series created to help you easily understand ES6 (ECMAScript 6)!
Let’s adventure further into ES6 and cover three super valuable concepts:
- Template Literals
- Spread Operators
- Generators
Template Literals
Benefits:
- Easy expression interpolation and method calls! See examples below.
- Including complex information in the format you want is simple!
- You don’t need to worry about multiple quotation marks, multi-lines, spaces, or using “+” sign either! Only two back ticks recognize all the information inside of them! Woohoo!
Beware:
- Commonly called “Template Strings”, as this was their name in prior editions of ES2015 / ES6 specification.
- Variables and parameters need to be wrapper in dollar sign and curly braces, ie. placeholder ${EXAMPLE}.
- The plus sign,“+”, inside of a Template Literal literally acts as a math operation, not a concatenation if also inside ${}. See examples below for further explanation.
Migrating to Template Literal Syntax
After reviewing the benefits and items to be aware of, take note of these examples and study the subtle differences with using Template Literals:
Let’s checkout an even more complex way of using Template Literals! Look at how easy it is to include all this information without worrying about all the “+” signs, spaces, math logic, and quotation placement! It can be so convenient! Also please note, you will need to include another dollar sign, outside of the placeholder, if printing out prices:
Wow, so much simpler!! It’s so exciting…Ahh!!
Spread Operators
If you have multiple arguments in an array that you want to insert into a function call, or multiple arrays and/or array elements that you want to insert into another array seamlessly, use Spread Operators!
Benefits:
- Easily concats arrays inside of other arrays.
- Place the arrays wherever you want inside of that array.
- Easily add arguments into function call.
- Just 3 dots ‘…’ before the array name.
- Similar to function.apply but can be used with the new keyword, while function.apply cannot.
Let’s take a look at a situation where we would want to add several arrays into another main array without using the Spread Operator:
With the Spread Operator, your arrays are automatically inserted and concatenated wherever you’d like. No need for any extra steps:
Another useful example:
Potentially more useful than .apply()
What if you have multiple arguments to place inside of a function? You could use the good ol’ Function.prototype.apply:
Or use the Spread Operator:
In ES5 it is not possible to compose the new keyword with the apply method. Since the introduction of the Spread Operator syntax, you can now!
Generators
Benefits:
- Allows you to pause functions to be resumed later.
- Easier to create asynchronous functions.
- Used commonly with setTimeout() or setInterval() to time asynchronous events.
Be aware:
- You know you are looking at a generator if you see * and the word yield.
- You need to call the function each time so the next function within is called, otherwise it won’t run, unless it’s within a setInterval().
- Result naturally comes out in object form, add .value to get value only.
- Object comes with done property that is set to false until all yield expressions are printed.
- Generators end either when all functions/values have been called or if a return statement is present.
Example:
Generators are super useful when it comes to asynchronous functions calls. Let’s say you have 3 different functions that you’ve stored in an array and you want to call each one after another after a certain amount of time:
This can similarly be accomplished via a promise (an operation that hasn’t completed yet, but is expected in the future) as well. Developers sometimes use promises and Generators together in their code, so it’s good to be aware of both.
Congrats! You’ve made it through Learn ES6 The Dope Way Part III and now you’ve acquired three super valuable concepts! You can now safely brush up and make efficient use of Template Literals, Spread Operators, and Generators within your code. Woohoo! Go you!
Although, you might want to wait since there are still browser issues with ES6 and it’s important to 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
