Do you know ES6 - Part 1
Tags: es6, javascript, arrowfunctions, modules
Published: 2019-02-28 19:44:03

---
title: Do you know ES6 - Part 1
published: true
description: Crash course in JS ES6
tags: #ES6, #javascript, #Arrowfunctions, #Modules 
cover_image: https://i.imgur.com/V388IwW.png
key: 1
series: Crash course in JS ES6

---

-----------------------------------
### ES6 its JS, ES6 is about the next generation of Javascript. 

ES6 is so useful because all the ES6 features React, Angular and Vue apps typically use. In general, ES6 allows us to write clean and robust react apps and this help us to do more powerful things.

Content:
* Let and const
* Arrow functions
* Modules (Exports & Imports)
* Classes
* The threeDots ...
* Destructuring


______________
## Let and const
Let and const are different ways of creating variables.
We have var to create a variable in js but with ES6, There, two different keywords were introduced, let and const. 
Var still works but you're highly encouraged to use let and const
Let is the new var, you use it for create a variable with value. But the most important point here is use let if you want to create a variable that really is variable.
Use const if you plan on creating a constant value, so something which you only assign once and never change.

In normal JS, We use var keyword to create a variable
```javascript
var myName = 'Mohamed';
console.log(myName);

myName = 'Khaled';
console.log(myName);
```
In ES6, We can use let keyword instead of var to create a variable
```javascript
let myName = 'Mohamed';
console.log(myName);

myName = 'Khaled';
console.log(myName);
```
Also we can use const to create a constant variable. That means we can't reassign this value
In the next example, We get an ERROR because we try to reassign a constant variable
```javascript
const myName = 'Mohamed';
console.log(myName);

myName = 'Khaled';    //ERROR 
console.log(myName);
```
______________


## Arrow functions.
Arrow functions is a different syntax for creating Javascript functions.
A normal javascript function of course looks like this.
```javascript
function printName(name){
  console.log(name);
}

printName();		//undefined	
printName('Mohamed');	//Mohamed
```
But Arrow functions:
```javascript
const printName = (name) => {
  console.log(name);
}

printName();	
printName('Mohamed');
```
There some alternatives to this syntax
If we have one argument
```javascript
const printName = name => {
  console.log(name);
}

printName();	
printName('Mohamed');
```
If we have a function which receives no arguments, we need to pass an empty pair of parentheses
```javascript
const printName = () => {
  console.log('Mohamed');
}

printName();	
```
If we have a function which receives more than one argument, we need parentheses
```javascript
const printName = (name1, name2, age) => {
  console.log(name1, name2, age);
}

printName('Mohamed', 'Khaled', 23);	
//Mohamed
//Khaled
//23
```
Also we can update our function body
```javascript
const mul = (number) => {
   return number * 5;
}

console.log (mul(3));		//15
```
We can update this function and remove braces and retrun keyword
```javascript
const mul = (number) => number * 5;
console.log (mul(3));	
```
We can update also
```javascript
const mul = number => number * 5;
console.log (mul(3));		//15
```
______________

## Modules (Exports & Imports)
We can split our code over multiple files, HOW?
We have to import them in the correct order in out html files, So we can import content from another file 

Example, If we have person.js file that have an object
```javascript
//Object
const person = {
	name: 'Mohamed'
}

export default person
```

If we have another file utility.js, We can export multiple things

```javascript
export const printMohamed = () => {
    console.log('Mohamed');
}

export const mul = number => number * 5;
export const baseData = 10;
```

We can import this somewhere else. For example this file app.js

```javascript
//Notice: We can name person whatever we want because it's the default 
import person from './person.js'
import prs from './person.js'
```

We should use curly braces to explicitly target specific things from that file
```javascript
import {baseData} from './utility.js'
import {mul} from './utility.js'
```

We can assign an alias with any name you choose after as keyword
```javascript
import {mul as multiply} from './utility.js'
import {printMohamed as mkhy} from './utility.js'
```
If we have multiple named exports in a file and we want to import all of them, We use special character * and then assign an alias 
```javascript
import * as bundled from './utility.js'
```
If we have more than once and we want to import special exports
```javascript
import {baseData},{printMohamed} from './utility.js'
```
______________

## Classes
Classes are blueprints for objects, Class can have both properties and methods

Here's We created Person class that has name property and mul method. Then we created an object from this class
```javascript
//Create class
class Person{
	name = 'Mohamed';
        mul = number => number * 5;
}

//Use class, use new keyword
const myPerson = new Person();

console.log(myPerson.name);	//"Mohamed"
console.log(myPerson.mul(3));	//15
```

Another example, We created class that has a constructor and print method. Then we created an object from this class
```javascript
//Create class
class Person{
	//Default function method
	constructor(){
		this.name = 'Mohamed';
	}

	printMyName(){
		console.log(this.name);
	}
}

//Create an instance or object
const person = new Person();
person.printMyName();	//"Mohamed"
```

What if we want to make an inheritance? Here we use super keyword.
super keyword It's a keyword and it simply executes the parent constructor
```javascript
//Create Human class
class Human{
	constructor(){
		this.gender = 'male';
	}

	printGender(){
		console.log(this.gender);
	}
}

//Create Person class
class Person extends Human{
	constructor(){
            super();	
            this.name = 'Mohamed';
	}

	printMyName(){
            console.log(this.name);
	}
}

//Create an instance or object
const person = new Person();
person.printMyName();	//"Mohamed"
person.printGender();	//"male"
```
**Pay attention in the next important case:**
Here our person class extends from Human class but person class has it's own properties and methods.
```javascript
class Human{
	//Default function method
	constructor(){
		this.name = 'Mohamed';
		this.gender = 'male';
		this.age = 23;
      
	}

	printGender(){
		console.log(this.gender);
	}
	printAge(){
		console.log(this.age);
	}  
}


class Person extends Human{
    constructor(){
        super();
        this.name = 'Sarah';
        this.gender = 'Female';
        this.age = 35;
    }

    printMyName(){
        console.log(this.name);
    }
}


const person = new Person();
person.printMyName();	//"Sarah"
person.printGender();	//"Female"
person.printAge(); 	//35
```
______________

## Important notes on Classes, Properties and Methods

ES7 offers a different syntax of initializing properties and methods
In ES6, Properties are like variables attached to classes or objects
```javascript
constructor(){
	this.myProperty = 'value';
        this.name = 'Mohamed';
}
```

In ES7, We can assign a property directly inside our class so we skip the constructor function call. 
In fact behind the scene this will still be transformed to use constructor functions
```javascript
myProperty = 'value'
name = 'Mohamed';

```

In ES6, As we discussed before, Methods are like functions attached to classes or objects

```javascript
//myMethod () {...}
printMyName(){
    console.log(this.name);
}
```

In ES7: We use an arrow function as a property value so you have got no problems with the this keyword
```javascript
//myMethod = () => {...}
printMyName = () => {console.log('Mohamed');}
printGender = () => {this.gender);}
printMyName = () => {this.name);}

```
In the next example, We can get rid of the constructor in the human class and get rid of the this keyword. Also we convert our methods to arrow functions. Finally, We no longer need to call super keyword.
**Pay attention**: If you run it on JSbin, You will get an error because doesn't recognize the syntax. So you actually need to choose ES6/Babel
```javascript
class Human{
      gender = 'female';

      printGender = () => {
        console.log(this.gender);
      }
}


class Person extends Human{
      name = 'Mohamed';
      gender = 'male';

      printMyName = () => {
        console.log(this.name);
      }
}


const person = new Person();
person.printMyName();   //"Mohamed"
person.printGender();   //"male"
```
_______________ 
## The threeDots ...
* The spread and the Rest operators called the threeDots
* The operator is just three dots ...
* The spread operator is used to split up array elements or object properties. In other words, To copy arrays or add properties to an object whilst safely copying that old object.
The spread operator takes out all elements, all properties and distributors them in a new array or object or wherever you are using it

EX1 ... With array
```javascript
const numbers = [1,2,3];
const newNumbers = [numbers,4,5];
console.log(newNumbers);	//[[1, 2, 3], 4, 5]

const spreadNumbers =[...numbers,4,5];
console.log(spreadNumbers);	//[1, 2, 3, 4, 5]
```
EX2 .. With object
```javascript
const oldPerson = {
  name : 'Mohamed'
  
};

const newPerson = {
  ...oldPerson,
  age: 23
}

console.log(newPerson);
```
Output
[object Object] {
  age: 23,
  name: "Mohamed"
}

* The rest operator is used to merge a list of function arguments into an array and we use it in a function argument list
```javascript
const filterFunc1 = (...args) => {
  return args.filter(el => el === 1);
}

console.log(filterFunc1(1,2,7,1,3,8,9,1,2));	//[1, 1, 1]
```
EX3
```javascript
const filterFunc2 = (...args) => {
  return args.filter(el => el === 1 || el ===2);
}

console.log(filterFunc2(1,2,7,1,3,8,9,1,2));	//[1, 2, 1, 1, 2]
```
______________

## Destructuring
* Destructuring allows you to easily extract array elements or object properties and store them in variables
* Destructuring is different than what spread operator do
* Destructuring allows you to pull out single element or properties and store them in varables for arrays and objects

Array example:
```javascript
[a,b] = ['Mohamed','Khaled']
console.log(a);	//Mohamed
console.log(b);	//Khaled
```
Object example:
```javascript
myInfo1 = {name:'Mohamed'};
console.log(myInfo1.name);	//Mohamed
console.log(myInfo1.age);	//undefined

myInfo2 = {name:'Mohamed', age:23};
console.log(myInfo2.name);	//Mohamed
console.log(myInfo2.age);	//23
```
EX1
```javascript
const numbers = [1,2,3];
[num1,num2] = numbers;

console.log(num1,num2);
//1
//2
```
EX2
```javascript
const numbers = [1,2,3];
[num1, ,num3] = numbers;

console.log(num1,num3);
//1
//3
```
EX3
```javascript
const {name} = {name:'Mohamed', age:23}
console.log(name);	//Mohamed
console.log(age);	//undefined
```
EX4
```javascript
const {name,age} = {name:'Mohamed', age:23}
console.log(name);	//Mohamed
console.log(age);	//23
```
**Some reference:**
Read more about [let] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
Read more about [const ] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)
Read more about [ES6 Arrow Functions] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

###Finally … [Here] (https://github.com/mkhy19/Crash-courses/tree/master/JS/ES6) is the repo, You can find all source code.