ES6 Advancements: arrow functions and const/let variables

ES6 was released in June of 2015. With it came many new features such as arrow functions, let and const, promises, modules, and classes. There are many more but these are the most widely adopted according to a survey done by 2ality.com. All of these things technically existed in Javascript before ES6 was implemented but the new release made them easier to write and read, something called “syntactic sugar.” This article will be mostly about arrow functions but we will also touch on the difference between const, let and why var has been thrown by the wayside.

Arrow Functions

The pure capability of arrow functions is a very common, recurring theme throughout programming languages. I started my journey with Ruby so to me it’s easy to see the similarities between it and blocks, others may recognize the same with lambda functions in Python, Java or C++. The main benefits lie in the realm of a shorter syntax and “this” not being bound.

Invoking the arrow function, sometimes referred to as fat arrows, relieves developers from having to type “function” with each invocation. Below is a simple example of how the function syntax changes going from traditional functions to an arrow.

Traditional function expression
Example of an arrow function

Binding of “this”

Earlier in the article, we talked about one of the arrow functions’ benefits being “this” is not bound. Before ES6 functions all had their own execution context. In a practical sense, this means that both arguments, as seen above, and forms of “this” are both inherited from their parent function.

Using arrow functions to manipulate datasets

Arrow functions are helpful in a myriad of ways but perhaps none are more apparent than the use of methods like map, filter, where, find, and forEach. These come into play when manipulating datasets, arrays in particular. Below we have a forEach method being called on values with multiple parameters being passed in from a parent object.

Note that curly braces are only necessary when enclosing multiple statements inside the same function. A similar example could be written in this manner.

Const/Let variables

Now that we have covered the syntactic difference in ES5 functions versus arrow functions let’s dive into the new variables brought about in ES6. Previously var, which is either globally or functionally-scoped, was the only available variable declaration in Javascript. We won’t spend much time on var because it is fading towards the world of depreciation. While var is still available in ES6, it is best practice to now use either const or let. The addition of these variable declarations lets our code become a bit more intuitive, I’ll explain.

Let

Let’s start with let variable declarations. First of all, they are block-scoped, meaning everything inside a certain set of curly braces. Second, let can be modified but not re-declared. Below we have a couple of examples.

Here we see that we can modify a let variable
In this example, we see that we can’t re-declare a let variable

We use let instead of const when we know the variable will be modified, or at least have the ability to be modified, at some point in our code. The opposite is true for const declarations of variables, along with a couple of other rules.

Const

Const variables, obviously short for constant, are also block-scoped and can be neither updated or re-declared. Once they are invoked, they will hold the same value throughout the entire block. So in our above example of let, we could change the value of the variable, here we see that we cannot update or re-declare it.

Hoisting

Const and let variable declarations are both hoisted to the top of their scope before the execution phase. Here lies another difference in the ES5 and ES6 variables. With let/const variables are uninitialized when the execution phase begins, whereas var declared variables are initialized but with a value of undefined.