Template Literals & Destructuring

These two features don't add new abilities to JavaScript so much as remove friction from code you're already writing: template literals for building strings, and destructuring for pulling values out of arrays and objects.

Template literals

Backticks (`) instead of quotes let you drop variables straight into a string with ${}, instead of gluing pieces together with +:

Try it yourself
Console output

The two lines print the same thing, but newWay is far easier to read at a glance — and much harder to accidentally miss a space in. You can put any expression inside ${}, not just a bare variable:

Try it yourself
Console output

Array destructuring

Destructuring unpacks values into named variables in one line, matched by position:

Try it yourself
Console output

Without destructuring, that would've taken two separate lines — const lat = coords[0] and const lng = coords[1].

Object destructuring

Object destructuring works the same way, but matches by property name instead of position:

Try it yourself
Console output

Notice id was never pulled out — destructuring only grabs what you name, and leaves the rest of the object untouched. You can also give a default value for a property that might not exist:

Try it yourself
Console output

Destructuring also works directly in a function's parameters, which is a common sight once you get used to it:

Try it yourself
Console output
Note: before these existed, building a non-trivial string meant a chain of + signs, and pulling several values out of an object meant one repetitive const line per value. Neither feature does something new — they're just the shorter, harder-to-typo way of doing what developers were already doing.
PreviousEvents