Ecmascript 6

Variables

different between let and var

{
    var a=12;
    let b=22;
}
console.log(a);//12
console.log(b);// undefined

const

const x = 10
x = 12 // will result in an error!!

const a={};
a.m=12;
console.log(a);//{ m: 12 }
a={};//error

const arr=[1,2,3];
arr.push(4);//[1,2,3,4]
arr=[];//error

var and hoisting

Variable hoisting allows the use of a variable in a JavaScript program, even before it is declared. Such variables will be initialized to undefined by default. JavaScript runtime will scan for variable declarations and put them to the top of the function or script. Variables declared with var keyword get hoisted to the top.

//hoisted to top ; var i = undefined
for (var i = 1;i <= 5;i++){
   console.log(i);
}
console.log("after the loop i value is "+i);
//variable company is hoisted to top , var company = undefined
console.log(company); // using variable before declaring
var company = "TutorialsPoint"; // declare and initialized here
console.log(company);
   var balance = 5000
   console.log(typeof balance)//Number
   var balance = {message:"hello"}
   console.log(typeof balance)//Object

Operators

let a=null;
let b=a||12;//b=12

let a=null;
let b=a&&12;//b=null

?. and ?? operator

let m=undefined;
console.log(m?.hello)//undefined
let m=undefined??"mohammed";
console.log(m);//mohammed

Spread operator

<script>
   function addThreeNumbers(a,b,c){
      return a+b+c;
   }
   const arr = [10,20,30]
   console.log('sum is :',addThreeNumbers(...arr))
   console.log('sum is ',addThreeNumbers(...[1,2,3]))
</script>
   //copy array using spread operator
   let source_arr = [10,20,30]
   let dest_arr = [...source_arr]
   console.log(dest_arr)
	
   //concatenate two arrays
   let arr1 = [10,20,30]
   let arr2 =[40,50,60]
   let arr3 = [...arr1,...arr2]
   console.log(arr3)
<script>
   //copy object
   let student1 ={firstName:'Mohtashim',company:'TutorialsPoint'}
   let student2 ={...student1}
   console.log(student2)
   //concatenate objects
   let student3 = {lastName:'Mohammad'}
   let student4 = {...student1,...student3}
   console.log(student4)
</script>

Loops

in loop

let a={a:"hello",b:"world"}
for(let m in a){
    console.log(a[m]);
}

of loop

let a=[1,2,3,4];
for(let m of a){
    console.log(m);
}

label with break

outerloop: // This is the label name
for (var i = 0; i < 5; i++) {
   console.log("Outerloop: " + i);
   innerloop:
   for (var j = 0; j < 5; j++){
      if (j > 3 ) break ; // Quit the innermost loop
      if (i == 2) break innerloop; // Do the same thing
      if (i == 4) break outerloop; // Quit the outer loop
      console.log("Innerloop: " + j);
   }
}

Functions

constructor function

function A(val){
    this.b=val;
}

let a=new A(12);
console.log(a.b);//12
console.log(a instanceof A);//true
console.log(A.prototype===a.__proto__);//true
A.prototype.x=32;
console.log(a.x);//32
console.log(a.hasOwnProperty("x"));//false
a.x=321;
console.log(a.hasOwnProperty("x"));//true

Rest parameters

function fun1(...params) { 
   console.log(params.length); 
}  
fun1();  
fun1(5); 
fun1(5, 6, 7); 

Lambda functions

var msg = ()=> { 
   console.log("function invoked") 
} 
msg() 

var msg = x=> { 
   console.log(x) 
} 
msg(10)

Function Hoisting

Like variables, functions can also be hoisted. Unlike variables, function declarations when hoisted, hoists the function definition rather than just hoisting the function’s name.

hoist_function();  //call function
function hoist_function() { 
   console.log("foo"); 
} 
hoist_function(); // TypeError: hoist_function() is not a function  
var hoist_function() = function() { 
   console.log("bar"); 
};

Generator function

"use strict" 
function* rainbow() { 
   // the asterisk marks this as a generator 
   yield 'red'; 
   yield 'orange'; 
   yield 'yellow'; 
   yield 'green'; 
   yield 'blue'; 
   yield 'indigo'; 
   yield 'violet'; 
} 
for(let color of rainbow()) { 
   console.log(color); 
} 
function* ask() { 
   const name = yield "What is your name?"; 
   const sport = yield "What is your favorite sport?"; 
   return `${name}'s favorite sport is ${sport}`; 
}  
const it = ask(); 
console.log(it.next()); 
console.log(it.next('Ethan'));  
console.log(it.next('Cricket')); 

Objects

let A={};
let B=A;
let C={};
C[A]=12;
console.log(C[B]);
let k=12;
let A={k};
console.log(A["k"]);
var myCar = new Object(); 
myCar.make = "Ford"; //define an object 
myCar.model = "Mustang"; 
myCar.year = 1987;  

console.log(myCar["make"]) //access the object property 
console.log(myCar["model"]) 
console.log(myCar["year"])

let A={"v1":12};
let B=Object.create(A);
console.log(B.v1);//12
console.log(B===A);//false

delete property

// Creates a new object, myobj, with two properties, a and b. 
var myobj = new Object; 
myobj.a = 5; 
myobj.b = 12; 

// Removes the ‘a’ property 
delete myobj.a; 
console.log ("a" in myobj) // yields "false"

comparing

var val1 = {name: "Tom"}; 
var val2 = {name: "Tom"}; 
console.log(val1 == val2)  // return false 
console.log(val1 === val2)  // return false

object de-structing

<script>
let student = {
   rollno:20,
   name:'Prijin',
   cgpa:7.2
}

//destructuring to same property name
   let {name,cgpa} = student
   console.log(name)
   console.log(cgpa)

//destructuring to different name
   let {name:student_name,cgpa:student_cgpa}=student
   console.log(student_cgpa)
   console.log("student_name",student_name)
</script>
let customers= {
    c1:101,
    c2:102,
    c3:103
}

let {c1,...others} = customers
console.log(c1)//c1
console.log(others)//c2,c3

let emp = {
    id:101,
    address:{
        city:'Mumbai',
        pin:1234
    }
}
let {address} = emp;

console.log(address)
let {address:{city,pin}} = emp
console.log(city)//mumbai

define property

let B={a:1,b:2,c:3};
Object.defineProperty(B,"h",{ enumerable:true, value:4, configurable:true,writable:true});
for(let m in B){
    console.log(m);//a,b,c,h all of them they are enumerable
}
B.h={A:32};//can write on value because it writable
delete  B.h;//can delete because it configurable
console.log(B.h);

set and get

let B={a:1,b:2,c:3};

Object.defineProperty(B,"d",{ set(v) {console.log("hello");
    },get() {console.log("world");
    }});
B.d=345;//hello
let m=B.d;//world

let C={set name(v) {console.log("set ",v);
    },get name() {
    console.log("get");
    }};
C.name=43;//set   43

function constructor(){
    this.val=12;
}
let obj=new constructor();
obj.a=1;
obj.b=2;
console.log(Object.keys(obj));//[val,a,b]

?. and ?? operator

let m=undefined;
console.log(m?.hello)//undefined
let m=undefined??"mohammed";
console.log(m);//mohammed

Number

var num = new Number(10);
console.log(num.toString());
console.log(num.toString(2));//binary
console.log(num.toString(8));//octal

let val=41.2334
console.log(val.toFixed(1))//41.2
console.log(Number(" 12.453  "));//12.453

let val=Number("hello");
console.log(Number.isNaN(val));//true

let val=new Number(12);//instanceof Number
let val=12;//not instanceof Number

String

const str = "Please locate where 'locate' occurs!";
console.log(str.length);//36
console.log(str.indexOf("locate"));//7
console.log(str.toUpperCase());//PLEASE LOCATE WHERE 'LOCATE' OCCURS!
console.log(str.split(' '));//[ 'Please', 'locate', 'where', "'locate'", 'occurs!' ]
console.log(str.endsWith('!'));//true
console.log(str.substr(7))//locate where 'locate' occurs!

let str2="  I  Like  Frutes  ";
str2=str2.trim();
console.log(str2.replace(/(\s+)/i,','));//I,Like  Frutes
console.log(str2.search(/\w{0,2}\s/i));//0
console.log(str2.match(/(\w+\s*)/gi));//[ 'I  ', 'Like  ', 'Frutes' ]

var text1 = "Hello";
var text2 = "World";
var text3 = text1.concat(" ", text2);//Hello World

Array

let arr = ["orange", "mango", "banana", "sugar", "tea"];
let removed = arr.splice(2, 0, "water");//no remove only add
console.log(arr);//orange,mango,water,banana,sugar,tea

removed = arr.splice(3, 1);
console.log("After adding 1: " + arr );//orange,mango,water,sugar,tea
console.log("removed is: " + removed);//banana

var arr = ["orange", "mango", "banana", "sugar", "tea"]; 
console.log("arr.slice( 1, 2) : " + arr.slice( 1, 2) );//mango
console.log("arr.slice( 1, 3) : " + arr.slice( 1, 3) );//mango,banana
var arr = new Array("First","Second","Third"); 
var str = arr.join();console.log("str : " + str );  
var str = arr.join(", "); 
console.log("str : " + str );  

var str = arr.join(" + "); 
console.log("str : " + str );

/*
str : First,Second,Third 
str : First, Second, Third 
str : First + Second + Third 
*/
array.sort( compareFunction ); //or with no compare functions for numbers ands string array
push(element)//add to end 
unshift(element)//add to first
shift()//remove first
pop()//remove last 
function isBigEnough(element, index, array) { 
   return (element >= 10); 
} 
var retval = [2, 5, 8, 1, 4].some(isBigEnough); 
console.log("Returned value is : " + retval ); //false

var retval = [12, 5, 8, 1, 4].some(isBigEnough); 
console.log("Returned value is : " + retval );//true

var passed = [12, 5, 8, 130, 44].filter(isBigEnough); 
console.log("Test Value : " + passed );  //12,130,44

Map

let daysMap = new Map();
daysMap.set('1', 'Monday');
daysMap.set('2', 'Tuesday');
daysMap.set('3', 'Wednesday');
console.log(daysMap.size);

let andy = {ename:"Andrel"},
    varun = {ename:"Varun"},
    prijin = {ename:"Prijin"}
let empJobs = new Map([[andy,'Software Architect'],[varun,'Developer']]);
console.log(empJobs)//{{…} => "Software Architect", {…} => "Developer"}
'use strict' 
var roles = new Map([ 
   ['r1', 'User'], 
   ['r2', 'Guest'], 
   ['r3', 'Admin'], 
]);
for(let r of roles.entries()) 
console.log(`${r[0]}: ${r[1]}`);

let m=new Map([["ali",1],["mohammed",2]]);
for(let [k,v] of m.entries()){
    console.log(k,v);
}

Promise

   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
         }
         else
            reject('NOT_Postive_Number_Passed') 
         })
         return p;
   }

   add_positivenos_async(10, 20)
      .then(successHandler) // if promise resolved
      .catch(errorHandler);// if promise rejected

   add_positivenos_async(-10, -20)
      .then(successHandler) // if promise resolved
      .catch(errorHandler);// if promise rejected

   function errorHandler(err) {
      console.log('Handling error', err)
   }
   function successHandler(result) {
      console.log('Handling success', result)
   }

   console.log('end')
function add_positivenos_async(n1, n2) {
    let p = new Promise(function (resolve, reject) {
        if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
        }
        else
            reject('NOT_Postive_Number_Passed')
    })
    return p;
}

add_positivenos_async(10,20)
    .then(function(result){
        console.log("first result",result)
        return add_positivenos_async(result,result)
    }).then(function(result){
    console.log("second result",result)
    return add_positivenos_async(result,result)
}).then(function(result){
    console.log("third result",result)
})

console.log('end')

promise.all()
This method can be useful for aggregating the results of multiple promises.

   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
         }
         else
            reject('NOT_Postive_Number_Passed')
      })

      return p;
   }
   //Promise.all(iterable)

Promise.all([add_positivenos_async(10,20),add_positivenos_async(30,40),add_positivenos_async(50,60)])
   .then(function(resolveValue){
      console.log(resolveValue[0])
      console.log(resolveValue[1])
      console.log(resolveValue[2])
      console.log('all add operations done')
   })
   .catch(function(err){
      console.log('Error',err)
   })
   console.log('end')

/*
end
30
70
110
all add operations done
*/

promise.race() This function takes an array of promises and returns the first promise that is settled.

   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
         } else
            reject('NOT_Postive_Number_Passed')
      })

      return p;
   }

   //Promise.race(iterable)
   Promise.race([add_positivenos_async(10,20),add_positivenos_async(30,40)])
   .then(function(resolveValue){
      console.log('one of them is done')
      console.log(resolveValue)
   }).catch(function(err){
      console.log("Error",err)
   })

   console.log('end')

async

async function  fun(){
    return 100;
}

Promise.all([fun(),fun(),fun()]).then((res)=>{
    console.log(res);});

await


async function  fun(){
    return 100;
}

async  function  fun2(){
    let prom=Promise.all([fun(),fun(),fun()]);
    let res=await prom;
    return res;
}

fun2().then(res=>{console.log(res)});//[ 100, 100, 100 ]
async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // wait until the promise resolves (*)

  alert(result); // "done!"
}

f();

class

class A{
    m=12;
    constructor(val) {
        console.log(val);
        this.m=val;
    }
    set value(val){
        this.m=val;
    }

    get value() {
        return this.m;
    }
}

let a=new A(12);//12
a.value=22;
console.log(a.value);//22
class A{
    m=12;
    constructor(val) {
        console.log("A : ",val);
        this.m=val;
    }
    set value(val){
        this.m=val;
    }

    get value() {
        return this.m;
    }
}
class B extends A{
    constructor(val) {
        super(val);
        console.log("B : ",val)
    }
}
let b=new B(12);//A : 12 B : 12
class A{
    #m=12;//private field
}

get constructor from object

class A{
}

let a=new A();
console.log(a.constructor==A);//true

call super members

class A{
    constructor() {
    }
    fun(){
        console.log("A");
    }
}

class B extends A{
    constructor() {
        super();
    }
    fun(){
        super.fun();
        console.log("B");
    }

}

let b=new B();
b.fun();//A B