ES6 Advancements: arrow functions and const/let variables

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.

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.

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

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store