ECMAScript 6 | ES6 Tutorial for Beginners

Facebooktwitterredditpinterestlinkedinmailby feather

What is ECMAScript6?

ECMAScript6 or ECMAScript 2015 is a general- purpose client-side scripting language specification designed by Brendan Eich, Ecma International. JavaScript (along with JScript and ActionScript) governed by this specification. In more standard form, we can define ECMAScript as the standard that describes how to use JavaScript and what are its accomplishments?

History of ECMAScript6

ECMAScript6 introduced in June 2015, now called ECMAScript2015 officially, went through several re-names:

ECMAScript Harmony set as the initial code name for JavaScript improvements.

ECMAScript.next: Harmony plans were too committed for a single version that split its features into two groups: the first group of features with the highest priority is the next version after ES5 coded by the name as ECMAScript.next to avoid prematurely committing to a version number that proved problematic with ES4.

ECMAScript 6: ECMAScript.next after getting matured re-named as ECMAScript 6.

How ES6 designed

Before becoming a standard, ES6 designed on proposals maintained by champions (1-2 committee delegates).

A proposal has the following steps before it becomes a standard:

  • Sketch (informally: “strawman proposal”): This defined as the first description of the proposed feature.
  • Proposal: ES6 would get official proposal status by the agreement of TC39(Technical committee); if the feature would be important. That does not guarantee for ES6 to become a standard. ES6 proposals‘deadline was in May 2011 after which not any significant new proposal considered.
  • Implementations: Ideally, the Implementation of Proposed features in two JavaScript engines was must shape the proposal as it evolves.
  • Standard: The proposal will eventually be included in an edition of the ECMAScript standard if it continues to prove itself and accepted by TC39. At this end, ES6 becomes a standard feature.

The design process after ES6

  1. JAVAScript after ECMAScript

JavaScript is a client-side scripting language has its official name as ECMAScript because of being trademarked (by Oracle, which inherited the trademark from Sun). The name ECMAScript comes from its standards organization Ecma, which manages the standard of language. Since the initiation of ECMAScript, “Ecma” is the newly derived and proper name of the organization from the acronym “ECMA.”

ECMAScript 1 is the first standard version of JavaScript, short for “ECMAScript Language Specification, Edition 1”. ECMAScript x is often abbreviated ESx.

  1. Upgrading to ES6

There is a group of stakeholders on the web that has remarkably little control over each other; thus makes a web language so challenging if to upgrade. These stakeholders are:

  • Implementers of JavaScript engines
  • Developers of web applications
  • Users

Goals rift in the design of ES6:

  • Goals required for fixing the JavaScript’s pitfalls and adding the new features.
  1. Goals for ES6
  • Be a better language 
  1. To build complex applications.
  2. To write libraries (possibly including the DOM) shared by complex applications.
  3. To write code generators for the new edition.
  • Improve interoperation 

To improve interoperation, adopting de facto standards where possible.

  • Versioning 

To keep versioning as linear and straightforward as possible.

  1. ES6 features

There is a list of most liked features of ES6 as follows:

  • Default Parameter Values: In ES6, function parameters can have default values.

// will return

  • Block-scoped Constructs let and constlet enables you to define a variable and const enables you to define constant. Both the variables let and const are block scoped (surrounded by {}) as they exist only within the scope and cannot be used before the declaration. const behaves as an immutable variable and can’t be reassigned if used at once while let is mutable variable and can be reassigned to take new value.

const

// will return

let

// will return

  • DestructuringIt is a convenient way to extract values from data stored in (possibly nested) objects and arrays assigning them to variables. It allows binding using pattern matching.

// will return

  • Arrow FunctionsArrow functions (also called “fat arrow functions” with => syntax) are one of the most popular ES6 features and a modern way of writing concise functions that express more clear, more readable, and more structured code in comparison with ES5 code. Syntactically, these functions have similarity with the related feature in C#, Java 8, and CoffeeScript.

//ES5

// will return

//ES6

// will return

  • Promises: The definition of a promise in terms of ECMA committee is:

“A Promise is an object that is used as a placeholder for the eventual results of a deferred (and possibly asynchronous) computation.”

Promise is an object or a container that is used as a placeholder for future value. Promises provide a clean way to solve the problems (Callback Hell/Pyramid of Doom) associated with CallBacks (i.e., a function may be passed as a parameter to another function) in JavaScriptfor asynchronous programming implementation.

Creating Promise:

For Example:

// will return

  • Classes: ES6 classes have a single convenient declarative form that makes class patterns more accessible to use encouraging interoperability. These classes are just syntactic sugar over prototype-based inheritance support prototype-based inheritance, super calls, instance and static methods, and constructors. Classes are special functions with two components of its syntax: class declarations and class expressions.

Class Declarations Syntax:

Class Expressions Syntax:

For Example:

// will return

  • Modules: Modules are stored in files such that one module per file and one file per module. A Module is a collection of independent components, i.e., maybe a variable, a function, a class, and everything that can be exported by the export statement) that is reusable for an application. These components don’t exist for use unless the module files export them. Modules make development easier: encapsulate behavior, easy to work with, easy to maintain, and easy to scale. Module loaders support Dynamic loading, State isolation, Compilation hooks, Global namespace isolation, and Nested virtualization.

Syntax to Export a module:

  1. Use export default to export a single value or element:

  1. To export multiple values or elements:

Syntax to Import a module:

  1. To import a single value or element:

  1. To import multiple values or elements:

Also Read: Most Commonly Asked ES6 Interview Questions and Answer for Fresher

Facebooktwitterredditpinterestlinkedinmailby feather