DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Languages
  4. A Practical Introduction to Functional Programming With JavaScript

A Practical Introduction to Functional Programming With JavaScript

Learn how to use JavaScript as a functional programming language, allowing you to create simpler, more readable code for your JS projects.

Andras Nemeth user avatar by
Andras Nemeth
·
Apr. 21, 17 · Tutorial
Like (22)
Save
Tweet
Share
11.80K Views

Join the DZone community and get the full member experience.

Join For Free

Many articles talk about advanced functional programming topics, but I want to show you simple and useful code that you can use in day-to-day developer tasks. I've chosen JavaScript because you can run it almost everywhere and it's well suited for functional programming. Two of the reasons why it's so great are that functions are first class citizens and you can create higher-order functions with it.

Higher order functions are functions that can take a function as an argument or return a function as a result. Such as the createAdd function below:

function createAdd(a){
    return function(x){
        return a + x;
    }
}

add3 = createAdd(3);

console.log( add3(5) );
//output is 8

Note how you can store a function in a variable and call it later. Functions in variables are treated just like any other variable.

typeof add3
"function"

But why is it great that you can return a function as a result? Because you are able to return behavior, not just values, and because of this the abstraction will be higher and the code will be more readable and elegant.

Let's take an example. You want to print the double of every number in an array (something that every one of us does once in a while), so you would probably do something like this:

nums = [1, 2, 3, 4, 5];

for (x = 0; x < nums.length; x++) {
    console.log(nums[x] * 2);
}

You can see a common pattern here, the looping through an array is a behavior that you can extract into a function so you don't have to write it again.

How do you do it?

nums = [1, 2, 3, 4, 5];

printDouble = function (k) {
    console.log(k * 2);
}

function forEach(array, functionToRunOnEveryElement) {
    for (x = 0; x < array.length; x++) {
        functionToRunOnEveryElement(array[x]);
    }
}

forEach(nums, printDouble);

// output: 
// 2 
// 4 
// 6 
// 8 
// 10

The forEach function gets an array of numbers and a function printDouble and calls printDouble on every element of the array. Actually, this is a very useful function and its implemented in the prototype of the array. So you don't have to write the previous code in every codebase that you work on.

(forEach is a higher-order function too because it takes a function as a parameter.)

nums = [1, 2, 3, 4, 5];

printDouble = function(k){
    console.log(k * 2);
};

nums.forEach(printDouble);

// output:
// 2
// 4
// 6
// 8
// 10

Welcome to a life without having to write loops again to do something with an array.

You can also write the above code this way:

[1, 2, 3, 4, 5].forEach((x) = > console.log(x * 2))

JavaScript has abstractions for similar common patterns such as reduce, which can be used to produce a single output from an array.

nums = [1, 2, 3, 4, 5];

add = function (a, b) {
    return a + b;
}

nums.reduce(add, 0);

//returns 15

What it does is:

0 + 1 = 1
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10
10 + 5 = 15


Map is similar to forEach, but the function you give it modifies the value of the current element:

nums = [1, 2, 3, 4, 5];

function isEven(x) {
    if (x % 2 == 0) {
        return x + " is an even number";
    } else {
        return x + " is an odd number";
    }
}

nums.map(isEven)

// returns an array:
// [ '1 is an odd number',
// '2 is an even number',
// '3 is an odd number',
// '4 is an even number',
// '5 is an odd number' ]

(Actually, it returns a new array the original one is kept intact)

Filter is used for removing the elements that do not match a given set criteria:

nums = [1, 2, 3, 4, 5];

isEven = function(x){
    return x % 2==0;
};

nums.filter(isEven);

//returns an array with even numbers [ 2, 4 ]

You can also use the filter with the fat arrow operator:

[1,2,3,4,5].filter((x) => {return x%2==0});

Below is a similarly common example for a web application:

function addAMonthOfSubscriptionToUser(username) {
    user = db.getUserByUsername(username);
    user = addAMonthOfSubscription(user);
    db.saveUser(user);
}

function addAYearOfSubscriptionToUser(username) {
    user = db.getUserByUsername(username);
    user = addAYearOfSubscription(user);
    db.saveUser(user);
}

function cancelSubscriptionForUser(username) {
    user = db.getUserByUsername(username);
    user = cancelSubscription(user);
    db.saveUser(user);
}

addAMonthOfSubscriptionToUser("Jay");

Don't repeat yourself - as every good programmer knows.

In this scenario, we can see a pattern, but it cannot be abstracted with OOP structures, so let's do our functional magic.

modifyUser = function(modification){
   return function(username) {
       user = db.getUserByUsername(username);
       user = modification(user);
       db.saveUser(user)
   }
}

addAMonthOfSubscriptionToUser = modifyUser(addAMonthOfSubscription);
addAYearOfSubscriptionToUser = modifyUser(addAYearOfSubscription);
cancelSubscriptionForUser = modifyUser(cancelSubscription);

addAYearOfSubscriptionToUser("Bob");

In the end, we have the same functions in a more elegant way.

I think in the future functional programming will creep into our everyday life and will be used beside OOP so we can have a more abstract and readable codebase.

Functional programming JavaScript Data structure

Published at DZone with permission of Andras Nemeth. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Taming Cloud Costs With Infracost
  • Upgrade Guide To Spring Data Elasticsearch 5.0
  • Hackerman [Comic]
  • Real-Time Stream Processing With Hazelcast and StreamNative

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: