Beautify your code.

JavaScript famously began its life in 1995 as a scripting language prototyped in ten days by Brendan Eich for the browser du jour, Netscape Navigator. Often derided as the bastard child of coding languages, it long lacked many of the features developers took for granted in other languages.

Comparing some popular languages

In recent years, with the release of JavaScript ES6 (ES2015) and beyond, JavaScript has seen some major transformations, and it can now stand more proudly among other popular programming languages. While most web developers are aware of the bigger additions to the language, such as classes, modules, and arrow functions, some may not be aware of the many smaller syntactic improvements to the language. These features are often not only huge time-savers—they also increase the clarity and conciseness of code. Let’s dive deeper into a few of my favorites.

The little JavaScript that could

String Interpolation

For years, one of my pet peeves was the lack of string interpolation in JavaScript. As of ES6, template literals add support for string interpolation.

Multiline Strings

Where previously newline characters and concatenation across lines were required, ES6 template literals now provide a simple syntax for multiline strings.

Default Function Parameters

Setting up default parameter values in JavaScript was once painfully verbose. ES6 offers a simple and intuitive syntax for default function parameters.

Spread Operator

Use of the ES6 spread operator simplifies array concatenation.

The spread operator can also be used to split strings into an array of individual characters.

As of ES2018, you can use the spread operator to copy properties from one object to another.

Rest Parameters

The addition of rest parameters (using the spread operator) to ES6 makes the creation of variadic functions (functions accepting a variable number of arguments) elegant and intuitive.

It’s worth noting that you can also use the spread operator to pass arguments to variadic functions such as the above function.

Array Destructuring Assignment

Using array destructuring assignment, you can succinctly capture elements of arrays in separate variables.

You can even provide default values during destructuring. Neat!

Object Destructuring Assignment

Similar to array destructuring assignment, object destructuring assignment assigns the properties of an object to separate variables in a single statement.

Destructuring can be used on deeply nested objects.

As with arrays, you may provide default values during object destructuring assignment.

As of ES2018, you can use the spread operator when destructuring objects to copy keys not captured separately into an object.

Of course, before you jump into using these features, there’s always the bugbear of all web development projects to consider: browser support. While modern browsers do support the vast majority of ES6 (ES2015) features (as well as the features of many more recent releases) out of the box, in order to ensure universal support, to support older browsers (notably IE11), and to use the latest features of ES.next, a compiler such as Babel is still necessary. So go set up your favorite compiler and get coding!