Most of the features described in this post have been deprecated and some have been forbidden by EcmaScript from being used. They are still commomly found in many libraries, so it is worth learning them.This post is for information only.

1. Tagged Template Literals

taggingThis`Hey!!, I'm  ${name} !!`

If you’ve ever used styled-components in React, you’ve used tagged template literals.Tagged template literals give us more control over the parsing of our literals. It allows us to parse template literals with a function.

taggingThis`Hey!!, I'm  ${name} !!`

The taggingThis is a function. The first argument of a tag function contains an array of the string values, the remaining argument is related to expressions.

function taggingThis(strings, ...vals) {
    //...
}
taggingThis`Hey!!, I'm  ${name} !!`

The strings argument will hold [ "Hey!!, I'm ", ' !!' ] while the rest of the arguments are passed into the array, vals[ 'Nnamdi' ].In this taggingThis the function we can manipulate the string and return something different.

function taggingThis(strings, ...vals) {
    return strings[0] + vals[0] + strings[1]
}
const name = "Nnamdi"
taggingThis `Hey!!, I'm  ${name} !!` // Hey!!, I'm  Nnamdi !!

2. Comma operator

, is an operator that separates expressions and returns the last expression in the chain.

let expr = (99, 88, 77)
expr // 77

We have three primary expressions 99, 88 and 77. All are evaluated and the last is assigned to expr.We see this in for loops:

for(let i = 0, ii = 1; i< 10; i++, ii--) { ... }

This comes in handy when we want to write short lambda functions:

const lb = (a, b, arr) => (arr.push(a*b), a*b)

There are two statements here, the first push the multiplication result to the array arr and the second multiples a and b. The result of the second is what is returned to the caller.It is also useful with the ternary operator since, same as the short lambda syntax, it only accepts expressions rather than statements

#javascript #ecmascript #es6