ES6 (ECMASCRIPT) for Beginners | Advanced JavaScript

In this post I will cover some new features of ES6. It will be helpful if you are new to ES6 or learning front-end frameworks.

Topics covered in this post:

1.  Let and Const
2. Arrow functions
3. Default Parameters
4. For of loop
5. Spread Attributes
6. Maps
7. Sets
8. Static Methods
9. Getters and Setters

Let

Let is similar to var but has scope. Let is only accessible in the block level it is defined.

In the above example variable “a” is defined inside IF statement and so it’s not accessible outside the function.

Another example:

Video Explanation:

Const

Const is used to assign a constant value to the variable. And the value cannot be changed. Its fixed.

Consider another example:

This may be little confusing:

Consider in this way. Whenever you define a const variable, javascript references the address of the value to the variable. In our example the variable “lANGuAGES” actually references to the memory allocated to the array. So you cannot change the variable to reference some other memory location later. Throughout the program it only references to the array.

Arrow Function

Functions in ES6 have changed a bit. I mean the syntax.

The new syntax may be confusing a little bit.

There are two parts of the syntax:

The first part is just declaring a variable and assigning the function (i.e) () to it. It just says the variable is actually a function.

Then the second part is declaring the body part of the function. The arrow part with the curly braces defines the body part.

Another example with parameters.

I don’t think I need to give explanation for this. Its straightforward.

Video Explanation:

Default parameters:

If you are familiar with other programming languages csharp, ruby and python then default parameters is not new to you.

Default parameters are parameters which are given by default while declaring a function. But it’s value can be changed when calling the function.

Example

In the above example we are passing only one parameter. The function makes use of the default parameter and executes the function.

Consider another example:

In the above example , the function takes two parameters and the second parameter replaces the default parameter.

Consider another example:

When you are calling the function with parameters they get assigned in the order. (i.e) the first value gets assigned to the first parameter and the second value gets assign to the second parameter and so on …

In the above example , the value 20 gets assigned to parameter ‘a’ and ‘b’ is not having any value. So we are not getting any output.

But,

Works fine.

Video Explanation:

For of Loop:

For…of is very similar to for…in with slight modification.

For…of iterates through list of elements (i.e) like Array and returns the elements (not their index) one by one.

Note that the variable ‘value’ outputs each element in the array not the index.

Another example:

Yes it works for string too.

Video Explanation:

Spread attributes:

Spread attributes help to spread the expression as the name suggests. In simple words , it converts a list of elements to an array and vice versa.

Example without spread attributes:

Above example is straight forward . we are declaring a function to accept array as parameter and returning its sum. Its simple.

Now consider the same example with spread attributes

In the above example , the spread attributes converts the list of elements (i.e) the parameters to an array.

Another example:

Math.max is a simple method that returns the maximum element from given list. It doesn’t accept an array.

So lets use our saviour:

In the above example, the spread attributes converts the array list of elements.

Video Explanation:

Maps

Map holds key-value pairs. Its similar to an array but we can define our own index. And indexes are unique in maps.  

Example:

I think the above example is self explanatory. Other interesting features of maps are all indexes are unique. And we can use any value as key or value.

Example:

Other useful methods used in maps:

In the above example, map.keys() returns the keys of the map but it returns it in Iterator object. It means that it can’t be displayed as it is. It should be displayed only by iterating.

Another example:

The above example is self-explanatory. The for…of loop outputs the key-value pair in array.

We can optimise it a little bit.

Video Explanation:

Sets

Sets are used to store the unique values of any type. Simple !

Example;

Note that no duplicate values are displayed. Uniqe values are displayed.

And also note that sets are iterable objects. We have to iterate through the elements to display it.

Other useful methods.

In the above example size is self-explanatory. There is another method ‘has’ which return a Boolean value based on whether the given element is present in the set or not.

Video Explanation:

Static Methods:

Most of yov have already heard about static methods. Static methods are introduced in ES6. And it is pretty much easy to define itand use it.

Example:

Note that I didn’t vse the keyword ‘function’  inside class.

And I can call the function without creating any instance for the class.

Video Explanation:

Getters and Setters:

Getters and setters and one of the useful feature introduced in ES6. It will come in handy if you are using classes in JS.

Example without getters and setters:

I think the above example is self-explanatory. We have two functions in class People that helps to set and get the name of the person.

Example with getters and setters:

In the above example , you can see there are two functions inside class People with ‘get’ and ‘set’ properties. The ‘get’ property is used to get the value of the variable and ‘set’ property is used to set the value to the variable.

And you can see that getName function is called without parenthesis. And setName function is called without parenthesis and it’s just like assigning a value to the variable.

Video Explanation:

Thank you for your time. Hope you enjoyed the article J J

Inshallah more features of ES6 will be covered in my upcoming articles.  Stay tuned !!!