Most Useful JavaScript functions for Web Developers
Tags: javascript, webdev, beginners, programming
Published: 2022-07-03 15:26:14

## Table of Content

*<br>*
>
📌 [Introduction](#Introduction)
>
📌 [Most Useful Functions of JavaScript](#Most Useful Functions of JavaScript)
>>
➡ [Map function](#Map function)
>>
➡ [Filter function](#Filter function)
>>
➡ [Promises](#Promises)
>>
➡ [Async Await](#Async Await)
>>
➡ [Logical and Ternary Operator](#Logical and Ternary Operator)
>
📌 [Thank you](#Thank you)


*<br>*

## Introduction <a name="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](https://www.linkedin.com/in/suchintan-das-b698bb1b8/)

Let's Start !

*<br>*

## Most Useful Functions of JavaScript <a name="Most Useful Functions of JavaScript" />

*<br>*

### <u>Map function</u> <a name="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 -

![Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stc4f1jtvklgg43tji5w.png)

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

**Examples**:

```javascript

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*.

*<br>*

### <u>Filter function</u> <a name="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 -

![Structure of filter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/18ik1fthnx7d2dnmx2mn.png)

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

**Examples**:

```javascript

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
```

*<br>*

### <u>Promises</u> <a name="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.

![Structure of Promises](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwwe1ik43cqhutbvxry6.png)

**Examples**:

```javascript
//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**:
```json
{ 
  userId: 1, 
  id: 1, 
  title: "delectus aut autem", 
  completed: false 
}
```

*<br>*

### <u>Async Await</u> <a name="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 -


![Struture of Async Await](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7v1pgwgbh1j6sivl78sq.png)

**Examples**:

```javascript
//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**:
```json
{ 
  userId: 1, 
  id: 1, 
  title: "delectus aut autem", 
  completed: false 
}
```

*<br>*

### <u>Logical and Ternary Operators</u> <a name="Logical and Ternary Operator" />

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**

![Struture of ternary operator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7r0vradm67kcwkgga9l0.png)

Here's an example for your ease in understanding -

**Examples**:

```javascript
//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**


![Structure of Logical Operator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xm4oiy3n0dbde5bskyvu.png)

Here's an example for your ease in understanding -

**Examples**:

```javascript
//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
```

*<br>*

## Thank you <a name="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 🚀