🚀 5 Advanced ES6 Features Every JavaScript Developer Should Master
Tags: webdev, javascript, beginners, tutorial
Published: 2023-02-01 22:34:39

New day, new article! Today's article is about **five advanced Javascript ES6 features** that I like and that I think everyone (*at least every developer*) should understand.

Are you ready?


## 💡 Destructuring
Destructuring is a quick way to get values out of objects and arrays. For example, **you can extract values** and assign them to variables with a single line of code.

Here's an example of how destructuring can be used with an object:

{% embed https://gist.github.com/NauCode/484be1c3c88d2a67e4236bd1ba9ff491 %}

And here's an example with an array:

{% embed https://gist.github.com/NauCode/985566e45dc3968feeca26dfab5cb4ab %}

As you can see, destructuring makes it simple to extract values from objects and arrays and assign them to variables.


## 🔒 Block Scoping
You can use block scoping to declare variables that are only available within a specific block of code. There are two ways to declare variables in JavaScript: **var** and **let**.

The var keyword declares a global or function-scoped variable, which means **it can be accessed from anywhere within the same function**. On the other hand, the let keyword declares a variable that is block scoped, which means that it can only be accessed within the same block of code.

Here's an example of let-based block scoping:

{% embed https://gist.github.com/NauCode/22064bf1933eb23e6142a947fb013a69 %}

As you can see, the message variable is only available within the if statement-defined block of code.


## 🚗 Spread Operator
Spreading the values of an array or object into a new array or object is possible with the spread operator. **It's a quick way to combine arrays or objects or to turn an array-like object** into a proper array.

Here's an example of how to combine two arrays using the spread operator:

{% embed https://gist.github.com/NauCode/76e017107edc5885c2cb2b2f66a7dad7 %}

Here's an example of how to use the spread operator to transform an array-like object into a real array:

{% embed https://gist.github.com/NauCode/d05d3b4a855e5f01ce8dd5f93d169162 %}

A spread operator is a powerful tool for simplifying and improving the readability of your code.


## 🔮 Template Literals
String literals that allow you to embed expressions within your strings are known as template literals. Instead of quotes (' or "), they are defined with the backtick (`) character.

Here's an example of template literals in action:

{% embed https://gist.github.com/NauCode/e6b97767fe95507319ed5b4210c16831 %}

As you can see, template literals make it simple to embed expressions within strings and **allow you to write multi-line strings** without using string concatenation.


## 💾 Arrow Functions
In JavaScript, arrow functions are a shorthand syntax for writing anonymous functions. They enable you to write code that **is shorter, more concise, and more readable**.

Here's an example of how to use the arrow function:

{% embed https://gist.github.com/NauCode/13fa3bd426ce400bfaa091bb7bd40cda %}

As you can see, arrow functions make it simple to write anonymous functions and have a shorter syntax than regular functions.

* * * * *

It was a short article, but I hope it was helpful for you. I use these features daily and feel like **they are crucial for every Javascript developer**. So hopefully, you have discovered something new today.


## 🌎 Let's Connect!
-   My [Twitter: @thenaubit](https://twitter.com/thenaubit)
-   [My Substack](https://coderpreneurs.substack.com/) (here I will publish more in-depth articles)