What is ES6 javascript | Use ES6 in React js


Javascript ES6 

what is es6 javascript

ES stand for ECMAScript and 6 is its version. It was created to standardize javascript to ensure interoperability of web pages for different browsers. ES6 was published in 2015.

Each new version introduced new features and especially made the javascript code more concise.

ES6 features are:-
  • Variables (let, var, const)
  • ES6 Arrow function
  • Javascript Class


Javascript Variable

Before ES6, keyword var was used to declare variable in javascript. ES6 introduced three ways to declare variable which are let, const and var. These are differentiated by their scopes. Javascript variable scope can be global, function or block.

Javascript var

var num = 54;

  • If you declare num outside the function, its scope is global and can be accessed anywhere.
  • If you declare num inside of a function or block of loop or statement, it has function scope and can be accessed anywhere inside function.

Var does not have block scope even it is declared inside a block, it has function scope.

Javascript let

let num = 43

let in js is used to declare variable having only block scope. 

Const in Javascript

const num = 34

Like let, const is also of block scope. However, variable declared using const, can only be initialized once. You cannot change value of variable later.

Arrow Function

This feature made the function shorter and concise. Below is normal function.

const multiply = function (val){ 
  return val * val;

With javascript arrow function

const multiply = (val=> { 
  return val * val

If function body has only one statement, you can exclude curly braces and return keyword as

const multiply = (val=> val * val

If there is only one parameter, you can skip parentheses as

const multiply= val => val * val

Javascript Class

JS class is used to implement inheritance. All properties are initialized inside the javascript class constructor. When you create object of class, constructor is called automatically and all properties are initialized.

In previous lesson, we have learnt how to create react class component and react function component. Now we will change the normal function to arrow function in App.jsx file as below

import React from 'react';
const App = () => {
  return(
    <div>
      <h1>My react heading</h1>
      <p>This is react paragraph</p>
    </div>    
  );
}
export default App;


No comments:

Post a Comment