ReactJS ES6

ES6, also known as ECMA script 2015 is a scripting language which is based on specification and standardization by ECMA International Company in ECMA-262 and ISO/IEC 1623. It is the sixth edition of the ECMAScript language specification standard. It was created to standardize JavaScript language to bring multiple implementations. It has introduced several new features such as a new loop for iterating over arrays, block-scoped variables, template literals, and many more Changes to make JavaScript programming easier. ECMA Script is most commonly used for client-side scripting, specifically in the World Wide Web. It is in huge demand for writing server-based applications and broader services by making use of node.js.

Definition: ES6 is the ECMA script programming language, the next version after 5 was released in 2015. It is used to create the standards for JavaScript language such that it can bring multiple independent implementations.

How to use ES6? 
ES6 is usually supported in a lot of places but has the problem of Internet Explorer. So, while you just start writing with ES6 style, you can’t be certain if everyone’s browser will behave the same way.

Nowadays, ES6 is compiled down to ‘regular’ ES5 syntax with the help of utility like Babel. Babel is a compiler that helps in converting your development code which is written in ES6 to the code that will run on your production site, often bundled and minifies with web-pack as well.

Working: You write your ‘.js‘ files in the development environment and can use whatever ES6 syntax that you want. Rather than loading them directly, you set up a web-pack to load js files with Babel. Often, you’ll want to run webpack-dev-server, so this happens automatically when you make changes. Now, instead of loading index.js, you load bundle.js, which has all of your code.

let keyword: ES6 has introduced the new let keyword for declaring variables. Before ES6 was introduced the only way to declaring a variable was to use the keyword var. 

Variables declared using the var keyword are functionally scoped whereas variables declared using the let keyword are block-scoped. Also, variables are hoisted at the top within its scope if declared using the keyword var, but there’s no hoisting when variables are declared using the let keyword.

Block scoping means that jumbling all the JavaScript statements into one block. It creates a new scope between a pair of curly brackets i.e. {}. So, if you declare a variable using the let keyword, it won’t exist outside that loop. Let’s see an example:

// ES6 Syntax
for(let i = 0; i < 10; i++) {

   // Prints '0,1,2,.....9'
   console.log(i);
}

// Prints 'undefined'
console.log(i);  

// ES5 Syntax
for(var i = 0; i < 10; i++) {

   // Prints '0,1,2,.....9'
   console.log(i); 
}

// Prints '10'
console.log(i); 

Therefore, you can see that the variable i in the ES6 syntax is not accessible outside the for-loop. This has the advantage of using the same variable name multiple times since the scope is limited to the block i.e. {}.

const keyword: The const keyword is used to define constants. Constants are read-only, which means that you cannot reassign any new value to them. They are also block-scoped like let keyword.

// Creating a constant variable
const PI = 3.14;

// Prints '3.14'
console.log(PI); 

// Throws an Error
PI = 777; 

Example: Code to illustrates how to change object properties or array elements as shown below:

// Sample object with some properties
const Branch = {name: "IT", students: 55};

// Prints 'IT'
console.log(Branch.name); 

// Changing the object property value
Branch.name = "CSE";

// Prints 'CSE'
console.log(Branch.name); 

// Sample array with some values
const Fruits = ["apple", "mango", "banana"];

// Prints 'apple'
console.log(Fruits[0]); 

// Changing array element
Fruits[0] = "grapes";

// Prints 'grapes'
console.log(Fruits[0]); 

for-of Loop: The for-of loop is used to iterate over arrays or any other iterable objects very easily. Also, using this type of loop each element of the iterable object inside the loop is executed. 

Example: Code to illustrate how to use the for-of loop in ReactJs as shown below:

// Iterating over array
let colors = ["red", "blue", "green", 
        "yellow", "pink", "purple"];

// Using the for-of loop
for (let color of colors) {

   // Prints 'red,blue,green,yellow,pink,purple'
   console.log(color); 
}

// Iterating over string
let name = "Alpha Charlie";

// Using the for-of loop 
for(let character of name) {

   // Prints 'A,l,p,h,a, ,C,h,a,r,l,i,e'
   console.log(character); 
}

Template Literals: Template literals help in providing an easy and clean way to write multiple lines of strings and perform string interpolation. It has also made it easy to embed variables or expressions into a string at any place.

Now, Back-ticks(` `) characters are used to create template literals instead of single and double-quotes. Variables and expressions can be placed inside the string using template literals syntax.

Example: Use of multi-line string in ES6.

// Multi-line string in ES6
let str = `Jack and Jill
   went up the hill.`;

// Sample values
let a = 30;
let b = 10;

// String with embedded variables
// and expression
let answer = 
  `The difference of ${30} and ${10} is ${a-b}.`;

// Prints 'The difference of 30 and 10 is 20.'
console.log(answer); 

Example: Use of multi-line string in ES5.

// Multi-line string in ES5
var str = 'Jack and Jill\n\t'
   + 'went up the hill.';

// Sample values
var a = 30;
var b = 10;

// Creating string using variables
// and expression
var answer = 'The difference of ' + a 
    + ' and ' + b + ' is ' + (a-b) + '.';

// Prints 'The difference of 30 and 10 is 20.'
console.log(answer); 

Arrow Functions: Arrow functions have made it very easy to create functions. It is an expression closure that creates nice and compact functions, especially when working with callbacks, lists, or error handling.

// Arrow functions
arr.map((func) => {
  return func + 1;
});

Additionally, you don’t need the parentheses if you pass only one argument. Also, no brackets and return statements if you’re returning only one value:

arr.map(func => func + 1);

Without using arrow functions, the syntax would be like this:

// Without Arrow functions
arr.map(function (func) {
  return func + 1;
});