ES6 features you need to learn React
Tags: javascript, react, beginners, webdev
Published: 2020-01-24 10:54:28

Hi DEV community!

In the beginning of 2020 I decided that I will explore React and that I will build at least two projects with it. However, before starting to learn React I discovered that few ES6 features need to be revised and learnt before hand. So, in this post I will share simple explanation of the following features:

<ul>
<li>let & const</li>
<li>Arrow functions</li>
<li>Classes</li>
<li>Spread & rest operators</li>
<li>Destructuring</li>
</ul>

This is my very first post, so I hope you find this article useful and you enjoy it. Let's start!!


<h3>let & const</h3>
Let and const are introduced as new features that serve as a replacement of famous <i>var</i> to declare variables. It is highly recommended to use them in order to avoid accidental mutation of variable values.

<b>let</b> - this should be used to declare a block-scope local variables by optionally initializing it with a value and can be re-assigned to a new value when needed.

There are a few differences between <i>let</i> and <i>var</i>. Let check the major ones:

- A let variable is scoped to the immediate block scope and not function body as var is:
```javascript 
function foo() {
     let x = 1;
     {
          let x = 2; //not the same variable
     } 
}
```
- Let does not create a property in the global object, which it will result as undefined in the global perspective
```javascript
var x = 1; 
let y = 2;

console.log(this.x); // global
console.log(this.y); // undefined
```
- Re-declaring the same variable will result in reference error
```javascript 
let x = 1;
let x = 2; //reference error
```
- Declaring a variable without initializing it will result into a reference error instead of undefined
```javascript 
console.log(x); // reference error
console.log(y); //undefined

let x= 1;
var y= 2;
```
<b>const</b> - is used to declare a constant block-scope (similar to'let') variables and is necessary to be initialized in the same line where it is declared. Also, a constant cannot be changed through reassignment and cannot be re-declared.
```javascript
const NAME = "React" //a read-only reference to a value
```
In React it is typical to declare functions using const, such as functional-based components.

<h3>Arrow functions</h3>
Essentially arrow functions are an alternative to creating functions and apart from the short syntax, it has some differences compared to the regular form.

The syntax of an arrow function is:
```javascript
// arrow function
const call = (phoneNumber) => { 
    console.log(phoneNumber)
}

// long form 
function(parameter1, parameter2) {
    return value;
}

//when there is only one parameter, brackets can be omitted
const call = phoneNumber => {
    console.log(phoneNumber);
}

//when only one line return statement, curly brackets and return keyword can be omitted
const call = phoneNumber => phoneNumber;
```

An arrow function does not have its own binding of <i>this</i> which is considered its main advantage. Also, it does not have binding to <i>super, arguments or new.target</i> keywords which means that they are not suitable as constructors. By the lack of this, the function ends up finding the <i>this</i> from the enclosing scope.

```javascript 
function retryCall(phoneNumber){
   this.counter = 0;

   setInterval(() => {
       this.counter++; // 'this' refers to the retrycall object
   }, 1000);
}
```

<h3>Spread & Rest operator</h3>

These two operators have the same syntax, that is "<i>...</i>" (yeap, it's actually three dots) and their naming is based on the context and the way that they are used. So, the spread operator allows to pull out elements of an array, or the properties of an object separately. As an example:
```javascript
const numbers = [2,4,6];

function findSum(x,y,z) {
   return x + y + z;
}

findSum(...numbers); // that will result into findSum(2, 4, 6);
```
Whereas, the Rest operator is useful for cloning arrays and objects into a different variable. Since both are reference types, this operator comes in handy to prevent unintentional mutation.

```javascript
let numbers = [2, 4, 6];

let moreNumbers = [...numbers, 8, 10] // this will result in [2, 4, 6, 8, 10];
```

<h3>Destructuring assignment</h3>
This feature allows to easily extract values of array elements or object properties and store them in variables. 

```javascript 
//array destructuring
let [a, b] = ['hello', 'world'];
a = 'hello';
b = 'world';

//object destructuring
let {name} = {name : 'john', age: 28};
name = 'john';
age // undefined
```

This is very useful when working with function arguments. Without using this feature, when one property of an object is needed the whole object needs to be passed in order to have access. However, destructuring allows pulling out only the needed properties which results into a more condensed code. Consider the following:

```javascript 
function getPhoneNumber(addressBookObj) {
   return addressBookObj.phoneNumber;
}

getPhoneNumber({name : 'John', age: 25, phoneNumber : 223344}); //return the 223344 phone number value

//using destructuring to access only one property of the object
const getPhoneNumber = ({phoneNumber}) => return phoneNumber; 

getPhoneNumber({name : 'John', age: 25, phoneNumber : 223344}); //returns phoneNumber value
```
Essentially, we get the same result but we save some lines of code by pulling out only the needed property.

I hope you enjoyed this short article and that you'll find it useful to start learning React or any other framework.

Any feedback/suggestion/comment is highly appreciated. 
Stay tuned for more posts!