What's New in ES6 Part 1

Okay so we have been hearing about ES6 for a while now and you might have been wondering what this is again.. Well don’t be scared. Its still the same JavaScript you know but just with some new features to make you write lesser codes. Awesome right?
Without wasting too much time, we are going to see what those new features are. The new features would be talked about in three parts. This is going to be part one.

Let and Const Declaration

These allows us to declare variables rather than the conventional “var keyword. The “let actually replaces the “var while “const is a new type of declaration. The “let allows us to have block level scopes meaning that if we declare a “let variable in the global scope and we use that same variable in a loop or an if statement, it’s going to be completely different and be on its own scope which has kind of been a pain in the ass for some developers. “const is just a declaration for constant values i.e values that are not going to change at any time.
Let’s take a look at how “var and “let differs.

Output:

Why is it so?

At the first initialization, “a is 10. When the if condition is met, for the first console.log, it takes the value of the local variable thereby outputting 50 which is correct but for the second console.log, even though a new variable a was created in the local scope of the conditional, it changes the value of the variable in the global scope thereby changing it from 10 to 50 which is probably not the output we were expecting. Let us take a look at how “let is going to handle this.

Output:

Why is it so?

At the first initialization, “a is 10. When the if condition is met, for the first console.log, it takes the value of the local scope variable thereby outputting 50 which is correct. Because we are making use of the “let”, it does not allow block scope to over right the global scope so in this case, once the conditional statement is complete, the local scope is done and once we try to do the second console.log, it takes the value of the variable in the global scope which is exactly what we wanted.
Let us check out the “let“ and “var in a loop.

Output:

Take a look at the snippet above, if we comment out the second console.log, our output stops at 9, but with the second console.log, the output goes to 10. This is because the i variable has affected the definition outside the scope thereby allowing the second console.log to go inside the loop again which is not what we want. Take a look at what “let does instead.

Output:

If you consider the output above, you would notice that the local scope for the first console.log remains intact and when the second console.log tries to access that same variable that was defined in the loop (the block declaration), an error message was received saying variable “i was not defined which is exactly what should happen.

Const Declaration.

The “const declaration is used to simply assign a constant value to a variable. When this has been assigned, the values contained cannot be changed. Let us take a look at how this works.

Output:

We have declared our brand to be a constant variable and we have used the push method to assign values to our array. Now let us try to change the brand declaration from an array.

Output:

We can see that we get an error anytime we try to change the declaration type of a “const variable.
That is basically the usefulness of using “let and “const declarations. is works.

Classes and Inheritance.

Classes are now available in plain old JavaScript so we don’t need typescript or anything fancy like that. It is pretty similar to PHP or Java classes or any OOP language that makes use of classes. Let us jump in and do something with classes and inheritance.

The above snippet is a basic creation of a class and a constructor.
Constructors are methods that would run when the class is instantiated or when the object is created. They can take in parameters. In this case, the parameters are username, email and password.

In line 47 to 49, what we did was to take in the values passed (parameters) and assign them to properties of the class.

Next up is to create a method in our class. A method is basically a function that belongs to a class.

Output:

Our register method was created in line 51. All we did was in the console was to take the property value and concatenate it with another string and print out the value when the function is called upon. Line 55 creates an object of the User class with some default arguments been passed in.

In line 57, we then call the function and we can see the output just as expected. In the register method, you can pass in other property values from the class to see the output on your own.

We can also have what we call static methods. To do this, all we have to do is use the keyword “static”.

You can use some methods statically and some you cannot. For instance. In the example above, the register method cannot be used as a static method because you need to instantiate an object in order to do it or call it, but in the case of the numberOfUsers method, it is going to be the same no matter what.

All it has to do is echo out the number of users. For the static method, they do not need to be instantiated. So, to call them, all you have to do is shown below in line 60 above.

Output:

We can make use of inheritance too in JavaScript. Making use of the same example above, let us create a Member class that inherits the properties of the User class and then has its own extra parameters.

In the snippet above, we created a Member call and extended the User class meaning we are taking the features of the User class and adding them to the Member class even though the Member class would have its own extra parameter (bouquetType).

In line 64, rather than having to use the “this keyword like we used in the User class to add the properties, we can make use of the super method. What this does is to take the properties of the super class (User) and assign them to the new Member class. Line 65 helps to add a new property to the Member class.

We now want to try and get items from the new Member class.

Line 67 is the method we are using to get items from the class. This is similar to the register method we explained earlier.

In line 71, we created an object of chris from the Member class. In line 72, we are calling a method (register) that is not in the class Member. This is still going to work perfectly because we are inheriting all the properties of the User class so it is possible for us to still have access to the methods that were defined in the User class.

The final line is the method call for the getBouquet method we defined.

Output:

So that is basically how classes and inheritance can be used in ES6.

Template Literals/Strings

Template literals is somewhat easy to grasp and its really helpful especially if you are not a fan of concatenating strings to numbers, variables etc.

We are going to do a little HTML here to work with template literals. Take a look at the HTML snippet below. It’s pretty just basic.

Take a look at line 10. We have an empty div with an id of template. That is where we are going to populate our content from the JavaScript side. Let us write out our JavaScript now.

Taking a good look at the code above, you would notice that we have 2 sets of quotes forming a single string to be stored in the template variable. The text in the h2 tag could be a variable and also the text contained in the p tag. In Plain JavaScript or ES5, for us to be able to merge the both of them into one single variable, we would have to make use of the plus (+) sign to concatenate them together. If we were to have a very long item to join, then it might begin to look really buzzy and all which might not look nice. However, with template literals in ES6, it makes it so easy and simple to do. Look at the snippet below to compare with the one above with both giving the same output.

Notice the simplicity of the code and how easy it is to read the code. We have eliminated the single quotes starting each line of the string and also the plus (+) symbol and replaced the entire string value with a back tick. The back tick is the button just to the left of button 1 on the keyboard. Let us do another example where we want to bind data. Say we want to store some content in a variable, then add the values we stored in the variable to the string. In our normal JavaScript, here is how we would do something like that.

The above snippet is just a basic example so you might not really feel the benefit of using template literals but when you begin to have really long lines of strings to concatenate, then the work comes out. Notice on line 9, we had to make use of 3 plus sign, several single quotes and all. There is a possibility that when the strings get really long, you might omit one or thereabout. Writing the above with template literals is way easier and not likely to run into errors that easy. Let us take a look at the same code written with template literals.

If you take a good look at the snippet above, you would observe that it is less prone to errors than the previous. The whole string is pt inside one single back quotes and the variables to be passed in are put inside curly braces with the dollar sign wrapping them ( ${ } ). It pretty easy and straight forward to work with something like this.

We can also make use of a function inside a template literal. Let us take a look at how we can do that.

I bet you already know what our output should be. Just in case, here is it.

Output:

So that’s it on Template literals.
Stay tuned for more on the New features of ES6.
Thanks for reading.