Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:7Length:40 minutes
Babel 1
  • Overview
  • Transcript

3.3 Other Cool Stuff

There are a lot of cool new features in ES6, and in this short course, we can't possibly explore them all. So in this lesson, I'll introduce a few of my favourites: smaller features of ES6 that have helped me to write cleaner, easier-to-read code. We'll take a quick look at arrow functions, let, const and destructuring.

1 lesson, 02:53

Free Lesson

2.Getting Started
2 lessons, 14:42

Free Lesson
Babel on the Client

Babel on the Server

3.Experimenting With ES6
3 lessons, 18:09



Other Cool Stuff

1 lesson, 04:28


3.3 Other Cool Stuff

Hi, my name is Jason Green. And welcome to this short course on Full Stack ES6 with Babel. In this lesson, we're gonna have look at a couple of other cool things that you can do with ES6. Now, with this being a short course, there's no way I can offer you an exhaustive list of all of the new features in ES6. But these are just a couple of my other favorites that have made my life easier. So if we go to our Babel starter folder and run Gulp, and we'll run our server in another tab, you can see it's running our Fibonacci sequence that we were working on in the last lesson. Let's go into the client, and we'll remove that so that we can look at some new stuff. So the first thing I wanted to show you, is that we can now use the const key word for constant. Now we've always got some values that we don't want to change. And JavaScript has always just been equipped with the var key word for creating variables. But let's say we have some numbers that we don't wanna change and we want to be notified if we do accidentally try to change them after we've initially set them up. By declaring these variables as constants, we can be assured that the Babel compiler will throw if we ever try to change them. For me, it was quite confusing at first, because if I run this code, and we actually go to look at it at the output, you'll see that the constants have just been changed to vas, so you might be wondering what good this is. But that's because Babel will throw an error during compilation if we do try to change them. So lets say we have a little function like this, called isInRange. And it basically just gets past a number and will return true or false to tell you if that number is within the max and min range. So [INAUDIBLE] console log 300 in range, and 100 in range. So the output there is as we expected, 300 is true 100 is false. Now lets just say some other developer comes along whose working on your project and mistakenly goes to change max height later on in the program to, I don't know, 250. We go to refresh and you see 300 is still in range. Actually nothing is changed because Babel threw a compilation error stating that max height is read only. So this just generally makes your code more readable and makes your intentions clear. The next thing I want to look at is block scoping so up until ES6 JavaScript has always had function level scoping. This means that scope is confined to functions. It means this is in range function, will have its own internal scope and as we know with closures it can reach out to its parent's code but not the other way around. This is not so for lock items such as for and if when we declare a variable inside a for loop it actually gets added into the parent's scope. Now to continue the lesson, we'll need to comment out this max height here. Cuz it's stopping our compiler. So you'll see when we refresh here, we see the inside variable of i being logged out. But also the outside variable of i equals 10. If I change this, to let, it will now be scoped to this four loop and will not exist outside. If I run that again, you'll see that we have a reference error and i is no longer defined outside of that scope. Let's comment that out so we can continue. So the benefit here, is it's just a lot more tidy. You can keep reusing i for all of your four loops without having to worry about them clashing with each other. Next we're going to have a look at something called de-structuring. Let's say we have a function, and it takes a person object. These person objects could be instances of a person class or they may just be objects of data. Now, let's say we wanna extract the name, age, and job from this person object. We would have to do something like this, all right? Then, if we want to print out some information about the person, we can do this. So this obviously works, but it's a bit cumbersome. With es6, we can extract variables from an object with the following syntax. We can wrap the variable declarations in curly braces and then each of these, inside the curly braces will be declared as variables, and they'll be extracted or destructured from this object. Now if we call doStuff, passing in a person object, you'll see it has correctly printed out Jason(31) works as a Developer. This also works on arrays. Let's just say we have a certain API that returns a response. And we know that response is an array of two items, the first being status and the second being body. We can extract the status in the body from the response, just like this, using square braces because we know it's an array. Finally I want to take a look at arrow functions. On one level arrow functions are a syntactically cleaner way of writing functions. They can be quite useful for situations where you would usually have to use a utility library like underscore or low dash. Let's just say we have an array of objects and each object has a name property. But what we really wanna do is convert this array into an array of strings with the name. Now, you could go and get a library like low dash and do array.map and then parsing_.property name. This _.property function basically returns another function that extracts the name from the object that's passed to it. We can avoid downloading the entire library of load dash by using an arrow function. The arrow function syntax would be like so. Now an iterative function could look like this, the round braces inside some round braces we put the argument that's passed to it. Then a fat arrow made out of an equal sign and a greater than sign. And then we can type x.name. Now basically in arrow functions we don't have to write return x.name, it works just the same, like this. So you can see we have quite a syntactically concise method now of extracting a property without having to resort to another library. So I cancel log that string array, you can see that its its correctly output an array with direct strings, no longer with any objects. The other cool thing about arrow functions is that they don't create a closure, which allows us to maintain the same scope. If I can give you example, imagine we have some class and we have the method on the prototype of that class called someMethod. Let's just say we have an array of points on this, on the instance of this class and we wanna iterate them and increment that values of all of the points. Inside this iterator function, we cannot refer to this any longer because this would be the context of this function, not this one. So we have to set self equal to this and we can refer to the instance in here like so. The arrow function does not create a new scope. So we can just say point as the argument, arrow function, curly brace, and then we can write out the rest of our commands here, this.x plus plus this.y plus plus. Well, that's all for this lesson. Check back in for the next and final lesson where we'll be taking a bit more of a critical look at Babel to make sure that we are using it for the right reasons, and not just because it's a shiny new toy to play with. Ciao.

Back to the top