DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
florent giraud
florent giraud

Posted on

[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"}
`;
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post