10 ES6 Concepts for React Developers

{  // block begins 
   //  scope space
}  // block ends 

//Perform scoped
operate myFunc() {
    var functionScoped = "I'm out there inside this operate";
    console.log(functionScoped);
}
myFunc();
// I'm out there inside this operate
console.log(functionScoped);
// ReferenceError: functionScoped is just not outlined

//for loop is block scoped
for (var i = 0; i < 10; i++) {
    var iAmInside = "I'm out there outdoors of the loop";
}
console.log(iAmInside);
// I'm out there outdoors of the loop

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

// a fucntion with var,let and const 
operate 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("outdoors if assertion"); //outdoors if assertion
    console.log(a); //10
    console.log(b); //error
    console.log(c); //error
}
varLetConst()

### Fats arrow capabilities
Fats arrow operate or arrow capabilities are essentially the most superb this of es6 as a result of it systematically reduces the code measurement with out compromising the code high quality and options. 

Arrow capabilities because it sounds is the brand new syntax => of declaring a operate. However it behaves otherwise from the normal capabilities of Javascript.

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

### Perform with default parameters

You probably have understood the capabilities then you might have the concept about it, on this, now we have the choice to make it with parameters like if there's a operate known as demo operate (), so we are able to go a minimum of two parameters then our capabilities will likely be like demoFunction (a,b) the place a and b are parameters. 

Now after we will likely be calling this then now we have to offer the parameter values in any other case it'll throw the error, and right here the famous factor is that we won't simply go one worth now we have to offer each the values. 

Now, what to do?

right here the default parameter involves rescue you, by utilizing this you'll be able to declare the default values to your arguments in order that when the operate is invoked and also you did not go any worth then additionally your operate will work.

//with out 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 brand new characteristic launched in ES6 to unpack values from arrays or properties from an object. It helps in bettering the readability and efficiency of our code.

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

    //after es6
    // Instance 1 - Object Destructuring
    var consumer = {
        identify: 'Deepak',
        username: 'dipakkr',
        password: 12345
    }
    const {
        identify,
        username,
        password
    } = consumer;
    console.log(identify);
    console.log(username);
    console.log(password);
    //Instance 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

### Relaxation and unfold operators

The  ... is the unfold syntax that means that you can specify an array that needs to be break up and have its gadgets handed in as separate arguments to a operate.
it may be utilized in 2 methods, one as Unfold Operator and different as Relaxation Parameter

- Relaxation parameter 

1. It collects all of the remaining components into an array.
2. Relaxation Parameter can gather any variety of arguments into an array.
3. Relaxation Parameter needs to be the final argument.

    ```

//Earlier than 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

Unfold operator 
The unfold syntax can be utilized when all components from an object or array should be included in a listing of some variety.

### Modules
Modules provide the entry to separate the code in one other file and when required we are able to import it from that file; by doing this we are able to handle the code and its recordsdata simply. The actual energy of modules is the power to export and import solely bindings you want, fairly than complete code.

### Guarantees
Contemplate a situation the place 
I'll give the pen when I'll get it from the shop once I say this to somebody so I'm giving a promise to somebody that when I'll get the pen from the shop I'll give this to you for positive, now three situations can happen 

1. I'll get the pen for positive, which implies I'm profitable in delivering my promise 
2. I cannot get the pen, which implies I'm unsuccessful in delivering my promise 
3. I've seen the pen has arrived on the retailer however I have not gotten it at my arms, It is pending, it could possibly both be successful or reject
This is similar story of guarantees 

In accordance with MDN:-

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

A promise represents whether or not asynchronous code accomplished or failed and finally returned its ensuing worth.

A Promise has three states.

**Pending**: Preliminary state, neither fulfilled nor rejected.
**Fulfilled**: It signifies that the operation was accomplished.
**Rejected**: It signifies that the operation failed.

### map(),filter() & Cut back()

Map, cut back, and filter are all array strategies in JavaScript. Every one will iterate over an array and carry out a change or computation. Every will return a brand new array primarily based on the results of the operate.

Map : 
The map() methodology is used for creating a brand new array from an current one, making use of a operate to every one of many components of the primary array.

Filter :
The filter() methodology takes every aspect in an array and it applies a conditional assertion towards it. If this conditional returns true, the aspect will get pushed to the output array. If the situation returns false, the aspect doesn't get pushed to the output array.

Cut back:
The cut back() methodology reduces an array of values right down to only one worth. To get the output worth, it runs a reducer operate on every aspect of the array.

**Conclusion** : 
These all subjects are should to know in case your going to start out with React, I've tried my finest to share and provide the appropriate examples if you happen to discover it helpful share your views in feedback .


So guys that is all finish from my aspect and if you happen to discover this text helpful then do like and share it and if you wish to chat with me then I'm  [here ](https://linkedin.com/in/iprankurpandey) 

the identical as Java however my remark was improper as few ideas are the identical however have some both limitations or lengthen extra options.

Right now I will likely be sharing, my expertise with JS and its most necessary ES6 idea which aid you in React JS 
Earlier than we begin What's JS, Listed below are 5 factors about it : 


1. It's an Object-Oriented Programming Language, makes use of to program the online for browsers.

2. It's a case-sensitive language which implies 'ABC' and 'ABC' each are various things.

3. It has help in nearly all Working Methods and internet browsers.

4. You are able to do what you want by utilizing JS on the net and has big neighborhood help.

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

Now I want to share necessary issues which can be  the spine of JS, the ES6 

In javascript, the entire doc is the worldwide scope and all the opposite capabilities and variables are contained on this world scope.

What's ES6?

ES6 stands for the sixth revision of ECMAScript which brings some excellent adjustments in JS by introducing some new options.

there are some necessary options that assist in studying React JS few are : 
1. var, let & const
2. Template Strings 
3. Fats arrow capabilities 
4. Perform with default parameters
5. Array and Object Destructuring
6. Relaxation and unfold operators
7. Modules 
8. Guarantees 
9. map(),filter() & Cut back()

Earlier than we begin its time to know two necessary issues 

what's a block? 

In JS block means many js statements shaped in a bunch enclosed in brackets and it kinds a block, now come to the scope 

what's the scope? 

Normally English scope means the possibility or alternative to do one thing, so this similar idea applies to JS scope too. 

Scope provides you the open alternative to carry out the operations contained in the block. 

Have a look at the beneath picture, i
After I began with internet improvement 2 months in the past, 
I noticed a couple of issues, and all these issues have one widespread level, Its JavaScript aka JS.

Sure, essentially the most cherished and hated language and which powers the online.

Coming from a Java coding background first,  I assumed JS will likely be After I began with internet improvement 2 months in the past, 
I noticed a couple of issues, and all these issues have one widespread level, Its JavaScript aka JS.

Sure, essentially the most cherished and hated language and which powers the online.

Coming from a Java coding background first,  I assumed JS would be the similar as Java however my remark was improper as few ideas are the identical however have some both limitations or lengthen extra options.

Right now I will likely be sharing, my expertise with JS and its most necessary ES6 idea which aid you in React JS 
Earlier than we begin What's JS, Listed below are 5 factors about it : 


1. It's an Object-Oriented Programming Language, makes use of to program the online for browsers.

2. It's a case-sensitive language which implies 'ABC' and 'ABC' each are various things.

3. It has help in nearly all Working Methods and internet browsers.

4. You are able to do what you want by utilizing JS on the net and has big neighborhood help.

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

Now I want to share necessary issues which can be  the spine of JS, the ES6 

In javascript, the entire doc is the worldwide scope and all the opposite capabilities and variables are contained on this world scope.

What's ES6?

ES6 stands for the sixth revision of ECMAScript which brings some excellent adjustments in JS by introducing some new options.

there are some necessary options that assist in studying React JS few are : 
1. var, let & const
2. Template Strings 
3. Fats arrow capabilities 
4. Perform with default parameters
5. Array and Object Destructuring
6. Relaxation and unfold operators
7. Modules 
8. Guarantees 
9. map(),filter() & Cut back()

Earlier than we begin its time to know two necessary issues 

what's a block? 

In JS block means many js statements shaped in a bunch enclosed in brackets and it kinds a block, now come to the scope 

what's the scope? 

Normally English scope means the possibility or alternative to do one thing, so this similar idea applies to JS scope too. 

Scope provides you the open alternative to carry out the operations contained in the block. 

Have a look at the beneath picture, on this picture now we have brackets, from the place the brackets begin it will likely be the place to begin of the block, and the place the block ends it's the endpoint of the block.

The realm between block begins & ends is the realm of scope the place we'll get the chance to carry out duties.

When ES6  come into the image there have been many new adjustments, 'let, const & var'  was one in every of that adjustments, it provides you extra entry to handle and use information and its operations. 

Earlier than understanding this primary perceive this :

**Perform Scope:**  When a variable is said inside a operate, it's only accessible inside that operate and can't be used outdoors that operate.

**Block Scope:** A variable when declared contained in the if or swap situations or inside for or whereas loops, are accessible inside that specific situation or loop. 

To be concise the variables declared contained in the curly braces are known as inside block scope.

### var ,let & const :

**Var ** is known as a operate scope that's if a variable is said utilizing the var key phrase it will likely be accessible all through the operate.

**let & const ** are additionally known as block scope that's they're accessible inside that specific block. 

Right here let is used for a variable that may be modified as we proceed by this system whereas const is used for a variable that doesn’t change until this system ends, that's it stays fixed all through this system.

### Template Strings
Template literals are string literals permitting embedded expressions. Template literals are the formatting of strings in javascript. In ES5, formatting string was a tedious activity because it concerned a really handbook formatting syntax. 

In ES6, In opposition to the usual ' and " quotes template literals makes use of back-ticks ` `. we are able to use a brand new syntax ${PARAMETER} within the back-ticked string to outline variable values.

In ES5, now we have to interrupt strings like beneath.


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



with ES6 we are able to obtain the identical output with out doing extra tedious work


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

 //ES6
`
### Fats arrow capabilities
Fats arrow operate or arrow capabilities are essentially the most superb this of es6 as a result of it systematically reduces the code measurement with out compromising the code high quality and options. 

Arrow capabilities because it sounds is the brand new syntax => of declaring a operate. However it behaves otherwise from the normal capabilities of Javascript.
```

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


### Perform with default parameters

You probably have understood the capabilities then you might have the concept about it, on this, now we have the choice to make it with parameters like if there's a operate known as demo operate (), so we are able to go a minimum of two parameters then our capabilities will likely be like demoFunction (a,b) the place a and b are parameters. 

Now after we will likely be calling this then now we have to offer the parameter values in any other case it'll throw the error, and right here the famous factor is that we won't simply go one worth now we have to offer each the values. 

Now, what to do?

right here the default parameter involves rescue you, by utilizing this you'll be able to declare the default values to your arguments in order that when the operate is invoked and also you did not go any worth then additionally your operate will work.
```

    //with out 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 brand new characteristic launched in ES6 to unpack values from arrays or properties from an object. It helps in bettering the readability and efficiency of our code.

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

    //after es6
    // Instance 1 - Object Destructuring
    var consumer = {
        identify: 'Deepak',
        username: 'dipakkr',
        password: 12345
    }
    const {
        identify,
        username,
        password
    } = consumer;
    console.log(identify);
    console.log(username);
    console.log(password);
    //Instance 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
```
``` 

### Relaxation and unfold operators

The  ... is the unfold syntax that means that you can specify an array that needs to be break up and have its gadgets handed in as separate arguments to a operate.
it may be utilized in 2 methods, one as Unfold Operator and different as Relaxation Parameter

- Relaxation parameter 

1. It collects all of the remaining components into an array.
2. Relaxation Parameter can gather any variety of arguments into an array.
3. Relaxation Parameter needs to be the final argument.

    ```//Earlier than 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

Unfold operator 
The unfold syntax can be utilized when all components from an object or array should be included in a listing of some variety.

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

### Modules
Modules provide the entry to separate the code in one other file and when required we are able to import it from that file; by doing this we are able to handle the code and its recordsdata simply. The actual energy of modules is the power to export and import solely bindings you want, fairly than complete 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);
``` 

### Guarantees
Contemplate a situation the place 
I'll give the pen when I'll get it from the shop once I say this to somebody so I'm giving a promise to somebody that when I'll get the pen from the shop I'll give this to you for positive, now three situations can happen 

1. I'll get the pen for positive, which implies I'm profitable in delivering my promise 
2. I cannot get the pen, which implies I'm unsuccessful in delivering my promise 
3. I've seen the pen has arrived on the retailer however I have not gotten it at my arms, It is pending, it could possibly both be successful or reject
This is similar story of guarantees 

In accordance with MDN:-

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

A promise represents whether or not asynchronous code accomplished or failed and finally returned its ensuing worth.

A Promise has three states.

**Pending**: Preliminary state, neither fulfilled nor rejected.
**Fulfilled**: It signifies that the operation was accomplished.
**Rejected**: It signifies that the operation failed.

```
const depend = true;
let countValue = new Promise(operate (resolve, reject) {
    if (depend) {
        resolve("There's a depend worth.");
    } else {
        reject("There isn't any depend worth");
    }
});
``` 
### map(),filter() & Cut back()

Map, cut back, and filter are all array strategies in JavaScript. Every one will iterate over an array and carry out a change or computation. Every will return a brand new array primarily based on the results of the operate.

Map : 
The map() methodology is used for creating a brand new array from an current one, making use of a operate to every one of many components of the primary array.

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

Filter :
The filter() methodology takes every aspect in an array and it applies a conditional assertion towards it. If this conditional returns true, the aspect will get pushed to the output array. If the situation returns false, the aspect doesn't get pushed to the output array.

```
const numbers = [1, 2, 3, 4];
const evens = numbers.filter(merchandise => merchandise % 2 === 0);
console.log(evens); // [2, 4]
``` 
Cut back:
The cut back() methodology reduces an array of values right down to only one worth. To get the output worth, it runs a reducer operate on every aspect of the array.

```
const numbers = [1, 2, 3, 4];
const sum = numbers.cut back(operate (consequence, merchandise) {
  return consequence + merchandise;
}, 0);
console.log(sum); // 10
``` 
**Conclusion** : 
These all subjects are should to know in case your going to start out with React, I've tried my finest to share and provide the appropriate examples if you happen to discover it helpful share your views in feedback .


So guys that is all finish from my aspect and if you happen to discover this text helpful then do like and share it and if you wish to chat with me then I'm  [here ](https://linkedin.com/in/iprankurpandey)