JavaScript ES6: Awesome Features

The JavaScript ES6 brings a lot of new features and syntax to make our code more readable and easier to understand. The arrow functions, modules, classes, template strings, object literals, promises and many more such features has made JavaScript even more powerful than before. So, Let’s take a deep dive to learn about each of them.

Let Keyword

The let keyword declares a block-scoped local variable, optionally initializing it to a value. let creates mutable variables(Values can change once created). The major difference with the var keyword is that the var defines a variable globally, or locally to an entire function regardless of block scope.

Const Keyword

The const keyword declares a block-scoped variable can’t be reassigned. In other words, it’s an immutable variable except when it used with objects. The value of a constant can’t be changed through reassignment, and it can’t be re-declared.

Arrow Functions

Arrows are a function shorthand using the ‘=>’ syntax. They support both statement block bodies as well as expression bodies which return the value of the expression. We can use Arrow function with map, filter, and reduce built-in functions.

An arrow function does not have its own ‘this’. The ‘this’ value of the enclosing lexical scope is used. Arrow functions follow the normal variable lookup rules. So while searching for ‘this’ which is not present in the current scope, an arrow function ends up finding the ‘this’ from its enclosing scope.

Template Strings

Template strings provide syntactic sugar for constructing strings. They are pretty cool. We don’t have to use the plus (+) operator to concatenate strings, or when we want to use a variable inside a string.

Template literals are enclosed by the back-tick (` `) character instead of double or single quotes. Template literals can contain placeholders. These are indicated by the dollar sign and curly braces (${expression}).

Default Parameters in Functions

These allow you to define a parameter in advance. So, when you forget to write the parameter, it won’t return an undefined error because the parameter is already defined in the default. Hence, when you run your function with a missed parameter, it will take the value of the default parameter, and it will not return an error!

Array and Object Destructuring

The destructuring syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. It’s always been possible to return an array from a function. Destructuring can make working with an array return value more concise.

Classes and Objects

The Object-Oriented Programming paradigm focuses on data: stored as object properties, and actions: stored as object methods. In OOP, everything is an object, and any actions we need to perform on data (logic, modifications) are written as methods of an object.

The class function basically creates a template that we can use to create objects later. The constructor() method is a special method called when an instance of a class is created. Classes support prototype-based inheritance, super calls, instance and static methods and constructors. Classes support data abstraction, encapsulation, data-hiding, inheritance and polymorphism(more on classes will be covered in the next article)

Import and Export

Using ‘import’ and ‘export’ in your JavaScript application makes it more powerful. They allow you to create separate and reusable components. ‘Export’ allows you to export a module to be used in another JavaScript component. We use ‘import’ to import that module to use it in our component. There are two different types of export, named and default. You can have multiple named exports per module but only one default export.

Promises

It’s a method to write asynchronous code. It can be used when, for example, we want to fetch data from an API, or when we have a function that takes time to be executed. The Promise takes two parameters: ‘resolve’ and ‘reject’ to handle an expected error. A Promise is in one of these states:

• pending: initial state, neither fulfilled nor rejected.
• fulfilled: meaning that the operation completed successfully.
• rejected: meaning that the operation failed.

A pending promise can either be fulfilled with a value or rejected with a reason (error). When either of these options happens, the associated handlers queued up by a promise’s ‘then’ method is called. We can also perform Promise Chaining(returning Promises inside a Promise)

Spread Operator

Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

ES6 has made JavaScript attain greater heights and it makes code simpler. The arrow functions are a better replacement to ES5 function syntax. There are a lot of other ES6 methods like iterators, generators, object literals, Unicode, tail calls, etc. You can learn more about them from MDN.