[REMINDER-3] Template Literals / destructuring

TEMPLATE

Template Literals allow you to work with strings in a novel way compared to ES5 and below.

• they offer a great syntax to define multiline strings
• they provide an easy way to interpolate variables and expressions in strings
• they allow you to create DSLs with template tags (DSL means domain specific language, and it’s for example used in React by Styled Components, to define CSS for a component)

example for last point:

function styled(literals, ...expressions) {
  console.log("literals: ", literals);
  console.log("expressions: ", expressions);
}

const Button = styled`
  font-size: 1.5em;
  background-color: black;
  color: white;
  ${"bonjour"}
  ${"hello"}
`;

It will log literals fontsize etc and expressions are just arguments in js, so array of arguments. Important to know is that the literal array will be cut by where expression is inserted.

DESTRUCTURING

• destructuring an object {firstname: default, other} : myObject
• destructuring an array const a = [1,2,3]; const [firstIndex] = a

ignore some index

const a = [1, 2, 3, 4, 8];

const [one, two, , , five] = a;

console.log(five); // 8

That's it for me that's the most important parts to reminder if you want more go watch the article.

source: es5 to esnext