Have you ever wondered if you can write less code that does more and is easier to read?

Usually we work with programming languages and keep ourselves updated with them, but with JavaScript it’s a bit more complicated, you have to take into account browser/transpiler support, polyfills, and NodeJS versions to utilize some of the features of modern JS in your code.

For this, I have gathered some of the important ES6 features that add to your productivity, and help you write code more easily. These are all supported in modern browsers (IE unfortunately does not support most of these features).

Template Strings

Template Strings

Template strings are very useful for any formatting issues and also string manipulation. They are present in most programming languages, but the ES6 implementation also supports multiline strings, which are very good when writing custom error messages or information popups.

Destructuring

Destructuring + Spread Operator

Destructuring is a simple thing to use in your code, but hard to grasp for some, because I had some problems too starting with this, especially the spread operator at first.

The example contains both simple destructuring that can help you pull properties from objects and some elements from an array easily, but also using the spread operator, which “spreads” an object, having a slightly different behavior for arrays and objects.

This one can be used in multiple ways to simplify your code and basic tasks like copying arrays or objects, splitting arrays, and calling functions with arrays of arguments.

Default operators

Default operators + spread operator

This is not a feature that is bleeding edge, but it is very useful and combined with other new features like the spread operator, it will help you set default cases for most functions that you write.

Nothing more to say here.

Built-in helpers

These features are the bread and butter of ES6, and the nice thing about them is that they are mostly done in an immutable fashion, so all of these functions will return a new object without altering the old one, giving you the power to chain array functions and string functions together, leading to easily understandable code, because it is declarative code, it won’t tell you how the code does this, it just declares that the operation was done.

All of these topics need an article of their own to explain properly, I left the links if you want to explore more of the features in depth, but this article does not have the purpose of explaining them one by one, just to make you aware that they exist and can be used by all modern browsers today.

I hope this made you interested in new ES6 features and will take you on a journey to see how JS is updated through the years.