ES6 stands for ESCIMASCript 2015. in this standard we got some features that added to javascrip. there is a list of ES6 feature that React support them. in folow we familiar with them.
// Base Class defination
//-----------------------------------------------------
class Car {
constructor(name, type, model, color) {
this.carName = name;
this.carType = type;
this.carModel = model;
this.carColor = color;
}
getCarInfo() {
return [this.carName, this.carType, this.carModel, this.carColor];
}
rName() {
return this.carName;
}
rType() {
return this.carType;
}
rModel() {
return this.carModel;
}
rColor() {
return this.carColor;
}
}
//-----------------------------------------------------
//-----------------------------------------------------
// Inheritence in Javascript
class Engines extends Car {
constructor(name, type, model, color, engines) {
super(name, type, model, color);
this.engines = engines;
}
printCarWithEngines() {
// all this functions bring from Car parent because we use super(blah, blah, blah) and bring them to engines class
// note : we can't directly access from a child class to parent properties something like this : this.name instead we can call public function in parent something like this rName()
console.log("Car name is " + this.rName() + " and its type is " + this.rType() + " and is model and color is : " + this.rModel() + ", " + this.rColor());
// now lets show list of Car engines :
console.log("List of " + this.rName() + " engines");
this.engines.map( engine => {
console.log(engine + "\n");
});
}
}
//-----------------------------------------------------
//-----------------------------------------------------
// lets create a instance from Car
const carInstance = new Car("Doge", "Hellcat", "Challenger", "Black");
const myCarInfo = carInstance.getCarInfo();
//-----------------------------------------------------
//-----------------------------------------------------
const carEngines = new Engines( "Doge", "Hellcat", "Challenger", "Black",
["SUPERCHARGED 6.2L HIGH-OUTPUT HEMI® V8 ENGINE", "SUPERCHARGED 6.2L HEMI® V8 ENGINE", "392 HEMI® V8 ENGINE", "5.7L HEMI® V8 ENGINE"]
);
carEngines.printCarWithEngines();
//-----------------------------------------------------
this feature allow us to write a shorten function
//-----------------------------------------------------
// define myFunc
const myFunc = () => {
// do somthing
}
// call myFunc
myFunc();
//-----------------------------------------------------
// another way to define a Arrow Function
myFunc = () => return "this is myFunc";
myFunc = (val) => return val;
myFunc = function() { return "this is myFunc"};
//-----------------------------------------------------
var, let and const supported in React and we could use them
//-----------------------------------------------------
// define a variable with var
var x = 10; // define x as a variable and it's a function scope
// example of function scope :
myFunc = () => {
var x = 10; // x just available inside myFunc -> this is block scope
}
//-----------------------------------------------------
//-----------------------------------------------------
// define a variable with let
let x = 10; // define x as a variable and it's a function and block scope version of var.
// example of block and function scope :
{
let x = 10; // x just available inside block
}
if(somthing === true) {
let x = 10; // x just available inside block
}
for (let i=10; i>= 0; --i) {
let x = 10; // x just available inside block
}
const myFunc = () => {
let x = 10; // x just available inside block
}
//-----------------------------------------------------
//-----------------------------------------------------
// define a const variable with const
const x = 10; // if you define x as const. its mean you can't never change x value in the rest of your code
// define an array as const is much different but also you not allowed to reassignment anything to it. you just could update its values for a const Object and const Arrays
// note when you define a array as const you able to update its values. look at below example
const colors = ["Red", "Green", "Blue"];
colors[0] = "White"; // I replace Red with White
const users = {uname: "vheidari", upass: "00xx*****", email: "[email protected]"}
users.uname = "AndresK"; // I replace AndresK with vheidari
// example of block scope :
{
const x = 10; // x just available inside block
}
if(somthing === true) {
const x = 10; // x just available inside block
}
for (let i=10; i>= 0; --i) {
const x = 10; // x just available inside block
}
const myFunc = () => {
const x = 10; // x just available inside block
}
//-----------------------------------------------------
Map method help us to iterating on an array.
//----------------------------------------------------
const myArray = new Array("one", "two", "three");
myArray.map( item => console.log(item) );
//----------------------------------------------------... or Spread return or copy whole of an array or just array that exist insie a array to familier with it look at this example :
//----------------------------------------------------
// we use spread operator to store rest of array to second key of array
const myArray = ["one", "two", "three"];
const [one, ...rest] = myArray; // "one" will copy to -> one and "two" and "three" will copy to ...rest
//----------------------------------------------------
//----------------------------------------------------
// binding to list with ... (spread) opration
const listOne = [1, 2, 3];
const listTwo = [3, 5, 9];
const bindLists = [...listOne, ...listTwo]; // listOne and listTwo bind with together they will store inside bindList variable
//----------------------------------------------------
//----------------------------------------------------
// binding object to a object is same
const userId = {
id: 10
};
const userName = {
name: "Alex"
};
const userInfo = {...userId, ...userName} // we combined two object to a object and pass it to userInfo through ... (spread) feature
//----------------------------------------------------Old schoole way to pass a array to list of varilable
//-----------------------------------------------------
const values = ["one", "two", "three"];
const one = value[0];
const two = value[1];
const three = value[2];
//-----------------------------------------------------ES6 Distructureing Feature ( function and array and Object)
//-----------------------------------------------------
// lets seen how it work with function
function getMeValues() {
const one = "one";
const two = "two";
const three = "three";
return [one, two, three]
}
// we got one, two, and three in order
const [one, two, three] = getMeValues();
//-----------------------------------------------------Destructing array
//-----------------------------------------------------
//let seen how it work with array
const values = ["one", "two", "three"];
//we got one, two, three in order that passed through values
const [one, two, three] = values;
// OR :
// if we just need two value one and three
const [one, , three] = values;
//-----------------------------------------------------Old school way to work with object inside javascrip
//-----------------------------------------------------
const myObject = {
id: 1,
username: "vheidari",
password: "393@#********",
email: "[email protected]"
}
objectInformation(myObject);
function objectInformation(myObject) {
console.log("your id is : " + myObject.id + ". and your uname is : " + myObject.username + "and your password is :" + myObject.password + " and your email is : " + myObject.email )
}
//-----------------------------------------------------ES6 Destructing feature pass a object to a function
//-----------------------------------------------------
const myObject = {
id: 1,
username: "vheidari",
password: "393@#********",
email: "[email protected]"
}
objectInformation(myObject);
// ordering arguments is not important you order them in your choice.
function objectInformation(id, password, email, username) {
console.log("your id is : " + id + ". and your uname is : " + username + "and your password is :" + password + " and your email is : " + email )
}
//-----------------------------------------------------Actually Modules are really important. because they allow us to break our code to multiple files. with this feature we can define Modules separately and export or import them.
//-----------------------------------------------------
// assume this module that we define it is inside "DB.js"
const db = [
{
name: "Alex",
family: "Kling"
},
{
name: "Anna",
family: "Bison"
},
{
name: "Dany",
family: "Boys"
},
]
export default db;
//-----------------------------------------------------
//-----------------------------------------------------
// now assume inside "Index.js" I need database information I can import them with import inside "Index.js"
import _DB From "./DB.js"
// now itrate on _DB data
_DB.map( item => console.log("user name: " + item.name + ". family : " + item.family))
//-----------------------------------------------------note : when we define module we just can use once export default keyword.
note : we also can use just export keywork to export multiple variable in a module file. look at this example :
//-----------------------------------------------------
// assume these two database define inside "DB.js"
const dbNames = [
{
name: "nani"
},
{
name: "dua"
}
];
const dbFamily = [
{
family: "backman"
},
{
family: "lipa"
}
];
// we use export alone to export tow database
export dbName;
export dbFamily;
// or another way that we could do it :
export {dbName, dbFamily};
//-----------------------------------------------------
//-----------------------------------------------------
// now assume inside "Index.js" I need 2 databases information. I can import them with import inside "Index.js"
import {_DBName, _DBFamily} from "./DB.js";
// now itrate on _DBName and _DBFamily data
_DBName.map( item => console.log("user name: " + item.name ));
_DBName.map( item => console.log("user family: " + item.family ));
//-----------------------------------------------------Ternary is a shor version of if statement. look at this example :
//-----------------------------------------------------
// Ternary in action :)
const isLogin = false;
(isLogin) ? console.log("you are login ;)") : console.log("you are not login");
//-----------------------------------------------------
//-----------------------------------------------------
// above condition are same as this below code :
const isLogin = false;
if(isLogin) {
console.log("you are login ;)");
} else {
console.log("you are not login");
}
//-----------------------------------------------------there are some useful link if you like read more about them.
- es6 :
https://www.w3schools.com/js/js_es6.asp
- super() :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super