Newsweek Ranks Toptal #1 Most Reliable Professional Services CompanyHire
in America.
a Developer
®
® Developers Hire a Developer
Related Skills: JavaScript Developers React Developers TypeScript Developers HTML5 Developers Full-stack Developers
Engineering What are you looking for? Search
BACK-END 7-MINUTE READ
Introduction to Functional
Programming: JavaScript Paradigms
By continuing to use this site you agree to our Cookie Policy. Got it
Functional Programming is a paradigm of building computer Hire a Developer
® authors are vetted experts
programs using expressions and functions without mutating state and in their fields and write on topics in
data. which they have demonstrated
experience. All of our content is
In this article, we will talk about doing functional programming using peer reviewed and validated by
JavaScript. We will also explore various JavaScript methods and Toptal experts in the same field.
features that make it possible. In the end, we will explore different
concepts associated with functional programming and see why they
are so powerful.
Last updated: May 11, 2026
By Avi Aryan
Verified Expert in Engineering
Avi is a full-stack developer skilled with Python, JavaScript, and Go and is also a multiple-time
Google Summer of Code participant.
EXPERTISE
JavaScript
PREVIOUSLY AT
By continuing to use this site you agree to our Cookie Policy. Got it
Functional programming is a paradigm of building computer programs using
Hire a Developer
®
expressions and functions without mutating state and data.
SHARE THIS ARTICLE
By respecting these restrictions, functional programming aims to write code that is
clearer to understand and more bug resistant. This is achieved by avoiding using
flow-control statements ( for , while , break , continue , goto ) which make the
code harder to follow. Also, functional programming requires us to write pure,
deterministic functions which are less likely to be buggy.
In this article, we will talk about doing functional programming using JavaScript.
We will also explore various JavaScript methods and features that make it possible.
In the end, we will explore different concepts associated with functional
programming and see why they are so powerful.
Before getting into functional programming, though, one needs to understand the
difference between pure and impure functions.
Pure vs. Impure Functions
Pure functions take some input and give a fixed output. Also, they cause no side
effects in the outside world.
const add = (a, b) => a + b;
Here, add is a pure function. This is because, for a fixed value of a and b , the
output will always be the same.
const SECRET = 42;
const getId = (a) => SECRET * a;
getId is not a pure function. The reason being that it uses the global variable
SECRET for computing the output. If SECRET were to change, the getId function
will return a different value for the same input. Thus, it is not a pure function.
let id_count = 0;
By continuing to useconst
this sitegetId
you agree
= ()to our
=> Cookie Policy.
++id_count; Got it
Hire a Developer
®
This is also an impure function, and that too for a couple of reasons—(1) it uses a
non-local variable for computing its output, and (2) it creates a side effect in the
outside world by modifying a variable in that world.
This can be troublesome if we had to debug this code.
What’s the current value of id_count ? Which other functions are modifying
id_count ? Are there other functions relying on id_count ?
Because of these reasons, we only use pure functions in functional programming.
Another benefit of pure functions is that they can be parallelized and memoized.
Have a look at the previous two functions. It’s impossible to parallelize or memoize
them. This helps in creating performant code.
The Tenets of Functional Programming
So far, we have learned that functional programming is dependent on a few rules.
They are as follows.
1. Don’t mutate data
2. Use pure functions: fixed output for fixed inputs, and no side effects
3. Use expressions and declarations
When we satisfy these conditions, we can say our code is functional.
By continuing to use this site you agree to our Cookie Policy. Got it
Functional Programming in JavaScript
Hire a Developer
®
JavaScript already has some functions that enable functional programming.
Example: [Link], [Link].filter, [Link].
On the other hand, [Link], [Link] are impure
functions.
One can argue that [Link] is not an impure function by design
but think about it—it’s not possible to do anything with it except mutating non-
local data or doing side effects. Thus, it’s okay to put it in the category of impure
functions.
Also, JavaScript has a const declaration, which is perfect for functional
programming since we won’t be mutating any data.
Pure Functions in JavaScript
Let’s look at some of the pure functions (methods) given by JavaScript.
Filter
As the name suggests, this filters the array.
[Link](condition);
The condition here is a function that gets each item of the array, and it should
decide whether to keep the item or not and return the truthy boolean value for that.
const filterEven = x => x%2 === 0;
[1, 2, 3].filter(filterEven);
// [2]
Notice that filterEven is a pure function. If it had been impure, then it would have
made the entire filter call impure.
By continuing to use this site you agree to our Cookie Policy. Got it
Map
Hire a Developer
®
map maps each item of array to a function and creates a new array based on the
return values of the function calls.
[Link](mapper)
mapper is a function that takes an item of an array as input and returns the output.
const double = x => 2 * x;
[1, 2, 3].map(double);
// [2, 4, 6]
Reduce
reduce reduces the array to a single value.
[Link](reducer);
reducer is a function that takes the accumulated value and the next item in the
array and returns the new value. It is called like this for all values in the array, one
after another.
const sum = (accumulatedSum, arrayItem) => accumulatedSum + arrayItem
[1, 2, 3].reduce(sum);
// 6
By continuing to use this site you agree to our Cookie Policy. Got it
Hire a Developer
®
Concat
concat adds new items to an existing array to create a new array. It’s different from
push() in the sense that push() mutates data, which makes it impure.
[1, 2].concat([3, 4])
// [1, 2, 3, 4]
You can also do the same using the spread operator.
[1, 2, ...[3, 4]]
Spread Operator
Creating new objects without mutation is essential in functional programming. In
modern JavaScript, the spread operator is the most common way to do this.
const obj = { a: 2 };
// preferred approach
const newObj = { ...obj };
// older alternative
const newObj2 = [Link]({}, obj);
newObj.a = 3;
obj.a;
// 2
While [Link] is still valid, the spread operator is generally preferred for
readability and consistency.
This can also be done using the spread operator, introduced in ES6 and now widely
used in modern JavaScript.
By continuing to use this site you agree to our Cookie Policy. Got it
Hire a Developer
® const newObj = { ...obj };
Creating Your Own Pure Function
We can create our pure function as well. Let’s do one for duplicating a string n
number of times.
const duplicate = (str, n) =>
n < 1 ? '' : str + duplicate(str, n-1);
This function duplicates a string n times and returns a new string.
duplicate('hooray!', 3)
// hooray!hooray!hooray!
Higher-order Functions
Higher-order functions are functions that accept a function as an argument and
return a function. Often, they are used to add to the functionality of a function.
const withLog = (fn) => {
return (...args) => {
[Link](`calling ${[Link]}`);
return fn(...args);
};
};
In the above example, we create a withLog higher-order function that takes a
function and returns a function that logs a message before the wrapped function
runs.
const add = (a, b) => a + b;
const addWithLogging = withLog(add);
addWithLogging(3, 4);
// calling add
// 7
By continuing to use this site you agree to our Cookie Policy. Got it
withLog HOF can be used with other functions as well and it works
Hirewithout any
a Developer
®
conflicts or writing extra code. This is the beauty of a HOF.
const addWithLogging = withLog(add);
const hype = s => s + '!!!';
const hypeWithLogging = withLog(hype);
hypeWithLogging('Sale');
// calling hype
// Sale!!!
One can also call it without defining a combining function.
withLog(hype)('Sale');
// calling hype
// Sale!!!
Currying
Currying means breaking down a function that takes multiple arguments into one
or multiple levels of higher-order functions.
Let’s take the add function.
const add = (a, b) => a + b;
When we are to curry it, we rewrite it distributing arguments into multiple levels as
follows.
const add = a => {
return b => {
return a + b;
};
};
add(3)(4);
// 7
The benefit of currying is memoization. We can now memoize certain arguments in
By continuing to use this site you agree to our Cookie Policy. Got it
a function call so that they can be reused later without duplication and re-
computation.
Hire a Developer
®
// assume getOffsetNumer() call is expensive
const addOffset = add(getOffsetNumber());
addOffset(4);
// 4 + getOffsetNumber()
addOffset(6);
This is certainly better than using both arguments everywhere.
// (X) DON"T DO THIS
add(4, getOffsetNumber());
add(6, getOffsetNumber());
add(10, getOffsetNumber());
We can also reformat our curried function to look succinct. This is because each
level of the currying function call is a single line return statement. Therefore, we
can use arrow functions in ES6 to refactor it as follows.
const add = a => b => a + b;
Composition
In mathematics, composition is defined as passing the output of one function into
input of another so as to create a combined output. The same is possible in
functional programming since we are using pure functions.
To show an example, let’s create some functions.
The first function is range, which takes a starting number a and an ending number
b and creates an array consisting of numbers from a to b .
const range = (a, b) => a > b ? [] : [a, ...range(a+1, b)];
Then we have a function multiply that takes an array and multiplies all the numbers
in it.
By continuing to use this site you agree to our Cookie Policy. Got it
Hire a Developer
® const multiply = arr => [Link]((p, a) => p * a);
We will use these functions together to calculate factorial.
const factorial = n => multiply(range(1, n));
factorial(5);
// 120
factorial(6);
// 720
The above function for calculating factorial is similar to f(x) = g(h(x)) , thus
demonstrating the composition property.
Functional Programming with TypeScript
TypeScript adds a strong type system on top of JavaScript, which can reinforce
many of the principles of functional programming. By making data structures
explicit and predictable, it becomes easier to reason about how functions behave.
For example, TypeScript provides utility types such as Readonly and
ReadonlyArray , which help prevent accidental mutations of data.
const numbers: ReadonlyArray<number> = [1, 2, 3];
// [Link](4); // Error: push does not exist on readonly array
This aligns well with functional programming’s emphasis on immutability.
TypeScript also improves function composition by ensuring that inputs and outputs
match expected types, reducing runtime errors and making code easier to maintain.
Concluding Words
We went through pure and impure functions, functional programming, the new
JavaScript features that help with it, and a few key concepts in functional
programming.
By continuing to use this site you agree to our Cookie Policy. Got it
We hope that this piece piques your interest in functional programming and
possibly
® motivates you to try it in your code. We are positive that Hire a Developer
it will be a learning
experience and a milestone in your software development journey.
Functional programming is a well-researched and robust paradigm of writing
computer programs. JavaScript’s evolution, particularly since ES6, has made it
much more suitable for functional programming through features like arrow
functions, immutability patterns, and first-class functions.
Further Reading on the Toptal Blog:
• Future-proof Your Android Code, Part 2: Functional Reactive Programming in
Action
• The Foundations of Functional Reactive Programming in Android
UNDERSTANDING THE
BASICS
What is functional programming?
Functional programming is a paradigm of building computer
programs using declarations and expressions.
Is JavaScript a functional programming language or
object-oriented?
What is the advantage of functional programming?
What are other functional programming languages?
What is ES6?
By continuing to use this site you agree to our Cookie Policy. Got it
Hire a Developer
®
Hire a Toptal expert on this topic.
Hire Now
ABOUT THE AUTHOR
Avi is a full-stack developer skilled with Python, JavaScript, and Go and is also
a multiple-time Google Summer of Code participant.
authors are vetted experts in their fields and write on topics in which
they have demonstrated experience. All of our content is peer reviewed and
validated by Toptal experts in the same field.
EXPERTISE
Avi Aryan JavaScript
Verified Expert
in Engineering PREVIOUSLY AT
New Delhi, Delhi, India
Member since March 28,
2018 Hire Avi
TRENDING NOW
ENGINEERING › BACK-END
Laravel API Tutorial: Creating and Testing a RESTful API
ENGINEERING
Client-side vs. Server-side Development: Key Differences and
Advantages
By continuing Explained
to use this site you agree to our Cookie Policy. Got it
Hire a Developer
ENGINEERING ®› BACK-END
Terraform vs. CloudFormation: Choosing the Right IaC Tool
ENGINEERING › TECHNOLOGY
React State Management Libraries: Top Tools and How to
Choose One
SEE OUR RELATED TALENT
JavaScript Developers
World-class articles, Enter your email Sign Me Up
delivered weekly. By entering your email, you are agreeing to our privacy policy.
By continuing to use this site you agree to our Cookie Policy. Got it
Toptal Developers
Hire a Developer
®
Android Developers Magento Developers SharePoint Developers
App Developers .NET Developers Shopify Developers
AWS Developers [Link] Developers Software Developers
Azure Developers Odoo Developers Squarespace Developers
BigCommerce Developers Outsourced Developers Startup Developers
Blockchain Developers PHP Developers Svelte Developers
Coders Power BI Developers Twilio Developers
Database Developers Prototype Developers [Link] Developers
Embedded Software Engineers Python Developers Web Developers
Flutter Developers React Developers Web Scraping Developers
HTML5 Developers React Native Developers WooCommerce Developers
Java Developers Remote Developers WordPress Developers
Joomla Developers Ruby on Rails Developers View More Freelance Developers
Kubernetes Developers Salesforce Developers
Laravel Developers Security Engineers
Join the Toptal® community.
Hire a Developer or Apply as a Developer
By continuing to use this site you agree to our Cookie Policy. Got it
Hire a Developer
®
HIRE TALENT ABOUT
Hire Freelance Developers Why Toptal
Hire Freelance Designers Contact Us
Hire Freelance Marketers Press Center
Hire Freelance Management Consultants Careers
Hire Freelance Project Managers About Us
Hire Freelance Product Managers
Hire Freelance Sales Experts
FEATURED DEVELOPER SKILLS
Full-stack Developers JavaScript Developers
Front-end Developers Kubernetes Developers
Software Developers Magento Developers
®
Web Developers [Link] Developers
Mobile App Developers PHP Developers
AI Engineers PostgreSQL Developers
Android Developers Python Developers
AngularJS Developers [Link] Developers
Django Developers Ruby on Rails Developers
Drupal Developers Salesforce Developers
Game Developers Scala Developers
Hadoop Developers Unity Developers
iOS Developers WordPress Developers
Java Developers
Hire the Top 3% of Freelance Talent®
By continuing to use this site you agree to our Cookie Policy. Got it
Hire a Developer
®
Copyright 2010 - 2026 Toptal, LLC Privacy Policy Website Terms Accessibility
By continuing to use this site you agree to our Cookie Policy. Got it