DEV Community

Fazle Rabbi
Fazle Rabbi

Posted on

10 ES6 features

I will try to introduce the most useful features in a succinct way. After the tutorial, you will possess basic skills and be able to apply them in a real project. Don’t treat it as a guide or documentation. My goal is to encourage you to dig deeper and get familiar with ES6.

  1. const and let keywords const enables you to define constants (finally!). let enables you to define variables. That’s great, but don’t we have variables in JavaScript already? Yes, that’s true, but variables declared by var have function scope and are hoisted to the top. It means that a variable can be used before it has been declared. let variables and constants have block scope (surrounded by {}) and cannot be used before declaration.

2.New cool helper functions appeared, which facilitate work with JS arrays in most useful cases. How many times did you implement logic like: filtering, checking if any or all elements meet the condition, or elements conversion? Probably very often. Now you have great language features to do the work for you

3.We can set the default value with an equal sign when declaring a variable in the parameter of a function.

4.Implementation of very simple functions (like the aforementioned sum or product) requires writing a lot of boilerplate. Is there any remedy for that? Yes, just try arrow functions!

5.classes
Which Java developer doesn’t miss classes when switching to a JS project? Who doesn’t like explicit inheritance, like in Java language, instead of writing magic code for prototypal inheritance? Although some JS developers complained, classes have been introduced in ES6. They don’t change the concept of inheritance. They are just syntactic sugar for prototypal inheritance.

  1. Destructuring
    The destructuring syntax is the process of converting elements of an array into variables and converting the properties of an object into variables. In addition, destructuring is a shortcut way to replace one or more elements in a variable from a large object or array.
    7.
    Enhanced object literals can easily create objects with properties inside the curly braces ({}).

  2. Promises
    Promise promises (yes, I know it sounds weird) that you would get in future results of deferred or long-running tasks. Promise has two channels: the first for results, the second for potential errors. To get the result, you provide the callback function as the ‘then’ function parameter. To handle errors, you provide the callback function as the ‘catch’ function parameter.
    Please notice that output of the example might differ for each execution, because of random function call.

  3. Arrow Function
    The arrow function is a method of shortcut to the function declaration. It will basically shorten our function syntax.

  4. Multiple line String
    We can easily write multiple line strings using the backtick symbol.

Top comments (0)