React ES6

What is ES6?

ES6 stands for ECMAScript 6. ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was

published in 2015, and is also known as ECMAScript 2015.

Why Should I Learn ES6?

React uses ES6, and you should be familiar with some of the new features like:

• Classes

• Arrow Functions

• Variables (let, const, var)

Classes

Classes are used to define the blueprint for real-world object modeling and organize the code into reusable and logical parts. Before ES6,

it was hard to create a class in JavaScript. But in ES6, we can create the class by using the class keyword.

A class definition can include constructors and methods. The classes contain constructors that allocate the memory to the objects of a

class. Classes contain methods that are responsible for performing the actions to the objects.

Example

A simple class constructor:

Now you can create objects using the Car class:

Create an object called "ford" based on the Car class. The constructor function is called automatically when the object is initialized.

Note : The keyword 'this' refers to the current instance of the class.

Method in Classes

You can add your own methods in a class. Create a method named "getBrand":

As you can see in the example above, you call the method by referring to the object's method name followed by parentheses

(parameters would go inside the parentheses).

Class Inheritance

Look at the following Animal, Rabbit classes. There are common data members and methods in those classes. So it will lead to code duplication.

We can solve this problem using class inheritance as shown below.

To create a class inheritance, use the extends keyword.

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

Create a class named "Rabbit" which will inherit the methods from the "Animal" class.

Calling parent class from child class

The super() method refers to the parent class. By calling the super() method in the constructor method, we call the parent's constructor method and get access to the parent's properties and methods.

Arrow Functions

Arrow functions were introduced in ES6. Arrow functions allow us to write shorter function syntax:

Before:

With Arrow Function:

It gets shorter. If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword:

Arrow Functions Return Value by Default: This works only if the function has only one statement.

hello = () => "Hello World!";

Arrow Function With Parameters: If you have parameters, you pass them inside the parentheses.

hello = (val) => "Hello " + val;

Arrow Function Without Parentheses: In fact, if you have only one parameter, you can skip the parentheses as well.

hello = val => "Hello " + val;

Variables

Before ES6, there was only one way of defining your variables with the var keyword. Now, with ES6, there are three ways of defining your variables: var, let, and const.

var

var x = 5.6;

let

let x = 5.6;

const

const x = 5.6;

const is a variable that once it has been created, its value can never change.

const has a block scope.