Faster and lesser coding using Javascript Array Functions

Me on a road trip through the himalayas

I’m pretty sure that most of us haven’t benefited from some of these amazing Javascript Array functions we’re going to discuss here. These functions are very useful and will definitely speed up your development.

We will use the following JSON data for this tutorial. It is an array of product information, including title, category, price, etc.

Take a look at this data before proceeding to the blog. We’re going to perform different operations on this data and learn about some amazing Array functions.

products.json

The code snippets are self-explanatory. If you have any questions or suggestions,please let me know in the comments.

Bonus trick in the end 😉

Before getting into the Array functions, I’d like to introduce you to Arrow functions (also called “fat arrow” functions). Arrow functions allow us to write shorter functions

Below is a normal JS function

function hello(name){
return "Hello "+ name;
}
// Fn call
hello("Professor");

Now let's re-write above Fn using Arrow function

hello = (name) => "Hello "+name;// Fn call
hello("Professor");

Both the codes produces following output => “Hello Professor”

The major difference is, with a regular function this represents the object that calls the function and with an arrow function this represents the owner of the function

All of the Array Functions we are going to discuss today takes a callback function as input and we’ll be writing those callbacks using arrow functions.

Let’s get our hands dirty.

.map()

Goal: get list of all product titles

products.map((product) => {
return product.title
})

Output

['Brown eggs', 'Sweet fresh strawberry', 'Asparagus', 'Green smoothie', 'Raw legumes', 'Baking cake', 'Pesto with basil', 'Hazelnut in black ceramic bowl', 'Fresh strawberry', 'Lemon and salt', 'Homemade bread', 'Legumes', 'Fresh tomato', 'Healthy breakfast', 'Green beans', 'Baked stuffed portobello mushrooms', 'Strawberry jelly', 'Pears juice', 'Fresh pears', 'Caprese salad', 'Oranges']

.filter()

Goal: Get details of product(s) with 5 rating

products.filter((product) => {
return product.rating == 5
})

Output

[{
title: 'Lemon and salt',
category: 'fruit',
price: 15.79,
rating: 5
},
{
title: 'Fresh pears',
category: 'fruit',
price: 15.12,
rating: 5
},
{
title: 'Caprese salad',
category: 'vegetable',
price: 16.76,
rating: 5
}
]

.find()

Goal: Get details of Product titled “Lemon and salt”

products.find((product) => {
return product.title == 'Lemon and salt'
})

Output

{
title: 'Lemon and salt',
category: 'fruit',
price: 15.79,
rating: 5
}

.some()

Goal: Check if there is any product(s) in ‘fruit’ category

products.some((product) => {
return product.type == 'fruit'
})

Output

true

.every()

Goal: Check whether every products price is greater than 10

products.every((product) => {
return product.price > 10
})

Output

true

.sort()

Goal: Sort products in descending order based on their price

products.sort((productA, productB) => {
if (productA.price > productB.price)
return -1
else if (productA.price < productB.price)
return 1
else
return 0
})

You can further simplify above code into

products.sort((productA, productB) => {
return productB.price - productA.price
});

Output

[{
title: 'Sweet fresh strawberry',
category: 'fruit',
price: 29.45,
rating: 4
},
{
title: 'Green beans',
category: 'vegetable',
price: 28.79,
rating: 1
},
{
title: 'Fresh strawberry',
category: 'fruit',
price: 28.59,
rating: 4
},

......................
......................
{
title: 'Baking cake',
category: 'dairy',
price: 11.14,
rating: 4
}
]

.reduce()

Goal: Create sentence listing all product titles

products.reduce((accumulator, product) => {
return accumulator + ", " + product.title;
}, "Available categories are ");

Output

'Available Products are , Brown eggs, Sweet fresh strawberry, Asparagus, Green smoothie, Raw legumes, Baking cake, Pesto with basil, Hazelnut in black ceramic bowl, Fresh strawberry, Lemon and salt, Homemade bread, Legumes, Fresh tomato, Healthy breakfast, Green beans, Baked stuffed portobello mushrooms, Strawberry jelly, Pears juice, Fresh pears, Caprese salad, Oranges'

Goal: Create total sum of all product price

var sum = products.reduce( function(total, product){
return total + product.price
});

Output

700

Now, here comes the promised bonus trick.

If you are a python developer, you probably are familiar with Jupyter notebooks. For those who don’t know,

Jupyter Notebook is a web based interface that allows for rapid prototyping and sharing of your source code.

Now imagine the convenience of Jupyter notebooks for your JS experiments. I’ve put together a Google Colab notebook for the above code snippets.

Go Nuts!

Full Stack Dev. Python, Java, Go,Angular, React, AWS. Interested in Virtual Assistants and SaaS.