JavaScript ES6 (ECMAScript 2015)

▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬

◉ Arrow function

Benefits of arrow function:-

Syntax:-

// No parameters
() => { statements }
// single parameter
(param) => { statements } OR param => { statements }
// multiple parameters
(param1,param2,....paramN) => { statements }
// Returning objects
// enclose objects by parenthesis so they can be treated as objects
(param1,param2) => ( { id: 1 , key: value });
let addition = (x, y) => { return x + y; };
let addition = (x, y) => { return x + y; };
console.log(typeof addition); // function
=> expression
=> { return expression; }

Multiline arrow Function

let multiply = (x,y) 
=> x * y;
let multiply = (x,y) => 
x * y;
let multiply = (
x,
y
) =>
x * y;

Lexical “this”

.bind(this)
var self = this;
// ES5
function Counter(){
this.seconds = 0;
window.setInterval(function() {
this.seconds++;
}.bind(this), 1000);
}
//ES6
function Counter(){
this.seconds =0;
window.setInterval( () => this.seconds++,1000 );
}
const funct = () => {
console.log(arguments); // This will throw reference error
}
// undefined

When to Avoid arrow functions?? ( You have been warned! )

var Person= (param) => {
this.name = param;
}
var Boy = new Person('Ram');
// Throws error that Person is not a constructor
var button = document.getElementById('myButton');  
button.addEventListener('click', () => {
console.log(this === window); // true and this != button
this.innerHTML = 'Clicked button';
});
var func = () => { console.log("Hello"); };var func1 = new func();
// Uncaught TypeError: func is not a constructor
Babel

◉ Block level scoping (const & let)

# hoistingconsole.log(z); // undefined    
var z = 3;
console.log(z);

console.log(z); //ReferenceError
let z = 3;
console.log(z); // 3

const

const numbers = [1,2,3]; 
numbers.push(4); //is fine./
* But we can’t point to new array */
numbers = [1,2,3,4]; //ERROR. We can't point to new array address.

◉ Template Literals

key points:

◉ Destructuring

Swapping Variables

let color1 = "red";
let color2 = "blue";
[ color1, color2 ] = [ color2, color1 ];
console.log(color1); // "blue"
console.log(color2); // "red"

Destructuring with Functions

Destructuring an array returned from a function

◉ Rest operator

const numbers = [1, 3, 2, 6, 8];
const [r1, r2, ...rest] = numbers;
console.log(rest);
console.log(r1);
console.log(r2);
// [2, 6, 8]
// 1
// 3

Spread operator

function sum (a, b, c) {
return a + b + c;
};
const numbers = [1, 2, 3];
console.log(sum(...numbers));
// 6

Why spread Operator?

◉ Classes

Syntax

/*Defining Class*/
class ClassName {
constructor(propertyValue){
this.property = propertyValue;
}
functionName(){
// function body
}
}
/* Creating objects from class */
let objName = new ClassName(propertyValue);
class Animal{
constructor(name, sound){
this.name = name;
this.sound = sound;
}

speak(){
console.log(this.name + `${this.sound}`);
}
let dog = new Animal('Sprinkles', 'barks');
dog.speak();
# creating a "CLASS" using a traditional approachfunction Animal(name, sound){
this.name = name;
this.sound = sound;
}
Animal.prototype.speak = function(){
console.log(this.name + ' ' + this.sound);
}
var dog = new Animal('Sprinkles', 'barks!');
dog.speak();
typeof Animal; // function

In the ES6-Class way,

The static method

Class example with `static` methods
class Animal{
constructor(name, sound){
this.name = name;
this.sound = sound;
}
speak(){
console.log(this.name + this.sound);
}
static allSpeak(animals){
for(animal of animals){
console.log(animal.name + animal.sound);
}
}
}Animal.allSpeak(animal1, animal2, animal3);

Benefits of classes

Things to remember about ES6 classes

The “super” and “extends” keywords

class Animal {
constructor(){
this.name = name;
}
speak(){
console.log(this.name + ' makes a noise.');
}
}
class Dog extends Animal {
constructor(name, sound = 'noise'){
super(name);
this.sound = sound;

speak() {
console.log(this.name + this.sound);
}
}
let dog1 = new Dog('Barnacles');
dog1.speak(); // Barnacles barks

Mix-ins.

◉ Modules (Import and export)

import {myNumbers,myFunc} , myStr from 'app.js';

ES5 Example

ES6 example

Exporting

export function sayName(name) {
console.log(`Hello ${name}`);
}
export function sayAnimal(animal) {
console.log(`What animal? ${animal}`);
}
export default function whatsYourFlava(flava) {
console.log(`I'm liking ${flava}?`);
}

Importing

import { sayName, sayAnimal } from './Helpers';
import whatsYourFlava from './Helpers';
sayName('Sam');
//Hello Sam
sayAnimal('Giraffe');
//What animal? Giraffe
whatsYourFlava('grapes');
//I'm liking grapes
import bruhGetMoney from './Helpers';
bruhGetMoney('money');
//I'm liking money

◉ Promises

const url='https://jsonplaceholder.typicode.com/posts';const getData=(url)=>{
return fetch(url);
}
getData(url).
then(data=> data.json()).
then(result=> console.log(result));

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.