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 Arrow Functions
With ES6’s arrow functions feature, one is able to write short syntax for a function.
Another neat feature with the arrow function is if the function has only one statement, the return keyword can be removed.
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.
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.
ES6 Object Destructuring
Destructuring allows us to extract data objects into their own variable. It is extracting properties from an object.
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!
