Guide to Modern JavaScript Syntax

Many times, code samples are using the latest JavaScript features available. Sometimes those features can be hard to be distinguished from framework features. It happens frequently with React for example, which encourages a very modern approach to JavaScript

Arrow functions

Arrow functions have this syntax:

A bit different than regular functions:

The () can host parameters, just like in regular functions. Sometimes the brackets are removed entirely when there’s just one statement in the function, and that’s an implicit return value (no return keyword needed):

The spread operator

If you see

This statement copies an array. You can add items to an array as well, using

The ... is called spread operator. You can use it on objects as well:

Destructuring assignments

You can extract just some properties from an object using this syntax:

ou will now have two const values name and age. The syntax also works on arrays:

Template literals

If you see strings enclosed in backticks, it’s a template literal:

Inside this, you can put variables and execute javascript, using ${...} snippets:

And also, you can span a string over multiple lines: