Learning ECMAScript

ECMAScript 6 – 101

ES6 is the new way of writing Javascript. It has many new features to offer and introduces a different way of writing functions and syntax, which I first found quite confusing. However, it starts making sense eventually when you start writing your own functions and soon I felt it to be quite intuitive and logical as well. The new additions clearly seem to address key pain points from developers and overall make the language a little more funky!

I found detailed documentation on ES6 on multiple websites, but I recommend taking a look at http://es6-features.org/.

I intend to write this post as sort of a mini reference manual for myself and my team members at work, so I will cover the most important features along with a short script on how I can/cannot use it.

#1 Constants & Block Scoped Variables:

This is the only way I would declare my variables till date in JavaScript. The problem with it is that all my variables are scoped at a global level. So in a big JS file if somewhere down the line I accidentally use the same variable name and assign a new value to it, any references to this variable would get the new value.

ES6 solves this problem by letting us declare constants and block scoped variables.

Any variable that you define with the “const” keyword is considered immutable. You cannot re-assign a new value to it. This is super helpful if I want to declare config variables that are going to be used in multiple functions and inline scripts. I don’t have to worry about accidentally altering the value, JS will simply not allow it.

Block scoped variables allow you to create and destroy variables within a short scope such as a function.

The above snippet is pretty much self explanatory.

#2 Arrow Functions & Default Parameters

Arrow functions ( => ) allow you to write compact function declarations. There is no need to use the “function” keyword anymore. Consider the following snippet.

 

#3 Template Strings

Of all the new features in ES6, I found template strings to be the most refreshing update in JS. Its simple to use and makes my life so much easier.

 

#4 Spread Operators

I still find spread operators a bit weird. It’s kind of a short hand method of writing stuff, but it will take some time for me to be completely comfortable with it.

As you can see in the above code there are two log messages. In the first message you will find that myFirstArray is inserted into mySecondArray as an Array object.

In the second log message, you see that the values within myFirstArray are inserted into mySecondArray and not the Array object itself. This is possible by using the (…) spread operator as shown above.

#5 Destructuring Assignment

Destructuring is again a useful way of writing code that is easy to read. It allows me to write functions and scripts that can be understood intuitively by my colleagues.

On lines 1, 7 and 12 above you can see that we can reference specific parts of an array by using destructuring assignment.

Similarly we can apply this to any custom object as seen on line 25. We can create a function that takes destructured parameters and while calling the function you simply pass the entire object. The function will automatically only extract the required attributes it needs from the object and pass it further within the function body.

 

#6 Map, Filter & Reduce

.map() is a new method to iterate through a collection in ES6.

.filter() is a method also available on collections to iterate through it and filter unwanted elements.

 

.reduce() is used to arrive at a single value from an Array in ES6.

It passes 4 arguments to our callback method:

  1. previous value
  2. current value
  3. index
  4. array object on which .reduce is called

A simple use could be adding up all values within a given array. Let’s try and do this in ES5 and ES6.

Note that since we are calling .reduce() on a single array the result from the callback would be a single value and not an array.

If we call .reduce() on an array of arrays the result from the callback would be a single array.

If we call .reduce() on an array of objects the result from the callback would be a single object.

Let’s try this out in the snippet below.

You can also pass an optional value for the previous parameter which will be used for the very first iteration. Short example below.

 

Since I did not want to write a very lengthy post covering each and every new feature of ES6, I have only covered the ones which I found the most useful upfront for my day to day needs. You can now even define classes and use inheritance in ES6, but I am not going to cover all of that here. For full details on each and every new feature do read this website.

Great, so I am a little relieved that I can now understand some syntax on other forums and tools which I found weird earlier since I did not know ES6. This should be super helpful for me when I start learning React and other technologies.

 

Leave a Reply