The async and await keywords help us in handling Promises more conveniently and it is more readable than regular promise handling using then() and catch().

Let’s see how we consume Promises using .then() and .catch().

let flag = true;let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      if(flag) resolve('I am resolved');
      else reject(new Error('I am rejected'));
    }, 1000);
});promise.then(res => console.log(res)).catch(err => console.log(err));
// I am resolved

The above Promise can be consumed by using async and await like below.

async function demo() {
    let promise = new Promise((resolve, reject) => {…

A Promise in JavaScript is an object which returns a result after an asynchronous operation has finished. The result of a promise can either be a success or a failure.

The Promise has 3 states.

• Pending — The Promise has no result yet.
• Fulfilled — The Promise has resolved.
• Rejected — The Promise has rejected.

let promise = new Promise((resolve, reject) => {
    const number = Math.round(Math.random() * 10);
    if(number <= 5) {
        resolve('Success');
    } else {
        reject(new Error('Failed'));
    }
});

To create a Promise we use the Promise() constructor with the new keyword. The Promise() the constructor accepts a…

A callback is a function that is passed into another function as an argument which can be invoked later inside the function.

Synchronous callbacks

Synchronous means the code statements execute immediately after one another in a sequential manner.

function print(number, result) {
    console.log(`${number} is ${result}`);
}function checkEvenOrOdd(number, callback) {
  const result =  (number % 2 === 0) ? 'Even' : 'Odd';
  callback(number, result);
}checkEvenOrOdd(56, print);
// 56 is Even

Here the callback is executing immediately and it is not waiting for any asynchronous operation to finish. That’s why it is synchronous callback.

Asynchronous callbacks

If a callback is executing after an asynchronous…

When we have an array of data we often required to loop through all the array elements and perform some action using the array elements. We can do this using for loop, but JavaScript array forEach() method is the new way to do it.

How forEach() method works

The JavaScript array forEach() method iterates over the array elements and executes a function for each element. Syntax is:

array.forEach(callback, thisArg);

The callback is a function that executes for every array elements and thisArg is a value to use as this in callback.

Example:

let foods = ['bread', 'rice', 'meat', 'pizza'];foods.forEach(function(food) {
    console.log(food);
});

Output

…

Style Binding

To add a single style dynamically from any element we can make use of style binding. Syntax is:

[style.style_property] = "expression"

The value of the expression is normally a string.

<div [style.color]="hasError ? 'red' : 'black'">
...
</div><div [style.background-color]="'yellow'">
...
</div>

With style binding we can set only a single style, however to set multiple styles we can use ngStyle directive.

The ngStyle Directive

The ngStyle directive accepts an object where keys will be the CSS property names and the values will be respective expressions.

<div [ngStyle]="{width:'10px', height: '20px'}">
...
</div><div [ngStyle]="{color: isPassed?'green':'red', 
     backgroundColor: getColor()}">
...
</div>

We can also define…

The setTimeout() method

The setTimeout() method calls a function after a specified time provided in milliseconds. This method takes a function as a first argument and time in milliseconds as the second argument. You can write your logic inside the function body which will execute after the time you have specified.

For example: Show an alert box after 5 seconds.

setTimeout(()=> {
    alert('Message after 5 seconds');
}, 5000);

To cancel the timer, you can store the timer first in a variable and call the clearTimeout() function by passing the timer as argument.

var timer = setTimeout(()=> {
    alert('Message after 5 seconds');
}, 5000);…

The String in JavaScript can be converted to Array in 5 different ways. We will make use of split, Array.from, spread, Object.assign and for loop. Let’s discuss all the methods in brief.

1. The split() method

This method is used to split a string based on a separator provided and returns an Array of substring.

let str = 'Tiger,Horse,Elephant,Wolf';let arr = str.split(','); 
//split string by commaconsole.log(arr);
//["Tiger", "Horse", "Elephant", "Wolf"]

If you want to split the string by each character, then you can specify an empty string (“”) as separator.

let str = 'jscurious';let arr = str.split('');console.log(arr); 
// ["j", "s"…

The Array.reduce() method reduces the array to a single value. The reduce() method takes one reducer function as the first argument and one initial value as second optional argument. The reducer function executes for each element of array and returns a value which further provided as the first argument (accumulator) to the next reducer function call.

array.reduce(reducerFunction, initialValue);

The reducer function takes two required arguments i.e. accumulator and currentValue. The accumulator is either the initial value or the previously returned value. The second argument is the value of the current element.

function reducerFunction(accumulator, currentValue, currentIndex, array) {}

The reducer function…