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 🚀