React uses ES6. we all have to know about ES6. ES6 stands of ECMAScirpt6. ES6 was first publish on 2015 so it is also know as ES6 2015.
ES6 is update version of javascript. And React uses that ES6 syntax. so let’s kinow all about ES6
. What we ll learn in ES6 ?
- Classes
- Arrow Functions
- Variable (let ,const,var)
What is Class in ES6 ?
Class is keyword like function that is used design code block like function. Class holds all properties to design code block based template
ES6 Follow all rules like object oriented based programming. like constructor
Systax of ES6 constructor
class Name {
constructor(name) {
this.name = name;
}
}
How to initialize this Class ?
var name = new Name(“christo”);
method in class ?
class Name {
constructor(name) {
this.name = name;
}
writename(){
return "my name is " + this.name ;
}
}
console.log(new Name("yashpal").writename());
inheritance in ES6 Class
class Name {
constructor(name) {
this.name = name;
}
writename() {
return "my name is " + this.name ;
}
}
class Name2 extends Name {
constructor(name1, name2) {
super(name1);
this.name2 = name2;
}
showname() {
return this.writename() + ', another name is ' + this.name2;
}
}
name2 = new Name2("yash", "mallu");
console.log(name2.showname());
Super in ES6 inheritance class
through super in ES6 inheritance class we call the parent constructor to access this method
Arrow function syntax in ES6
name = () => "i'm yashpal singh";
Arrow function syntax with header ?
name = (val) => "my name is" + val;
Arrow function systax without parentheses ?
name = (val) => "my name is" + val;
All about this in arrow function
in arrow function there is no binding like regular function this act. in regual function this binding take place either with window document or button
but in arrow function this only binding take place with object that define the arrow function
Example:this in regular function
<script>
class Regularfunction {
constructor() {
this.color = "Red";
}
//Regular function:
changeColor = function() {
document.getElementById("demo").innerHTML += this;
}
}
Regularfunction = new Regularfunction();
//The window object calls the function:
window.addEventListener("load", Regularfunction.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", Regularfunction.changeColor);
<script>
<!--html button-->
<button id="btn">Click Me!</button>
Output:[object Window][object HTMLButtonElement]
Example:Arrow function with this:
<script>
class Regularfunction {
constructor() {
this.color = "Red";
}
//Arrow function:
changeColor = () => {
document.getElementById("demo").innerHTML += this;
}
}
Regularfunction = new Regularfunction();
//The window object calls the function:
window.addEventListener("load", Regularfunction.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", Regularfunction.changeColor);
<script>
<!--html button-->
<button id="btn">Click Me!</button>
Output:[object Object][object Object]
var scope in ES6 ?
var outside of function has global scope
var inside function belong to that function
var has no block scope e.g loop
let scope in ES6 ?
let has only block scope
<script>
for(let x=0;x<10;x++){
console.log(x);
}
console.log(x);
</script>
Output:1 2 3 4 5 6 7 8 9
const scope in ES6 ?
const has block scope and it’s value can’t be changed after initialization