This article is an introduction to ES6 and the new features it brings to the Javascript language.
Let us introduce you the term ECMAScript (ES) first. ECMAScript is a scripting language standard/specification. Javascript is an implementation of that standard. That’s why you’ll hear about ES6, ECMA2015, ECMA2016, ECMA2017, ECMA2018 etc. At present, ES6, launched in 2015, is the widely used Javascript standard and most of the browsers support it. If you want to support a browser that doesn’t support ES6, you can use a transpiler like babel which converts you ES6 code to browser compatible javascript.

ES6 introduces many features that make working with Javascript a real pleasure. The important features include:

  • let and const
  • Arrow functions
  • Default Parameters
  • Template Literals
  • Array and Object Destructuring
  • Classes
  • Imports and Export
  • Promises

let and const
ES6 introduces two new keywords, let and const, to declare variables. Both of them declare block scoped variables i.e., the variable is only accessible in the block it is defined.

  • let is used to declare block scoped variables that can be mutated i.e., reassigned.
  • const is used to declare block scoped variables that cannot be mutated. It points to same data or object and cannot be changed.

Arrow Functions
Arrow Functions allows you to write functions in a different way which makes you code more readable and more structured. You can use arrow functions with map, filter or reduce. Also, using arrow functions inside classes (which will be explained later), automatically binds it to the this object.

Default Parameters
Default Parameters are parameters which are given as default values while declaring a function. It allows to get a default value if the argument is not passed to the function.

Template Literals
Template literals allows you to embed any variable or expression inside a string. Now you don’t have to use + to concatenate string variables. You can also create multi-line strings using template literals. Template literals are declared using backticks.

Array and Object Destructuring
Destructuring makes the assignment of the values of an array or object to the new variable easier. In ES6, we can just use variable names inside curly braces(for objects) or brackets (for arrays) to get any property out of an object or array. You can also rename the assignment variables and give default values.

Classes
Classes are the core of OOP (Object Oriented Programming). Classes are used to make your code more secure and encapsulated. Classes in ES6 are just syntactic sugar over the conventional functional inheritance system using prototype that developers are used to. But it also introduces powerful features like constructors, private fields, extend keyword which make it feel like you are working with an object oriented language. This makes Javascript, both a functional as well as object oriented language.

Imports and Exports
Importing and exporting modules in ES6 is one of the useful features you will use and will most often see in modern front-end libraries like React, Vue or Angular.

Exports are used in modules/files to explicitly exporting some variables, functions or classes to be used in other modules/files. Imports are used to import variable, functions or classes from other modules/files.

Promises
ES6 introduces a new feature called Promises to deal with asynchronous code and save us from callback hell. It can be used to perform async tasks like fetching data from an API. You can also create your own promises and use them elsewhere in the code. Promises either resolve i.e., returns data or reject i.e., returns error.


These are some of important features that ES6 introduces. There are other features like for..of loop, async/await, spread and rest attributes, sets, maps, static methods, getters and setters etc.  ES6 makes coding in Javascript much more efficient and structured.

To understand all these features and much more in the world of Javascript, consider enrolling in our Full Stack Development Learning Path where we teach frontend, backend, databases, dev tools and deployment tools from basics to advanced.