BirunthaG' S Blog: 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:

	class Car {
	constructor(name) {
	this.brand = name;
	}
	}

view raw Javascript Car class hosted with ❤ by GitHub

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.

	<!DOCTYPE html>
	<html>
	<body>
	<script>
	class Car {
	constructor(name) {
	this.brand = name;
	}
	}
	ford = new Car("Ford");
	acura= new Car("Acura");
	audi= new Car("Audi");
	document.write(ford.brand);
	document.write(acura.brand);
	document.write(audi.brand);
	</script>
	</body>
	</html>

view raw Car.html hosted with ❤ by GitHub

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":

	<!DOCTYPE html>
	<html>
	<body>
	<script>
	class Car {
	constructor(name) {
	this.brand = name;
	}
	getBrand() {
	return 'I have a ' + this.brand;
	}
	}

	ford = new Car("Ford");
	document.write(ford.getBrand());
	</script>
	</body>
	</html>

view raw ES6Class_Method.html hosted with ❤ by GitHub

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.

	<!DOCTYPE html>
	<html>
	<body>
	<script>

	class Animal {
	constructor(name, speed) {
	this.speed = speed;
	this.name = name;
	document.write("Inside Animal class <br/>");
	}

	run() {
	return 'My name is ' + this.name + '. I am running with speed ' + this.speed;
	}
	}

	dog = new Animal("Dog", 5);
	document.write(dog.name + "<br/>")
	document.write(dog.run() + "<br/>");

	class Rabbit {
	constructor(name, speed) {
	this.speed = speed;
	this.name = name;
	document.write("Inside Rabbit class <br/>");
	}

	run() {
	return 'My name is ' + this.name + '. I am running with speed ' + this.speed;
	}

	hide() {
	return this.name + " hides!";
	}
	}

	florida = new Rabbit("Florida White rabbit", 5);
	document.write(florida.run() + "<br/>");
	document.write(florida.hide());
	</script>
	</body>
	</html>

view raw Animal_Rabbit.html hosted with ❤ by GitHub

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.

	<!DOCTYPE html>
	<html>
	<body>
	<script>
	class Animal {
	constructor(name, speed) {
	this.speed = speed;
	this.name = name;
	document.write("Inside Animal class <br/>");
	}
	run() {
	return 'My name is ' + this.name + '. I am running with speed ' + this.speed;
	}
	}

	class Rabbit extends Animal {
	// Overriding the parent class functionality
	run() {
	return 'My name is ' + this.name + '. I am jummping with speed ' + this.speed;
	}

	hide() {
	return this.name + " hides!";
	}
	}
	florida = new Rabbit("Florida White rabbit", 5);
	document.write(florida.run() + "<br/>");
	document.write(florida.hide() + "<br/>");
	document.write("Rabbit name " + florida.name);

	</script>
	</body>
	</html>

view raw Inheritance.html hosted with ❤ by GitHub

Calling parent class from child class

	<!DOCTYPE html>
	<html>
	<body>
	<script>
	class Animal {
	constructor(name, speed) {
	this.name = name;
	this.speed = speed;
	document.write("Inside Animal class <br/>");
	}
	run() {
	return 'My name is ' + this.name + '. I am running with speed ' + this.speed;
	}
	}

	class Rabbit extends Animal {
	constructor(name, speed) {
	// Calling the parent class constructor with name, speed parameters
	super(name, speed);
	document.write("Inside Rabbit class <br/>");
	}

	hide() {
	return this.name + " hides!";
	}
	}

	florida = new Rabbit("Florida White rabbit", 5);
	document.write(florida.run() + "<br/>");
	document.write(florida.hide() + "<br/>");
	document.write("Rabbit name " + florida.name);
	</script>
	</body>
	</html>

view raw Inheritance2.html hosted with ❤ by GitHub

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:

	<!DOCTYPE html>
	<html>
	<body>
	<h1>Function</h1>
	<p>This demonstrates a regular function, NOT an arrow function.</p>
	<p id="demo"></p>
	<script>
	hello = function() {
	return "Hello World!";
	}
	document.write(hello());
	</script>
	</body>
	</html>

view raw RegularFunction.html hosted with ❤ by GitHub

With Arrow Function:

	<!DOCTYPE html>
	<html>
	<body>
	<h1>Arrow Function</h1>
	<p>A demonstration of a simple arrow function.</p>
	<p id="demo"></p>
	<script>
	hello = () => {
	return "Hello World!";
	}
	document.write(hello());
	</script>
	</body>
	</html>

view raw ArrowFunction.html hosted with ❤ by GitHub

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.

BirunthaG' S Blog

Saturday, June 6, 2020

React ES6