DEV Community: Rajat

What is Async Await ?

Rajat — Tue, 26 Jan 2021 17:09:08 +0000

Most of us as developers use these keywords in our daily lives while coding, so I thought to give it a brief from my own understanding. I hope you find this post useful by the end of this post. Let's go!😊

What is Async ?

Let's understand with a basic example from our real world.
Most of us have ordered food online via Zomato, Swiggy, etc or did online shopping from several apps in market.
Assuming we ordered any food item, say Chicken Biryani(it's my fav, you can assume your fav food 😁).

Step 1. Order Chicken Biryani from app.
Step 2. Complete all formalities(filling details).
Step 3. Ah, Chicken Biryani arrives.😉
Step 4. Eat it now alone. (don't share)😁

Here when you order a food item, a promise is returned to you i.e. whether the food is ordered successfully or rejected(issue sometimes).

async can be placed before a function. When you put async before a function, it simply means that the function will return a promise. A resolved promise can have values wrapped inside it automatically.

async function greeting() {
  return 'hello';
}

greeting().then(alert); 
//hello

Here, this function returns a resolved promise with the result of hello

Why Async

You don't need to add complex multithreading if you add async.
Async function gives the freedom of writing clear-cut and concise syntax.

Simpler code than multithreading
Debugging is easier
Easy to scale
Callback hell can be avoided

Why the need of async await when Promises can do the same job?

async/await simply provides a synchronous feel to asynchronous code. We can say that async works as syntactical sugar for promises.

// Async/Await
const asyncGreeting = async () => 'Hello';
// Promises
const promiseGreeting = () => new Promise(((resolve) => {
  resolve('Hi');
}));
asyncGreeting().then(result => console.log(result));
promiseGreeting().then(result => console.log(result));

For simple queries and data manipulation, Promises can be simple, but if you run into scenarios where there's complex data manipulation and whatnot involved, it's easier to understand what's going on if the code simply looks as though it's synchronous, thats why async/await come handy.

What is Await?

await keyword is used only inside an async function. await makes asynchronous functions halt/pause and returns whatever the async function returns when it is done.

async function greeting() {

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

 let result = await promise; // wait until the promise resolves

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

greeting();

await literally suspends the function execution until the promise settles, and then resumes it with the promise result.

Advantages of Async/Await

Makes non-blocking API look like blocking
Clean and linear(understandable) syntax
Easier to debug
Maintainable code

Thats it!

I just tried to give you a little jist of what async/await functions are. You can refer to docs to learn more.

I hope you find this post useful and informative. Share your feedback on comments section. If you have queries, reach out to me on linkedin , instagram, github, twitter. 😀

High Order Functions and Arrays in JavaScript

Rajat — Tue, 08 Dec 2020 11:17:38 +0000

While learning JavaScript, I had actually missed these topics and was about to switch to React JS. Luckily, I didn't skip these topics and learnt these functions and methods as well. Hence, whoever is learning JavaScript should read this blog before learning React.🙌

1. forEach()

The forEach() method calls a function once for each element in an array, without mutating the array. It is one of the useful methods while iterating through items in an array.
forEach() takes two arguments - first being the callback function which is called for each item in an array and the second argument is optional which refers to the value of this set in the callback.

Syntax:

array.forEach(callback [ , thisArgument])

Here is an example-

const companies = [
  { name: "amazon" , start: 1971, end: 2001},
  { name: "netflix" , start: 1972, end: 2004},
  { name: "flipkart" , start: 1971, end: 2009}
  ];

companies.forEach(company => { 
    console.log(company);
});
//Object { name: "amazon", start: 1971, end: 2001 }
//Object { name: "netflix", start: 1972, end: 2004 }
//Object { name: "flipkart", start: 1971, end: 2009 }

company is a callback function here. companies.forEach(company) executes company function for every item in companies, setting the iterated item as a first argument. That's how forEach() method works.

Now if we want to iterate to items with only name property in the array companies, here is how we do it:

const companies = [
  { name: "amazon" , start: 1971, end: 2001},
  { name: "netflix" , start: 1972, end: 2004},
  { name: "flipkart" , start: 1971, end: 2009}
  ];

companies.forEach( company => { 
    console.log(company.name);
});
// "amazon"
// "netflix"
// "flipkart"

Where to use forEach() ?

forEach() is widely used to iterate array items, without breaking and having simultaneously some side-effect. Or you can go for array methods as an alternative.

2. filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function. If no elements pass the test, an empty array will be returned.

Syntax:

array.filter(function(currentValue, index, arr), thisValue)
thisValue is an optional parameter.

Lets say we want to filter out the adults below 21 yrs of age, here is an example-

const ages = [45,67,7,21,4,19,11];

const adultPersons = ages.filter( age => {
    if(age>=21) {
        return true;
    } 
});
console.log(adultPersons);
// Array [45, 67, 21]

We created a new variable adultPersons where we could store all the array items of ages which passed the test that we provided in the function.

Another example of `filter()` method where we want to get companies which started in 1971-

const companies = [
  { name: "amazon" , start: 1971, end: 2001},
  { name: "netflix" , start: 1972, end: 2004},
  { name: "flipkart" , start: 1971, end: 2009}
  ];

const year = companies.filter(company => { 
    if( company.start == "1971") {
    return true;
    }
});
console.log(year);
//output-->  Array [Object { name: "amazon", start: 1971, end: 2001 }, Object { name: "flipkart", start: 1971, end: 2009 }]

We got two objects from the array companies which include 1971 in start category.

3. map()

The map() method creates a new array with the results of calling a provided function for every array element. This method doesn't execute the function for the array elements without values.
The map() method calls the provided function once for each element in an array, in order.

Syntax:

array.map(function(currentValue, index, arr), thisValue)
thisValue is an optional parameter.

Here is an example of getting all company names using `map()`-

const companies = [
  { name: "amazon" , start: 1971, end: 2001},
  { name: "netflix" , start: 1972, end: 2004},
  { name: "flipkart" , start: 1971, end: 2009}
  ];

const compNames = companies.map(company => { 
        return company.name;
    });
console.log(compNames);
//Array ["amazon", "netflix", "flipkart"]

We got a simple array with all the company names. Easy peasy!✌

Now if we want to get the company names and end year using map() method, we can use template literals/strings too.

Here is an example-

const array = [
  { name: "amazon" , start: 1971, end: 2001, owner: "A"},
  { name: "netflix" , start: 1972, end: 2004, owner: "B"},
  { name: "flipkart" , start: 1971, end: 2009, owner: "C"}
  ];

const compNames = array.map(company =>
   `${company.name} [${company.end} - ${company.owner}]` );

console.log(compNames);
// Array ["amazon [2001 - A]", "netflix [2004 - B]", "flipkart [2009 - C]"]

Now we have got an array with each value i.e. company name along with their end year and owner.

Another example of `map()` where we can use Math object -

const num =[ 4 , 16 , 36];

const numSquareRoot = num.map(number => Math.sqrt(number));
console.log(numSquareRoot);
//Array [2, 4, 6]

Simple! isn't it? I hope you have learnt now how to use map() method. Practice and you'll learn more.🙌

4. sort()

The sort() method sorts the elements of an array in place and returns the sorted array. The sort order can be either alphabetic or numeric as well as ascending or descending.

Note --> the sort() method sorts the values as strings in alphabetical and ascending order.
This method works well for strings ("Ant" comes before "Bat"). However, if numbers are sorted as strings, "30" is bigger than "200", because "3" is bigger than "2".
Thus, the sort() method generates an incorrect result when sorting numbers.
A "compare function" comes useful for fixing this.

Lets say we want to sort the companies on basis of their start years. Here is an example-

const companies= [
  { name: "amazon" , start: 1971, end: 2001, owner: "A"},
  { name: "netflix" , start: 1962, end: 2004, owner: "B"},
  { name: "flipkart" , start: 1991, end: 2009, owner: "C"}
  ];

//using short method via ternary operators
const sortedCompanies = companies.sort((a,b) => (a.start > b.start ? 1 : -1));
console.log(sortedCompanies);
//Array [Object { name: "netflix", start: 1962, end: 2004, owner: "B" }, Object { name: "amazon", start: 1971, end: 2001, owner: "A" }, Object { name: "flipkart", start: 1991, end: 2009, owner: "C" }]

Here the sort() method takes a function that takes two values a and b and compares them on the basis of their start date.
Note -> a denotes company one and b denotes company two.

Another example of `sort()` -

const num = [34,4,67,12,1];
const sortNum = num.sort();
console.log(sortNum);
//output->  Array [1, 12, 34, 4, 67]

//for ascending order
const numAscend = num.sort((a,b) => a-b);
console.log(numAscend);
//output->  Array [1, 4, 12, 34, 67]

// for descending order
const numDescend = num.sort((a,b)=> b-a);
console.log(numDescend);
//output->  Array [67, 34, 12, 4, 1]

5. reduce()

The reduce() method reduces the array to a single output value. This method executes a provided function for each value of the array (from left-to-right). The return value of the function is stored in an accumulator(total).

Syntax:

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

Note: reduce() does not execute the function for array elements without values.

Here is an example of finding sum of numbers in an array using `reduce` method -

const num = [45,5,2,10];

const sum = num.reduce(function(total, number){
        return total + number;
},0);

console.log(sum);
// 62

Here, we pass two arguments total and number as arguments in the function. total denotes previously returned value of the function and number denotes the value of current element. We have also passed second parameter 0 which means its going to start from 0.
You can use arrow functions too. I didn't use arrow functions so that beginners could understand what's happening with the function.

Another example of `reduce` method to get total years for all companies-

const companies= [
  { name: "amazon" , start: 1970, end: 2000, owner: "A"},
  { name: "netflix" , start: 1960, end: 2000, owner: "B"},
  { name: "flipkart" , start: 1990, end: 2010, owner: "C"}
  ];

const totalYears = companies.reduce((total, company) => 
    total + (company.end - company.start),0);

console.log(totalYears);
//90

I hope you find this post useful and informative. Share your feedback on comments section. If you have queries, reach out to me on linkedin , instagram, github, twitter. 😀

bind(), call(), and apply() in JavaScript

Rajat — Sun, 06 Dec 2020 07:54:08 +0000

While coding in JavaScript, I'm always perplexed on how JavaScript works. It's just as Kyle Simpson says -

"I don’t think anyone ever really knows JS, not completely anyway."

Any programmer who is learning JavaScript might have come across with this keyword for sure. So let's start with this. In the process, we will see how bind(), call() and apply() are used with this. I hope your doubts resolve after reading this post. Let's begin.

What is `this` ?

'this' in JavaScript is set to the current environment in which the function is being executed.

Often good programmers find it astounding and confusing and have a vague citation to this keyword.
Hence, to clearly define the object to which this keyword belongs, we need to use methods like bind(), call() and apply().

1. bind()

The bind() method creates a new function that, when called, has its `this` keyword set to the provided value.

Here is an example-👁

var user = {
  name: 'Ryan',
  getName: function() {
    return this.name;
  }
}
function displayInfo() {
  console.log("Hello " + this.getName());
}
var getInfo = displayInfo.bind(user);
getInfo();
// Hello Ryan

When we use bind(), a new displayInfo instance is created and binds user object to its this keyword. Note: It copies the displayInfo function whenever a new instance is created using bind(). So when we call this.getName() inside the displayInfo, we get the name 'Ryan'. Besides we have the access to all the properties of user object.
Also, .bind allows you to set this value now while allowing you to execute the function in the future, because it returns a new function object.

2. call()

call() method calls a function with a given `this` value and and arguments provided individually.

What does this mean? 👀
This means that we can call any function and explicitly specify what this should reference within the calling function.

Here is an example-

var user = {
  name: 'Ryan',
  getName: function() {
    return this.name;
  }
}
function displayInfo(greeting, greet2) {
  console.log( greeting + ' ' + greet2 +' ' + this.getName() +"?");
}
displayInfo.call(user, 'Hello!', 'How are you');
//Hello! How are you Ryan?

call() method accepts the first argument as this reference and after that we can pass additional arguments to the fucntion. Here, we call displayInfo() with its this set to user object and an addition argument greet with value 'Hello'
Note: .call() method doesn't make a copy of function like bind() does. 🤞

3. apply()

apply() method is similar to call() method. Both serve the exact same purpose.

Note: The only difference between call() and apply() is that call() expects all parameters to be passed in individually, whereas apply() expects a single array of all arguments to be passed in.

Here is an example-

var user = {
  name: 'Ryan',
  getName: function() {
    return this.name;
  }
}
function displayInfo(greeting, greet2) {
  console.log( greeting + ' ' + greet2 +' ' + this.getName() +"?");
}
displayInfo.call(user, 'Hello!', 'How are you'); 
//Hello! How are you Ryan?

displayInfo.apply(user, ['Hello!' , 'How are you']); 
//Hello! How are you Ryan?

Where to use?

Use .bind() when you want that function to later be called with a certain context useful in events.
Use .call() or .apply() when you want to invoke the function immediately, and modify the context.

You can refer to mdn docs to read more about it and see the real implementation.

Such built-in methods in JavaScript can be useful to any programmer or coder. 👾✌

I hope you find this post useful and informative. Share your feedback on comments section. If you have queries, reach out to me on linkedin , instagram, github, twitter. 😀

DEV Community: Rajat

What is Async Await ?

What is Async ?

Why Async

Why the need of async await when Promises can do the same job?

What is Await?

Advantages of Async/Await

Thats it!

High Order Functions and Arrays in JavaScript

1. forEach()

Here is an example-

Where to use forEach() ?

2. filter()

Lets say we want to filter out the adults below 21 yrs of age, here is an example-

Another example of filter() method where we want to get companies which started in 1971-

3. map()

Here is an example of getting all company names using map()-

Here is an example-

Another example of map() where we can use Math object -

4. sort()

Lets say we want to sort the companies on basis of their start years. Here is an example-

Another example of sort() -

5. reduce()

Here is an example of finding sum of numbers in an array using reduce method -

Another example of reduce method to get total years for all companies-

bind(), call(), and apply() in JavaScript

What is this ?

'this' in JavaScript is set to the current environment in which the function is being executed.

1. bind()

The bind() method creates a new function that, when called, has its this keyword set to the provided value.

2. call()

call() method calls a function with a given this value and and arguments provided individually.

3. apply()

apply() method is similar to call() method. Both serve the exact same purpose.

Where to use?

Another example of `filter()` method where we want to get companies which started in 1971-

Here is an example of getting all company names using `map()`-

Another example of `map()` where we can use Math object -

Another example of `sort()` -

Here is an example of finding sum of numbers in an array using `reduce` method -

Another example of `reduce` method to get total years for all companies-

What is `this` ?

The bind() method creates a new function that, when called, has its `this` keyword set to the provided value.

call() method calls a function with a given `this` value and and arguments provided individually.