Introduction to ES6 Tutorial

This article is an introduction to ES6 and the new features it brings to the Javascript language.
Let us introduce you to 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 a babel which converts your ES6 code to browser compatible javascript.

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

1. 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 the same data or object and cannot be changed.

2. 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 this object.

3. Default Parameters

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

4. Template Literals

Template literals allow 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.

5. 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.

6. 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 prototypes that developers are used to. But it also introduces powerful features like constructors, private fields, extend keywords which make it feel like you are working with an object-oriented language. This makes Javascript, both a functional as well as an object-oriented language.

7. 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 variables, functions or classes from other modules/files.

8. 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 an error.

These are some of the important features that ES6 introduces. There are other features like for..of the 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.