The Modern JavaScript

ECMAScript 6, also known as ECMAScript 2015, brought significant changes to the JavaScript language. It introduces several new features such as arrow functions, block-scoped variables, a new loop for iterating over arrays and objects, a Logical Assignment Operator, template literals, and many other enhancements to make JavaScript programming easier and more fun. Implementation of new features in major JavaScript engines is underway now. let's discuss some of the best ES6 features in brief that we can use in our everyday JavaScript coding.

Let & Const

The scope of a variable declared using let is only the block it is in and whereas with const, you declare a read-only reference to a value. Block-scoped binding constructs. let is the new var. const is single-assignment.

Template Literals

Template literals provide a clean way to create strings and perform string interpolation avoiding injection attacks or constructing higher-level data structures from string contents.

Arrow Functions

Arrow functions are defined using a new syntax, the fat arrow (=>) notation. Unlike functions, arrows share the same lexical this as their surrounding code.

Arguments object — no arguments special keyword is defined inside an arrow function.

this value — The arrow function doesn’t define its own execution context.

Implicit return — If the arrow function contains one expression, and you omit the function’s curly braces, then the expression is implicitly returned

Methods — you can use the arrow function as methods inside classes, the method defined using an arrow binds this lexically to the class instance.

Rest Parameters(…)

The rest parameter syntax (...) in front of the last formal parameter means that it will receive all remaining actual parameters in an Array. Rest replaces the need for arguments and addresses common cases more directly

Spread syntax (…)

The spread operator allows you to spread out elements of an iterable object such as an array, map, or set.

Default Parameters

If no arguments are provided to the function when it is called default parameters values will be used.

Classes

ES6 Classes formalize the common JavaScript pattern of simulating class-like inheritance hierarchies using functions and prototypes. They are effectively simple sugaring over prototype-based OO, offering a convenient declarative form for class patterns that encourage interoperability.

Constructor — It’s a special method called when an instance of the User class is created

Static methods — A static method is a function that is bound to the class, not an object. A static method cannot be called from an instance of the class

If you want to dig deeper into the subject, I recommend “Classes in ECMAScript 6” by Dr. Axel Rauschmayer.

Promises

A promise in Javascript is an object which represents the eventual completion or failure of an asynchronous operation. Promises represent a proxy for a value that are getting at some point in the future.

A promise can have 3 states which are the following:

Pending: This is the initial state of the promise, the promise is now waiting for either to be resolved or rejected.

Fulfilled: When the operation is completed succesfully, the promise is fulfilled.

Rejected: When the operation has failed, the promise is rejected.

ES2020

Promise.allSettled — Since ES2020 you can use Promise.allSettled. It returns a promise that always resolves after all of the given promises have either fulfilled or rejected, with an array of objects that each describes the outcome of each promise.

Promise.any — It returns a promise that is fulfilled by the first promise to resolve successfully and the resulting value is passed back.

If all of them fail, Promise.any throws an exception and executes the reject portion of the promise with a list of all the exceptions.Unlike the Promise.race() method which focuses on the promise which settles the first, the Promise.any() method focuses on the promise which resolves the first.

Modules

An ES6 module is a file containing javascript code. One script is one module.

ES6 modules are automatically strict-mode code, even if you don’t write "use strict"; in them.

import allows the import of functionality from other modules.

export keyword labels variables and functions that should be accessible from outside the current module.

dynamic import returns a promise for the module namespace object of the requested module, which is created after fetching, instantiating, and evaluating all of the module’s dependencies, as well as the module itself.

I recommend “Webpack and Dynamic Imports: Doing it Right” reading for more understanding about dynamic import.

Closing points

There are many changes that have been incorporated into JavaScript starting from ES6. As a developer, it is important to stay up to date with the new features and sharing knowledge.

Happy coding,
Tanveer

Frontend Engineer

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