ES6 Features | Block Scope & Arrow Function

ES6 also known as ECMAScript 2015 took the JavaScript enthusiasts around the world by storm with its unique features. It’s more famous than any other ECMAScript version and you probably won’t find any JavaScript developer who hasn’t put the new ES6 features in practice. 

Did you know?

Six different versions of ECMAScript were released before ES6 (Yes, there was a version 5.1 too)!

So, what makes ES6 different from the other ECMAScript versions?

From the template literals to an arrow function, nearly every feature of ES6 is not just ingenious but solved some major issues with JavaScript. 

In this article, we’ll be discussing two fundamental features of ES6 that will change the way you’ve been coding in JavaScript. Just to keep it interesting, our second ES6 feature, arrow functions can reduce five-lines of code into one! 

Block Scope in ES6 | const and let 

In programming, variables are used to store data. There are three ways to declare variables in JavaScript:

• var 
• let
• const

Before ES6, the variables declared in JavaScript had two scopes; local scope and global scope. The scope of a variable can be defined as the visibility and accessibility of the variable in certain parts of the code. A variable is said to have:

• Function scope: when the variable is declared within the parenthesis of a function 
• Global scope: when the variable is declared outside of the parenthesis or at the top of the overall program code

To solve the issue of function and global scope in a variable, let and const were introduced in ES6. Both let and const are block-scoped variables and can only be accessed within the given block or parentheses that they are declared in. 

Before ES6 – Variable Declaration using var

Before ES6, a variable in JavaScript could be accessed outside the block or parentheses. One variable could even be re-assigned within the scope of a function. This lead to a number of issues:

• Code became hard to maintain
• Collision with variables from different libraries
• Variable could be accidentally re-declared and re-assigned 
• JavaScript takes a little longer to find the global variables as compared to the local variables

Take an example of two donut variables declared and assigned using var. Both variables are declared with the name donut but the value of the donut inside the eatDonut function has been reassigned from ‘chocolate glazed’ to ‘chocolate-filled’. 

In the example below, you can access the variable donut even outside of the block scope.

How Did Let Solve the Issue of Global and Local Variables? 

The variables declared with ‘let’ in JavaScript have block scope. It means that they can’t be accessed anywhere outside the parentheses. If we declare a new variable with the same name within the block then it’ll throw an error and if we re-assign a variable outside the given block, it will be treated as a new variable.

Let’s expand the concept using the donut problem from the previous example. If your donut is declared with let and assign the value ‘chocolate-filled’. Assign a new value to your donut variable within the same block. An error will be thrown that ‘the identifier has already been declared’.

If you declare a variable using let, assign it a value, and try to access it outside of the scope. You’ll get the same error: ‘Identifier donut is not defined’. 

We have a Block-scoped Variable! Now, Why do we Need Const? 

Why indeed!

Const is also a block-scoped variable but that’s not all. Once you’ve declared a variable using const and assigned a value, it cannot be re-assigned. The value is now constant hence the name const! 

To understand this, take the donut shop example again. If you declare a variable donut using const then once the value has been assigned, there’s no changing it. If you try to assign a new value to the variable donut, then you’ll get the error: ‘assignment to constant variable’

Arrow Functions in ES6

Arrow functions are a personal favorite from the ES6 features list. It’s a new concept in JavaScript but was previously (and currently) available in CoffeeScript as the fat arrows. 

Before ES6: 

The function in JavaScript was defined with the keyword function followed by the name of the function and the parentheses which include the code to be executed. That’s two lines of code just to define a function.

In the image below, you can see a function definition in JavaScript:

After ES6:

Arrow functions in JavaScript are more concise and optimize function scope while coding. All arrow functions can be anonymous (defined without a name) and make use of a new token ‘=>’ instead of the function keyword.  

The arrow functions also handle ‘this’ keyword differently as compared to the regular functions. In a regular function, ‘this’ keyword refers to the object that is called the function. This object can be anything, for example, a button or a document. In the arrow functions, ‘this’ keyword ALWAYS refers to the object that called the function. 

Arrow Function with Two Parameters

With the arrow function, we can define the function from the regular function example in a single line!

Arrow Function with One Parameter

In an arrow function with only one parameter, we can also eliminate the round parenthesis.

Arrow Function with No Parameter

In the arrow function below, there are no parameters. We’ve also eliminated the curly braces and returned a string directly. 

ES6 has many more cool features. We’ll discuss these features in the upcoming articles. In the meantime, try using let, const, and arrow functions in your code and comment down below if you have any questions. 

Categorised in: Javascript

This post was written by Nearly Done