ES6 Concepts to know before starting MEAN Stack development
By: Ashwin Sathian
Tags: JavaScript, Class, ES6

A couple of days ago, I came across an article which listed the top features brought to the fore by the latest in Javascript, ES2019/ES10. That got me chuckling because only the other day, I had a discussion about how many people even after all these years are unaware of most ES6 concepts, although they use it on a daily basis across Javascript-based frameworks like Angular, Node, Express etc. Hence, I decided to write this piece, covering in a quick review, what the top ES6 concepts that you absolutely should know are, before diving into MEAN stack development.

let and const

Seriously, if you are still using var , keep that information to yourself or run the risk of being ridiculed, at the least. Basically, if you want to declare variables, let and const are what you have to use - end of the story.

For the uninitiated, let may look very much like var - both declare variables whose values can be changed. The stand-out difference between the two is in scope. let follows block scoping; i.e. the variables declared using let will exist and be valid only within the block it was declared in. Here's a classic example for demonstrating this:

As shown above, the value of let is limited to the block or function where it is declared in while var has no such restrictions. Hence, the console will log 1 in the let case while the console will log 2 in the var case.

const is used for declaring variables whose value cannot be reassigned through the entire scope of the program. Also, you have to mandatorily initialise the variable declared using const .

You can read more here(let, const).

Destructuring Assignment

Consider the following piece of code:

Using a destructuring assignment, we can update the code as follows:

You can read more about Destructuring Assignment here.

Default Parameter

ES6 allows functions to have default parameters, as illustrated below:

You can read more about Default parameters here.

Arrow Function

Arrow functions are one of the neatest and best things that ES6 brought to the table. It provides a shorter syntax for creating functions on the fly, as well as in callbacks. A typical arrow function looks like this:

Let’s see how arrow functions make callbacks simpler

You can read more about Arrow Function here.

Promises

The Promise is a reference to an asynchronous call, where the result may be success or failure, allowing us to act accordingly. Simply put, any promise can have a then and catch chained to it based on whether the promise resolves or gets rejected.

In the code stub above, we declare a new promise and added a setTimeout() method to resolve ' foo ', after 300ms - clearly an asynchronous task. Then we have two console.log calls. The first one, within the promise.then() block executes after the 300ms period when the promise resolves and shows foo , while the second console.log produces a log that would say something akin to [object Promise] .

But in practice, we use promises in this way; i.e. declaring a new Promise, very rarely. Usually, we use promises or more specifically, the then and catch methods. To act based on what asynchronous activities that return a promise results in. Let's see an example using the fetch() method in Javascript that makes asynchronous calls to a remote location.

Here, we make a GET request to a path using the fetch() method. If the fetch succeeds, we get a response and the then() method is executed, logging the response received from the remote path. In case of a failure in fetching, the catch() block is executed, and hence the error is logged.

You can read more about Promises here.

Class

Last but never the least, we have classes now on Javascript, courtesy ES6 — the thing that takes Javascript closer to any object-oriented language out there. For those of you who are not into OOP, the class is basically, a wrapper that holds together a set of parameters and methods. And with classes, we also have objects, which essentially are instances of a class. Check out an example:

You can create a class that inherits from another

Note that class members can be private or public(default), and only member functions of the class can access its private members.

You can read more about Classes here.