DEV Community

Cover image for Most Useful JavaScript functions for Web Developers
SUCHINTAN DAS
SUCHINTAN DAS

Posted on

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 -

Structure

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);

Enter fullscreen mode Exit fullscreen mode

Output:

2
8
18
32
Enter fullscreen mode Exit fullscreen mode

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 -

Structure of filter

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);

Enter fullscreen mode Exit fullscreen mode

Output:

7
8
9
10
Enter fullscreen mode Exit fullscreen mode


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

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

Enter fullscreen mode Exit fullscreen mode

Output:

{ 
  userId: 1, 
  id: 1, 
  title: "delectus aut autem", 
  completed: false 
}
Enter fullscreen mode Exit fullscreen mode


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

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)};
    }
}

Enter fullscreen mode Exit fullscreen mode

Output:

{ 
  userId: 1, 
  id: 1, 
  title: "delectus aut autem", 
  completed: false 
}
Enter fullscreen mode Exit fullscreen mode


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

Struture of 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" ;
Enter fullscreen mode Exit fullscreen mode

Output:

True
False
Enter fullscreen mode Exit fullscreen mode

Logical Operator

Structure of 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);
Enter fullscreen mode Exit fullscreen mode

Output:

0
1

7
5
Enter fullscreen mode Exit fullscreen mode


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 🚀

Discussion (6)

Collapse
lukeshiru profile image
Luke Shiru

A few things I noticed and might add a little to the article:

  • The example for map using Array.prototype.map.call is kinda confusing. The example would be ok just doing:
const numbers = [1, 4, 9, 16];

array.map(number => number * 2); // [2, 8, 18, 32]
Enter fullscreen mode Exit fullscreen mode
  • Same for filter using Array.prototype.filter.call. What is the usefulness of that?
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

numbers.filter(number => number > 6); // [7, 8, 9, 10]
Enter fullscreen mode Exit fullscreen mode
  • The Promise example can be simplified:
fetch("https://jsonplaceholder.typicode.com/todos/1")
    .then(response => response.json())
    .then(console.log)
    .catch(console.error);
Enter fullscreen mode Exit fullscreen mode
  • The async/await example has a typo in the catch, and because we have top level await, you don't even need to put it in an async function:
try {
    const response = await fetch(
        "https://jsonplaceholder.typicode.com/todos/1",
    );
    const data = await response.json();
    console.log(data);
} catch (error) {
    console.error(error);
}
Enter fullscreen mode Exit fullscreen mode
  • The example for ternaries is far from ideal, mainly because of the strings you chose to use, you could instead do something like:
const a = 5;
const b = 7;
const value = a < b ? "A is lower than B" : "A is higher or equal to B"; // "A is lower than B"
Enter fullscreen mode Exit fullscreen mode

Because if you only want to return "true" or "false", you could simply do:

const value = `${a < b}`; // "true"
Enter fullscreen mode Exit fullscreen mode
  • The examples using logical operators is also kinda far from ideal, because you're using numbers and relying in type casting instead of just using booleans:
false && true; // false
false || true; // true
Enter fullscreen mode Exit fullscreen mode

And then you could explain what falsy values are, and they behave with logical operators.

Cheers!

Collapse
suchintan profile image
SUCHINTAN DAS Author

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});
Enter fullscreen mode Exit fullscreen mode
//value for callback function
const updatearray = Array.prototype.filter.call(numbers,
(element) => {return element > 6});
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
perssondennis profile image
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.

Thread Thread
suchintan profile image
SUCHINTAN DAS Author

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.

Collapse
perssondennis profile image
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.

Collapse
suchintan profile image
SUCHINTAN DAS Author

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.