Noteworthy ES6 Features

It was important for me to write an article about ES6 features because there were significant changes made. Some of the new features include classes, template literals, arrow functions, object destructuring, spread operator, and variables(var, const, let). While I am not covering all the updates made, here are some of the more frequently used one’s or at least the one’s I use most frequently.

ES6 Classes

Classes never existed before ES5, which makes this exciting because classes can be found in many of the object-oriented languages. With ES6, it’s easy to make objects, make reusable code, and using the extend keyword to implement inheritance. Now in ES6, you can declare a class with the keyword class followed by the class name. The the example below, AllLists is the class name. Note that AllLists is TitleCased, so be sure to use TitleCase for the name of the class. The super() method refers to the parent class, which allows the child to have access to the parent classes properties and methods. The constructor function is initialized automatically.

ES6 class function

ES6 Arrow Functions

With ES6’s arrow functions feature, one is able to write short syntax for a function.

top: function expression and bottom: arrow function

Another neat feature with the arrow function is if the function has only one statement, the return keyword can be removed.

arrow function return value by default

ES6 Variables

ES6 introduced new variables which are block-scoped. Block is code that is bounded by {}, thus anything inside the {} is a block. Previously, var was used as a way to declare a variable, but now ES6 has introduced two more ways to declare a variable. The preferred method is with const and let keywords.

Const — the const keyword is read only and you can not reassign new values to it. Const is block-scoped similarly like let.

Let — the let keyword is block-scoped and not hoisted. For example, if you use the keyword let inside a loop, it does not exist outside the loop. The keyword let can be updated but not re-declared.

Var — the var keyword is function-scoped and hoisted at the top within its scope. If the var keyword is used inside a loop or if block, it can be accessed outside the loop or if block. Remember, var supports hoisting. Also, the var keyword can be re-declared and updated.

ES6 Spread Operator

The spread operator is designated by (…). The spread operator spreads out elements in an iterable object like a string or an array. As you can see below, a new array (y) was made and the original array (x) is unmodified. Here its adding to the beginning of the array.

use of the spread operator (…)

Here is another example with the spread operator. The original array is nums. The new array is allNums and the original array is not modified. Notice it is adding to the end of the array.

allNums array is using the spread operator (…)

ES6 Object Destructuring

Destructuring allows us to extract data objects into their own variable. It is extracting properties from an object.

Object destructuring

Hopefully, this tutorial was helpful in showing some of ES6’s newest updates. This is by no means all the updates, but does provide an insight into some of the more frequently used ones.

Happy coding!