This is the final part of the What’s New in ES6 series. Been awesome right?
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.
https://cdn-images-1.medium.com/max/800/1*p8-rSt228dqo6F-28xle_w.png
Output:
https://cdn-images-1.medium.com/max/800/1*9QYQJT83cypgskd9PE-QSw.png
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.
https://cdn-images-1.medium.com/max/800/1*Nun-kB-lq31CxENtPgqCVA.png
Output:
https://cdn-images-1.medium.com/max/800/1*ZAmqZt7aUSXU1umDPEu0nQ.png
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.
https://cdn-images-1.medium.com/max/800/1*UqMPPC7lj4s8kVdWE6RkzQ.png
Output:
https://cdn-images-1.medium.com/max/800/1*ZAmqZt7aUSXU1umDPEu0nQ.png
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.
https://cdn-images-1.medium.com/max/800/1*U72ZJrweLfNiTtrCeufBrw.png
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.
https://cdn-images-1.medium.com/max/800/1*YJtXVTiP2jCCAKrjRBoaUg.png
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.
Now, we would be looking at 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.
https://cdn-images-1.medium.com/max/800/1*O9Ctxtr0BopYjvYkQBFoMg.png
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?
https://cdn-images-1.medium.com/max/800/1*1MYpam4YClXkdhQRM2ABzw.png
Woops.. That is quite some lines of code. Note: We are making use of a dummy rest API here.
Output:
https://cdn-images-1.medium.com/max/800/1*78JeqtIpFh3py9PtfIGoQw.png
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.
https://cdn-images-1.medium.com/max/800/1*a24E17yaTouimEiw7jh5Jw.png
And in our HTML page, we are going to create an unordered list with the id of users.
https://cdn-images-1.medium.com/max/800/1*Ig122eGa30shA7Dq0TaaIA.png
Output:
https://cdn-images-1.medium.com/max/800/1*NeN0CBzp3OiZ8iz8yCi9Jg.png
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.
https://cdn-images-1.medium.com/max/800/1*AubSDcsGsAhjrexpBjzLfg.png
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:
https://cdn-images-1.medium.com/max/800/1*xqiHnJ37k1IeM_Ajzwo8qQ.png
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.
https://cdn-images-1.medium.com/max/800/1*6ja43ZFDWWNPCpgJQsQziQ.png
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:
https://cdn-images-1.medium.com/max/800/1*CERczbD1cem_zDtZ5mVhNg.png
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.
https://cdn-images-1.medium.com/max/800/1*Y-Sz2m3baPs6rCZq4ME5pg.png
Output:
https://cdn-images-1.medium.com/max/800/1*lRr66OGBCv71uf2egFEX2Q.png
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.Â
Gear up for more.
Thanks for reading.
Top comments (0)