JavaScript 2018 - New Features

Async Generators

They combine the capabilities of

• Generator function

• Async function

The programmer can use await and yield keyword together. The function returns a promise object. The syntax is :

async function* () { yield await Promise.resolve(1); }

The returned promise object contains value in form of an object with attributes value and done. e.g {value: 1, done: false}

async function* fx() {
  yield await Promise.resolve(1);
  yield await Promise.resolve(2);
  yield await Promise.resolve(3);
}

let genobj = fx();
genobj.next().then(v => console.log(v));
genobj.next().then(v => console.log(v.value));
genobj.next().then(v => console.log(v.value));
genobj.next().then(v => console.log(v.value));

In the above code an async generator function is created. The function returns a generator object. When next() is called on the generator object and it waits until the promise is settled. After the promise settles it is returned which is processed using the then() function.

Loop for..await

The loop for..await is used for iterating async iterables.

// async generators and iterations

async function* fx() {
  yield await Promise.resolve(1);
  yield await Promise.resolve(2);
  yield await Promise.resolve(3);
}

async function forawait() {
    for await (let obj of fx()) {
        console.log("for await", obj);
    }
}

forawait();

In the above code the function forwait is asynchronous, it uses the for..await loop to iterate over async generator. Each iteration of for..await returns a value yielded by the generator.

Rest operator with Objects

The rest operator(...) can be used with objects to extract remaining properties into an object.

let obj = {
    name:"ram",
    age:30,
    salary:1000
};

let {name, ...rest} = obj;
let {age, ...rest2} = obj;
console.log(name,rest); // ram {age: 30, salary: 1000}
console.log(age,rest2); // 30 {name: 'ram', salary: 1000}

In the above code the object obj's remaining properties are extracted into rest and rest2 respectively.

Spread operator with Objects

It can be used for creating

• shallow copy of an object.

• merging 2 or more objects

The spread operator extracts the properties of the host object.

let obj = {
    name:"ram",
    age:30,
    salary:1000
};

let obj2 = {
    name2:"ram",
    age2:30,
    salary2:1000
};


let obj3 = {...obj}; // shallow copy
let obj4 = {...obj, ...obj2}; // merge
console.log("obj3", obj3);
console.log("obj4", obj4);

In the above code the object obj is shallow copied to obj3 and object obj, obj2 are merged into object obj4.

Promise.finally()

It is executed when the promise is settled . The finally() function executes when the promise is rejected or fulfilled i.e irrespective of the state of the promise it executes.

// Promise.finally
let prm = new Promise((resolve, reject) => {
    setTimeout(() => {        
        reject("Rejected!");
    }, 1000);
});

prm.then(
        (data) => {
            console.log(data);
        },
        (error) => {
            console.log("Error:", error);
        }
    ).finally(() => {
        console.log("Finally() block");
    });

In the above code the finally() is executed when the promise is settled. In the given case the promise is rejected and the finally is executed after then().

Complete Code Listing

// async generators and iterations

async function* fx() {
  yield await Promise.resolve(1);
  yield await Promise.resolve(2);
  yield await Promise.resolve(3);
}

let genobj = fx();
genobj.next().then(v => console.log(v));
genobj.next().then(v => console.log(v.value));
genobj.next().then(v => console.log(v.value));
genobj.next().then(v => console.log(v.value));


async function forawait() {
    for await (let obj of fx()) {
        console.log("for await", obj);
    }
}

forawait();

// using rest and spread operator with objects 
let obj = {
    name:"ram",
    age:30,
    salary:1000
};

let obj2 = {
    name2:"ram",
    age2:30,
    salary2:1000
};


let {age, ...rest} = obj;
console.log("age, rest", age,rest); // rest is an object 
let obj3 = {...obj, ...obj2};
console.log("obj3", obj3);

// finally
// Promise.finally
let prm = new Promise((resolve, reject) => {
    setTimeout(() => {        
        reject("Rejected!");
    }, 1000);
});

prm.then(
        (data) => {
            console.log(data);
        },
        (error) => {
            console.log("Error:", error);
        }
    ).finally(() => {
        console.log("Finally() block");
    });