Javascript ES6 needed for React 🚀

1. What is ES6?

ECMA Script is the standardized name for JavaScript. ES6 was published in June 2015.

2. Let and const

A const and let variable cannot be reassigned.

let num1 = 20;
console.log(num1);

let num1 = 10;
console.log(num1);

const num1 = 20;
console.log(num1);

const num1 = 10;
console.log(num1);

3. Template Literals

Template literals allow expressions in strings.

Template Literals use back-ticks (``) rather than quotes ("") to define a string.

With template literals, you can use both single and double quotes inside a string:

const firstName = 'James'
const lastName = 'Smith'

function getFullName(firstName, 
    lastName) {
    return `${firstName} ${lastName}`;
}

const fullName = `Hello ${getFullName(firstName, lastName)}`;

console.log(fullName);

4. Arrow Function

Arrow functions allow us to write shorter functions.

Before

hello = function() {
  return "Hello World!";
}

After

hello = () => {
  return "Hello World!";
}

5. Spread Operator

The spread operator (...) allows us to quickly copy all or part of an existing array or object into another array or object.

const myName = {
    first: 'John',
    middle: 'James',
    last: 'Smith'
  }

  const updateMyName = {
    age: '21',
    birthdate: 2000, 
    sex: 'male'
  }

  const myUpdatedName = {...myName, ...updateMyName}

  console.log({...myUpdatedName})

6. Destructuring

Destructuring makes it easy to extract only what is needed.

Before

const myName = ['John', 'James', 'Smith'];

// Before
const first = myName[0];
const middle = myName[1];
const last = myName[2];

console.log(myName);

After

// After
const myName = ['John', 'James', 'Smith'];

const [first, middle , last ] = myName;

console.log(myName);

7. Array .map()

The .map() method allows you to run a function on each item in the array, returning a new array as the result.

const myArray = ['apple', 'banana', 'orange'];

const myList = myArray.map((item) => <p>{item}</p>)

8. Array reduce()

The reduce() method executes a reducer function for each value of an array.

reduce() returns a single value which is the function's accumulated result.

reduce() does not execute the function for empty array elements.

reduce() does not change the original array.

const numbers = [175, 50, 25];

document.getElementById("demo").innerHTML = numbers.reduce(myFunc);

function myFunc(total, num) {
  return total - num;
}

9. Array filter()

filter() creates a new array filled with elements that pass a test provided by a function.

filter() does not execute the function for empty elements.

filter() does not change the original array.

const ages = [32, 33, 16, 40];

const result = ages.filter(checkAdult);

function checkAdult(age) {
  return age >= 18;
}

10. Classes

A class is a function but the properties are assigned inside a constructor() method.

class Name {
    constructor(name) {
      this.name = name;
    }
  }

  myName = new Name("James");

  console.log(myName.name);

11. Class Inheritance

A class created with a class inheritance inherits all the methods from another class

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}

let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();

12. Callbacks

Functions are executed in the sequence they are called. Not in the sequence they are defined.

function myFirst() {
  myDisplayer("Hello");
}

function mySecond() {
  myDisplayer("Goodbye");
}

myFirst();
mySecond();

13. Promises

Promise object contains both the producing code and calls to the consuming code

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Blog