Most Useful JavaScript functions for Web Developers

Table of Content

📌 Introduction

📌 Most Useful Functions of JavaScript

➡ Map function

➡ Filter function

➡ Promises

➡ Async Await

➡ Logical and Ternary Operator

📌 Thank you

Introduction

Hello amazing developer 🧑‍💻, before digging into this topic let me give you a small introduction and some instructions. Don't worry it would be quick and crisp.

I am Suchintan Das, a Full Stack Developer currently working over two startups. I have been into web development for past two years.

Connect me on 👉 Linkedin

Let's Start !

Most Useful Functions of JavaScript

Map function

Map function is one of the most used functions by web developers, mainly all the JavaScript Frameworks have a great use of this function when it comes to iterate through an Array. It returns the updated array and you can store the same. Let's discuss the function in a broader way including all the ways to implement it.

Here's the structure of the Map function -

I think we are now familiar with the structure of the Map function, so let's implement it with some examples.

Examples:

const array1 = [1, 4, 9, 16];

//value for callback function
const map1 = Array.prototype.map.call(array1,
(x) => 
{return x * 2});

//without value of callback
const map2= array1.map(x => x*2);

Output:

2
8
18
32

It has similar purpose as of for, while and do-while.

Filter function

Do you want to filter some values out of an Array ? Then , this function is the one you should go first ! There are many instances in development where we need to fetch some specific values out of an array. This is where it comes into play.

Filter function is used with Arrays to fetch some values from the Array which satisfies some condition like greater than 7 or something. The return type of the function is the array of those values satisfying the condition.

Let's discuss the structure of the filter function -

I think we are now familiar with the structure of the Map function, so let's implement it with some examples.

Examples:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

//value for callback function
const updatearray = Array.prototype.filter.call(numbers,
(element) => {return element > 6});

//without value of callback
const updated = numbers.filter(element => element > 6);

Output:

7
8
9
10

Promises

Promises are very useful when it comes to web development in terms of making an API call to server to third party services. The Promises have 3 stages namely Pending, Fulfilled, Rejected . To handle the requests without blocking the DOM , promises and async await are used.

Examples:

//example with fetch function of javascript
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.log(err))

Output:

{ 
  userId: 1, 
  id: 1, 
  title: "delectus aut autem", 
  completed: false 
}

Async Await

Promises are very useful and any major project has a good part of it involved. But the syntax is not that clean to be used right ?
The bridge of then and catch is something that becomes problematic when there are 2-3 promises lined up based on the response of the earlier ones.

That's where Async Await comes it play !

The purpose of Async Await is to help writing API Calls without .then and .catch bridges which makes it cleaner to read and the return of the Call is returned by await which can be stored on a variable to access

Let's have a look into it's structure -

Examples:

//example with async and await function of javascript
async function sample () {
    try {
      const resp = await fetch("https://jsonplaceholder.typicode.com/todos/1");
      const data = await resp.json();
      console.log(data);
    }
    catch {
      (err) => {console.log(err)};
    }
}

Output:

{ 
  userId: 1, 
  id: 1, 
  title: "delectus aut autem", 
  completed: false 
}

Logical and Ternary Operators

While working over various projects operators are something that plays a major role in implementing a lot of logic part and maintaining the cleanness of the code. Two most used operators are Ternary ( ? : ) and Logical operators ( && and || ).

Let's discuss it in a broad way so that you can use it efficiently in your next project -

Ternary Operator

Here's an example for your ease in understanding -

Examples:

//example with ternary operator with true output
const value = ( 5 < 7 ) ? "True" : "False" ;

//example with ternary operator with false output
const value = ( 5 > 7 ) ? "True" : "False" ;

Output:

True
False

Logical Operator

Here's an example for your ease in understanding -

Examples:

//example of logical operator with true and false
console.log(0 && 1);
console.log(0 || 1);

//example of logical operator with in-depth understanding
// and operator looks for false so it goes till 7 
console.log(5 && 7);
// or operator looks for true so it goes only till 5
console.log(5 || 7);

Output:

0
1

7
5

Thank you

You have made it till the end of this blog 🤗. More such blogs are on the line .

It would be encouraging if a small comment would be there on the blog. I go through each one of them so do comment 😉.

If you want to get a notification 🔔 when it would be published , don't forget to tap on the follow button ☝.

And at last I want to say 👇

Keep coding #️⃣ , keep rocking 🚀

Comments

[Dennis Persson]

Great summary, these are really the core functions in js imo. I miss a reduce example though, it is really powerful when restructuring data between objects and arrays.

Unfortunately, it's kinda hard for people to understand reduce function, so I would say it's preferable to wrap the usage of it in a utils functions with a descriptive name.

[SUCHINTAN DAS]

Yes Dennis, I understand reduce was actually on my list to be covered on this blog. But the reason why I didn't covered it was simply that it would be too much for a beginner to understand the use of reduce function in JavaScript.

So, preferred to skip it on the blog.

[SUCHINTAN DAS]

Thanks Luke , for sharing the amazing information. There are some stuffs I want to clear -

Regarding use of prototype.call on map and filter function. The reason why I shared it is because people can really understand the beneath concept and most of the time on internet they used to share the proper structure for these function but never used to show the use of that callback arguement.

//value for callback function
const map1 = Array.prototype.map.call(array1,
(x) => 
{return x * 2});

//value for callback function
const updatearray = Array.prototype.filter.call(numbers,
(element) => {return element > 6});

Due to this reason I thought it's important to show the main proper structure. Yes, it's just for your knowledge ! You don't have to use it on workplace , but it would help you build the base of JavaScript which is kinda important.

Hope it's clear now.

[Dennis Persson]

I agree that it's important to understand prototypes in js, you should definitely teach about it.

But I think it will just confuse the target audience of this article. Begginer level developers who wants to learn about map and filters have no chance to understand how the prototype works by looking at a one liner example like that.

[SUCHINTAN DAS]

Yes Dennis, I know it may be little bit difficult for the beginners to understand the prototypes in js.

That's the reason I only used the the structure avoiding too much explanation of it. In this way they will have the idea that the prototype structure is a bit complicated and that's why we use the first one on each of them.

It's like I introduced them that there are prototypes in JavaScript but knowing more about it comes as a choice to them.