What’s New in ES6 — Part 3
Its been an amazing journey on this series right? What’s New in ES6! We will be discussing quite a number of awesome concepts introduced in ES2015/ES6. In this part we will be discussing Arrow functions, Promises and Generators!
Arrow Functions
Arrow functions are simply another way to writing functions that the regular way we all know. There are 2 main benefits of using arrow functions.
One is that they help you write shorter syntaxes and saves you a few key strokes.
The second and more important reason is that they allow you to bind “this” lexically. In the past, you probably had to rename “this” to something else or store it in a “this” variable but with ES6, this has been taken care of nicely.
Let us take a look an example. Consider the snippet below.
Output:
We are getting an error because of line 9. It cannot recognize the “this” keyword used there even though we have it defined in line 4. The only way to fix this would be to create a variable before the return statement as shown below.
Output:
We can now see that the error message did not appear again as before. Am I the only one who thinks this is pretty way too many lines of code? Let us see how ES6 handles this.
Output:
We can see that with lesser lines of code, we were still able to get the same result as before.
Let us take a look at another example of the syntax. Firstly, we are going to write it in our regular JavaScript then we are going to see the ES6 version.
We should all know the output of this code is going to be 4. Now let us take a look at the ES6 version and compare which is faster and easier to work with.
What exactly did we change? First, we removed the function keyword and replace it with the equal to and greater than symbol (regarded as the arrow function). Note: If we were having just a single line declaration in the function, then we would have also removed the curly braces holding the function. But since we had 3 lines, we made use of the curly braces.
Promises
What exactly are promises?
Promise object is used for deferred and asynchronous computation. That sounded big, right? Yeah, I guessed as much. What am trying to say is promise object represents an operation that is not complete yet but it is expected to be in the future. That sounds better. Let us take a look at an example.
This is just a basic one showing how promise works. This outputs 7 to the console after 3 seconds. This code might not really be helpful but it is just to show you how it works. Let us do something more useful. How about we use it to fetch data from an API?
Woops.. That is quite some lines of code. Note: We are making use of a dummy rest API here.
Output:
The result we get is an array of objects showing a list of todos.
Now, rather than logging our result to the console, let us print it out on our web page. We are going to comment out our console statement and print out the output.
And in our HTML page, we are going to create an unordered list with the id of users.
Output:
Awesome. We made use of several components of the ES6 package ranging from the template literals, to the for-of-loop, to promises, to the let declaration. Great work.
Generators
Generators in ES6 are basically functions that can be passed and then resumed as many times as we like. At each pause time, it can yield or return a value. Creating a generator is similar to creating a generator. The way to turn a function into a generator is by putting an asterisk just before the function name or after the function keyword. Let us take a look at how that works.
Let us take a look at line 10. If we tried calling gl function without storing it an a variable, we would not get the result we wanted. Let us see the output.
Output:
Notice the object that was created? It has a done property that returns a Boolean to us telling us if the yield is complete. Because we have 2 yields, it gives us the false state. We can also just print out the value rather than the object which we got by using .value just after the next method. Let us try to fix the output so we can make the done state to be true.
We can see that we had to call our console.log severally so that our done state can be changed. We also notice how we can use the .value to get the value stored in the object. The return keyword was also used in our generator function. Let us take a look at our output.
Output:
Rather than having to use the console.log severally and getting the return statement printed out, we can make use of an iterator to handle this. Let us take a look at how we can do that using the for-of-loop.
Output:
Tada. We can now see that our return statement is not printed out, and we did not have to write as many console.log statements as we did before.
There are quite a lot of things that can be done with generators in ES6.
Finally, we have come to the end of this series on ES6.
If you have followed this series from the beginning, i greatly appreciate that, if not…i still appreciate that. Please leave comments, feedback or questions. Don’t forget to leave claps too… and for yourself!
