10 ES6 Concepts for React Developers

{  // block starts 
   //  scope area
}  // block ends 

//Function scoped
function myFunc() {
    var functionScoped = "I am available inside this function";
    console.log(functionScoped);
}
myFunc();
// I am available inside this function
console.log(functionScoped);
// ReferenceError: functionScoped is not defined

//for loop is block scoped
for (var i = 0; i < 10; i++) {
    var iAmInside = "I am available outside of the loop";
}
console.log(iAmInside);
// I am available outside of the loop

//block scope
if (true) {
    var inside = "Inside";
}
console.log(inside);
// Inside

// a fucntion with var,let and const 
function varLetConst() {
    if (true) {
        var a = 10;
        let b = 20;
        const c = 30;
        console.log(a); //10
        console.log(b); //20
        console.log(c); //30
    }
    console.log("outside if statement"); //outside if statement
    console.log(a); //10
    console.log(b); //error
    console.log(c); //error
}
varLetConst()

### Fat arrow functions
Fat arrow function or arrow functions are the most amazing this of es6 because it systematically reduces the code size without compromising the code quality and features. 

Arrow functions as it sounds is the new syntax => of declaring a function. But it behaves differently from the traditional functions of Javascript.

//without arrow function 
function add(a, b) {
    return a + b;
}
add(5, 10);
//with arrow function
const add = (a, b) => {
    return a + b;
}
add(5, 10)

### Function with default parameters

If you have understood the functions then you have the idea about it, in this, we have the option to make it with parameters like if there is a function called demo function (), so we can pass at least two parameters then our functions will be like demoFunction (a,b) where a and b are parameters. 

Now when we will be calling this then we have to provide the parameter values otherwise it will throw the error, and here the noted thing is that we can't just pass one value we have to give both the values. 

Now, what to do?

here the default parameter comes to rescue you, by using this you can declare the default values to your arguments so that when the function is invoked and you didn't pass any value then also your function will work.

//without default parameters 
const add = (a, b) => {
    return a + b;
}
add(5) //error 
//with default parameters 
const add = (a, b = 10) => {
    return a + b;
}
add(5) // 15

### Array and Object Destructuring

Destructuring is a new feature introduced in ES6 to unpack values from arrays or properties from an object. It helps in improving the readability and performance of our code.

    //before es6 
    // Example 1 - Object Destructuring
    var user = {
        name: 'Deepak',
        username: 'dipakkr',
        password: 12345
    }
    const name = user.name; // Deepak
    const username = user.username; // dipakkr
    const password = user.password // 12345
    //Example 2 - Array Destructing
    const fruits = ["apple", "mango", "banana", "grapes"];
    const fruit1 = fruits[0];
    const fruit2 = fruits[1];
    const fruit3 = fruits[2];

    //after es6
    // Example 1 - Object Destructuring
    var user = {
        name: 'Deepak',
        username: 'dipakkr',
        password: 12345
    }
    const {
        name,
        username,
        password
    } = user;
    console.log(name);
    console.log(username);
    console.log(password);
    //Example 2 - Array Destructing
    const fruits = ["apple", "mango", "banana", "grapes"];
    const [fruit1, fruit2, fruit3] = fruits;
    console.log(fruit1); // apple
    console.log(fruit2); // mango
    console.log(fruit3); // banana

### Rest and spread operators

The  ... is the spread syntax that allows you to specify an array that should be split and have its items passed in as separate arguments to a function.
it can be used in 2 ways, one as Spread Operator and other as Rest Parameter

- Rest parameter 

1. It collects all the remaining elements into an array.
2. Rest Parameter can collect any number of arguments into an array.
3. Rest Parameter has to be the last argument.

    ```

//Before ES6
    let arr = [1, 2, 3, 4, 5];
    console.log(Math.max.apply(null, arr));

    //After ES6
    let arr = [1, 2, 3, 4, 5];
    console.log(Math.max(...arr)); // 5

Spread operator 
The spread syntax can be used when all elements from an object or array need to be included in a list of some kind.

### Modules
Modules give you the access to separate the code in another file and when required we can import it from that file; by doing this we can manage the code and its files easily. The real power of modules is the ability to export and import only bindings you need, rather than whole code.

### Promises
Consider a scenario where 
I will give the pen when I will get it from the store when I say this to someone so I am giving a promise to someone that when I will get the pen from the store I will give this to you for sure, now three conditions can occur 

1. I will get the pen for sure, which means I am successful in delivering my promise 
2. I will not get the pen, which means I am unsuccessful in delivering my promise 
3. I have seen the pen has arrived at the store but I haven't gotten it at my hands, It's pending, it can either be a success or reject
This is the same story of promises 

According to MDN:-

A Promise is an object representing the eventual completion or failure of an asynchronous operation.

A promise represents whether asynchronous code completed or failed and eventually returned its resulting value.

A Promise has three states.

**Pending**: Initial state, neither fulfilled nor rejected.
**Fulfilled**: It means that the operation was completed.
**Rejected**: It means that the operation failed.

### map(),filter() & Reduce()

Map, reduce, and filter are all array methods in JavaScript. Each one will iterate over an array and perform a transformation or computation. Each will return a new array based on the result of the function.

Map : 
The map() method is used for creating a new array from an existing one, applying a function to each one of the elements of the first array.

Filter :
The filter() method takes each element in an array and it applies a conditional statement against it. If this conditional returns true, the element gets pushed to the output array. If the condition returns false, the element does not get pushed to the output array.

Reduce:
The reduce() method reduces an array of values down to just one value. To get the output value, it runs a reducer function on each element of the array.

**Conclusion** : 
These all topics are must to know if your going to start with React, I have tried my best to share and give you the suitable examples if you find it useful share your views in comments .


So guys this is all end from my side and if you find this article useful then do like and share it and if you want to chat with me then I am  [here ](https://linkedin.com/in/iprankurpandey) 

the same as Java but my observation was wrong as few concepts are the same but have some either limitations or extend more features.

Today I will be sharing, my experience with JS and its most important ES6 concept which help you in React JS 
Before we start What is JS, Here are 5 points about it : 


1. It is an Object-Oriented Programming Language, uses to program the web for browsers.

2. It is a case-sensitive language which means 'ABC' and 'ABC' both are different things.

3. It has support in almost all Operating Systems and web browsers.

4. You can do what you wish by using JS on the web and has huge community support.

5. It is an interpreted language so it executes line by line or one command at a time.

Now I would like to share important things that are  the backbone of JS, the ES6 

In javascript, the whole document is the global scope and all the other functions and variables are contained in this global scope.

What is ES6?

ES6 stands for the 6th revision of ECMAScript which brings some very good changes in JS by introducing some new features.

there are some important features that help in learning React JS few are : 
1. var, let & const
2. Template Strings 
3. Fat arrow functions 
4. Function with default parameters
5. Array and Object Destructuring
6. Rest and spread operators
7. Modules 
8. Promises 
9. map(),filter() & Reduce()

Before we start its time to understand two important things 

what is a block? 

In JS block means many js statements formed in a group enclosed in brackets and it forms a block, now come to the scope 

what is the scope? 

In general English scope means the chance or opportunity to do something, so this same theory applies to JS scope too. 

Scope gives you the open opportunity to perform the operations inside the block. 

Look at the below image, i
When I started with web development 2 months ago, 
I observed a few things, and all those things have one common point, Its JavaScript aka JS.

Yes, the most loved and hated language and which powers the web.

Coming from a Java coding background first,  I thought JS will be When I started with web development 2 months ago, 
I observed a few things, and all those things have one common point, Its JavaScript aka JS.

Yes, the most loved and hated language and which powers the web.

Coming from a Java coding background first,  I thought JS will be the same as Java but my observation was wrong as few concepts are the same but have some either limitations or extend more features.

Today I will be sharing, my experience with JS and its most important ES6 concept which help you in React JS 
Before we start What is JS, Here are 5 points about it : 


1. It is an Object-Oriented Programming Language, uses to program the web for browsers.

2. It is a case-sensitive language which means 'ABC' and 'ABC' both are different things.

3. It has support in almost all Operating Systems and web browsers.

4. You can do what you wish by using JS on the web and has huge community support.

5. It is an interpreted language so it executes line by line or one command at a time.

Now I would like to share important things that are  the backbone of JS, the ES6 

In javascript, the whole document is the global scope and all the other functions and variables are contained in this global scope.

What is ES6?

ES6 stands for the 6th revision of ECMAScript which brings some very good changes in JS by introducing some new features.

there are some important features that help in learning React JS few are : 
1. var, let & const
2. Template Strings 
3. Fat arrow functions 
4. Function with default parameters
5. Array and Object Destructuring
6. Rest and spread operators
7. Modules 
8. Promises 
9. map(),filter() & Reduce()

Before we start its time to understand two important things 

what is a block? 

In JS block means many js statements formed in a group enclosed in brackets and it forms a block, now come to the scope 

what is the scope? 

In general English scope means the chance or opportunity to do something, so this same theory applies to JS scope too. 

Scope gives you the open opportunity to perform the operations inside the block. 

Look at the below image, in this image we have brackets, from where the brackets start it will be the starting point of the block, and where the block ends it is the endpoint of the block.

The area between block starts & ends is the area of scope where we will get the opportunity to perform tasks.

When ES6  come into the picture there were many new changes, 'let, const & var'  was one of that changes, it gives you more access to manage and use data and its operations. 

Before understanding this first understand this :

**Function Scope:**  When a variable is declared inside a function, it is only accessible within that function and cannot be used outside that function.

**Block Scope:** A variable when declared inside the if or switch conditions or inside for or while loops, are accessible within that particular condition or loop. 

To be concise the variables declared inside the curly braces are called within block scope.

### var ,let & const :

**Var ** is called a function scope that is if a variable is declared using the var keyword it will be accessible throughout the function.

**let & const ** are also called block scope that is they are accessible within that particular block. 

Here let is used for a variable that can be changed as we proceed through the program whereas const is used for a variable that doesn’t change till the program ends, that is it remains constant throughout the program.

### Template Strings
Template literals are string literals allowing embedded expressions. Template literals are the formatting of strings in javascript. In ES5, formatting string was a tedious task as it involved a very manual formatting syntax. 

In ES6, Against the standard ' and " quotes template literals uses back-ticks ` `. we can use a new syntax ${PARAMETER} inside of the back-ticked string to define variable values.

In ES5, we have to break strings like below.


```var name = 'Your name is ' + firstName + ' ' + lastName + '.' //ES5```



with ES6 we can achieve the same output without doing more tedious work


 ```var name = `Your name is ${firstName} ${lastName}.```

 //ES6
`
### Fat arrow functions
Fat arrow function or arrow functions are the most amazing this of es6 because it systematically reduces the code size without compromising the code quality and features. 

Arrow functions as it sounds is the new syntax => of declaring a function. But it behaves differently from the traditional functions of Javascript.
```

    //without arrow function 
    function add(a, b) {
        return a + b;
    }
    add(5, 10);
    //with arrow function
    const add = (a, b) => {
        return a + b;
    }
    add(5, 10)```


### Function with default parameters

If you have understood the functions then you have the idea about it, in this, we have the option to make it with parameters like if there is a function called demo function (), so we can pass at least two parameters then our functions will be like demoFunction (a,b) where a and b are parameters. 

Now when we will be calling this then we have to provide the parameter values otherwise it will throw the error, and here the noted thing is that we can't just pass one value we have to give both the values. 

Now, what to do?

here the default parameter comes to rescue you, by using this you can declare the default values to your arguments so that when the function is invoked and you didn't pass any value then also your function will work.
```

    //without default parameters 
    const add = (a, b) => {
        return a + b;
    }
    add(5) //error 
    //with default parameters 
    const add = (a, b = 10) => {
        return a + b;
    }
    add(5) // 15

``` 
### Array and Object Destructuring

Destructuring is a new feature introduced in ES6 to unpack values from arrays or properties from an object. It helps in improving the readability and performance of our code.

```
```
    //before es6 
    // Example 1 - Object Destructuring
    var user = {
        name: 'Deepak',
        username: 'dipakkr',
        password: 12345
    }
    const name = user.name; // Deepak
    const username = user.username; // dipakkr
    const password = user.password // 12345
    //Example 2 - Array Destructing
    const fruits = ["apple", "mango", "banana", "grapes"];
    const fruit1 = fruits[0];
    const fruit2 = fruits[1];
    const fruit3 = fruits[2];

    //after es6
    // Example 1 - Object Destructuring
    var user = {
        name: 'Deepak',
        username: 'dipakkr',
        password: 12345
    }
    const {
        name,
        username,
        password
    } = user;
    console.log(name);
    console.log(username);
    console.log(password);
    //Example 2 - Array Destructing
    const fruits = ["apple", "mango", "banana", "grapes"];
    const [fruit1, fruit2, fruit3] = fruits;
    console.log(fruit1); // apple
    console.log(fruit2); // mango
    console.log(fruit3); // banana
```
``` 

### Rest and spread operators

The  ... is the spread syntax that allows you to specify an array that should be split and have its items passed in as separate arguments to a function.
it can be used in 2 ways, one as Spread Operator and other as Rest Parameter

- Rest parameter 

1. It collects all the remaining elements into an array.
2. Rest Parameter can collect any number of arguments into an array.
3. Rest Parameter has to be the last argument.

    ```//Before ES6
    let arr = [1, 2, 3, 4, 5];
    console.log(Math.max.apply(null, arr));

    //After ES6
    let arr = [1, 2, 3, 4, 5];
    console.log(Math.max(...arr)); // 5

Spread operator 
The spread syntax can be used when all elements from an object or array need to be included in a list of some kind.

```
function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));
``` 

### Modules
Modules give you the access to separate the code in another file and when required we can import it from that file; by doing this we can manage the code and its files easily. The real power of modules is the ability to export and import only bindings you need, rather than whole code.

```
export const API_URL = 'http://localhost:8080';
export const MAX_THREADS = 8;
import {MAX_THREADS,API_URL} from './constants.js';
console.log(MAX_THREADS);
console.log(API_URL);
``` 

### Promises
Consider a scenario where 
I will give the pen when I will get it from the store when I say this to someone so I am giving a promise to someone that when I will get the pen from the store I will give this to you for sure, now three conditions can occur 

1. I will get the pen for sure, which means I am successful in delivering my promise 
2. I will not get the pen, which means I am unsuccessful in delivering my promise 
3. I have seen the pen has arrived at the store but I haven't gotten it at my hands, It's pending, it can either be a success or reject
This is the same story of promises 

According to MDN:-

A Promise is an object representing the eventual completion or failure of an asynchronous operation.

A promise represents whether asynchronous code completed or failed and eventually returned its resulting value.

A Promise has three states.

**Pending**: Initial state, neither fulfilled nor rejected.
**Fulfilled**: It means that the operation was completed.
**Rejected**: It means that the operation failed.

```
const count = true;
let countValue = new Promise(function (resolve, reject) {
    if (count) {
        resolve("There is a count value.");
    } else {
        reject("There is no count value");
    }
});
``` 
### map(),filter() & Reduce()

Map, reduce, and filter are all array methods in JavaScript. Each one will iterate over an array and perform a transformation or computation. Each will return a new array based on the result of the function.

Map : 
The map() method is used for creating a new array from an existing one, applying a function to each one of the elements of the first array.

```
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(item => item * 2);
console.log(doubled); // [2, 4, 6, 8]
``` 

Filter :
The filter() method takes each element in an array and it applies a conditional statement against it. If this conditional returns true, the element gets pushed to the output array. If the condition returns false, the element does not get pushed to the output array.

```
const numbers = [1, 2, 3, 4];
const evens = numbers.filter(item => item % 2 === 0);
console.log(evens); // [2, 4]
``` 
Reduce:
The reduce() method reduces an array of values down to just one value. To get the output value, it runs a reducer function on each element of the array.

```
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function (result, item) {
  return result + item;
}, 0);
console.log(sum); // 10
``` 
**Conclusion** : 
These all topics are must to know if your going to start with React, I have tried my best to share and give you the suitable examples if you find it useful share your views in comments .


So guys this is all end from my side and if you find this article useful then do like and share it and if you want to chat with me then I am  [here ](https://linkedin.com/in/iprankurpandey)