Understanding higher-order functions with map & reduce in JavaScript

Soumak Dutta — Tue, 12 Feb 2019 12:08:34 +0000

Higher Order Functions

Higher order functions are a hot topic in functional programming. It's used by most of us without knowing it. So in this article, I will clear all confusion about higher-order functions.

In JavaScript functions are treated as objects. They can be assigned to a variable, passed as a parameter and returned from a function. So we called them first-class objects.

So, A higher-order functions are functions that received functions as a parameter or return functions as output.

That means we can pass a function as a parameter to another function. Like..

const foo = call => call();

const sayHi = () => "hi";

foo(sayHi)

Here we pass sayHi function to foo function as an argument. This approach is also called callback.

Also we can return function as output. Like..

const foo = () => () => "Hi";

foo()()

Here we return an anonymous function from function foo.

Now we have understood higher-order functions, we could learn some higher order functions built into Javascript.

Map

The map is an higher order array function. It takes a callback function and the function will called for each element in the array. It will return an entirely new array.

Syntax of map function.

array.map((current, index, array) => {})

Let's take an example.

const arr = [1, 2, 3, 4, 5];

const newArr = arr.map(num => num * 2);

newArr  // 2, 4, 6, 8, 10

Here we call the function for each number and return the number multiplying 2 with it.

Note: Map doesn't change the actual array. Instead it creates a new array with modified values.

Reduce

Reduce is also a higher order function. But unlike map it call the callback for each element and return a single reduced value.

Syntax of reduce function.

array.reduce((accumulator, current, index, array) => {}, initialValue)

Let's take an example.

const arr = [1, 2, 3, 4, 5];

const sum = arr.reduce((total, num) => total += num, 0);

sum  // 15

Here, we find the sum in a list of numbers. Sum is the accumulator. We initialize it with 0 and return the sum.

We can make use of the accumulator to calculate any type of value in an array.

We can calculate the minimum number from a list. Like..

const are = [5,7,3,9,6,3];

const minimum = arr.reduce((min,num) => min < num ? min : num)

So, use map if you want to modify each element in an array. And use reduce when you want to reduce the array to a single value.

I hope you learn something new in this article. Thanks for reading.

Understanding Arrow functions in JavaScript

Soumak Dutta — Fri, 08 Feb 2019 05:49:46 +0000

Arrow functions were introduced in es6 or es2015, since then it's very popular among developers. And it's the coolest thing that I love the most.

Arrow functions changed the way we declare a function. It's made functions declaration easy, fast and stylish.

The arrow in it's name come from it's arrow like syntax. Let's take an example

const foo = () => console.log('Hey, Arrow!');

How to use it

Arrow functions works very similar to anonymous functions.

//Anonymous functions
const foo = function () {
    console.log("I'm old!");
}

//Arrow functions
const foo = () => {
    console.log("I'm new!");
}

But arrow functions provide more flexibility.
Like if you have only one statement in function body then you can remove those curly braces.

const foo = () => console.log("Isn't it cool!");

Also if you returning some value you don't need to provide the return kayword.

const foo = () => "Wow!"

And if you need to return an object you would do.

const msg = () => ({
    type: 'msg',
    body: 'Hey'
})

Now, You can pass multiple parameters to it.

const add = (a, b) => a + b;

And last but not the least, if you have only one parameter you also can remove those Parenthesis.

const product = a => a * a;

Now look how easy it is to declare a function using arrow functions.

I hope you learn something from this article. Thanks for reading..

DEV Community: Soumak Dutta

Understanding higher-order functions with map & reduce in JavaScript

Higher Order Functions

Map

Reduce

Understanding Arrow functions in JavaScript

How to use it