Intro To React (P2) ES6 features

Variables

var was used to declare variables in JavaScript.
To avoid errors and solving scoping issues we now use
let and const where let is a var like declaration and using const we make the variable immutable.

We need to use let and const as per our requirements.

Arrow function

Regular function in JavaScript

function myFunc () {
   ...
   --function_body--
   ...
}

ES6 function in JavaScript

const myFunc = () => {
   ...
   --function_body--
   ...
}

parenthesis can be removed if 1 parameter is passed and the return statement can be omitted if it is a one-liner

const myFunc = num => num * 5;

myFunc(5);

Export and Import

We use export default person to export a default parameter or function. Or we may export multiple functions from a single file
export const hello.

To import we follow the below syntax

To import default functions
import person from './person.js';
import prs from './person.js';

To import particular function from many export
import {hello} from './hello.js';
import {hello as Hi} from './hello.js';
import * as bundled from './hello.js';

Class

class Person{
   name = "Raja";                //Property are variable

   const call = () => { body  }  //Methods are functions
}
Usage:
const myPerson = new Person;
myPerson.call();

class Person {
   constructor () {
      this.name = "Sonu";
   }
   function printMyName () { 
       console.log(this.name);
   }
}

Spread and Rest Operator

This is three dots ...

The spread operator is used to split up array or object elements

oldArr = [a, b, c]
const arr = [...oldArr, 1, 2];    // [a, b, c, 1, 2]

const oldObj = { name : 'Ashu'};
const obj = {
   ...oldObj,
   age : 25
}

The rest operator is used to merge a list of arguments into an array

function sortArray (...args) {
   return args.filter( item => item === 10);
}

sortArray(1,5,8,10);

Destructuring

To pick up particular items in an array and store them as variables

const numbers = [1, 2, 3];
[num1, , num2] = numbers;

console.log (num1, num2);   // 1, 3

Blog