JavaScript Functional Programming – Complete Notes
Functional Programming is a programming paradigm that avoids changing state and mutable data. In
JavaScript, functional programming is implemented using built-in array methods instead of traditional loops
like for, while, and do-while. All functional methods accept a callback function.
The following methods are covered in this notes:
• forEach()
• map()
• filter()
• reduce()
• reduceRight()
• find()
• sort()
1. Nested Array
A nested array is an array that contains one or more arrays as its elements.
Question:
Print all elements whose values are less than 10 in the given nested array.
Answer:
a = [
[1,2],
[10,22],
[14,21],
[3,6],
[5,9],
[19,28],
];
[Link]().filter(num => num < 10);
2. Employee Array
The employee array stores multiple employee records. Each record contains id, name, designation,
location, salary, and experience.
Employee Data:
employee = [
[1000,'Neel','Developer','Kochi',25000,3],
[1001,'Max','Tester','TVM',20000,2],
[1002,'Vinod','QA','KNR',35000,4],
[1003,'Vyom','QA','Kochi',45000,5],
[1004,'Laisha','Tester','TVM',55000,7],
[1005,'Aahan','Developer','TVM',15000,1],
[1006,'Aahil','QA','Kochi',25000,3],
[1007,'Shayan','Developer','KNR',30000,3],
[1008,'Nihaan','Developer','Kochi',25000,3],
];
Questions & Answers:
//1 Print all employee names
[Link](emp => emp[1]);
//2 Print total number of employees
[Link];
//3 Print developer employee details
[Link](emp => emp[2] === 'Developer');
//4 Print employee details with salary > 30000
[Link](emp => emp[4] > 30000);
//5 Print details of employee Laisha
[Link](emp => emp[1] === 'Laisha');
3. sort() Method
The sort() method arranges array elements either in ascending or descending order. By default, sort()
treats all values as strings, which may give incorrect results for numbers. To fix this, a compare callback
function is used.
var points = [40, 100, 1, 5, 25, 10];
// Ascending order
[Link]((a, b) => a - b);
// Descending order
[Link]((a, b) => b - a);
// Lowest number
[Link](...points);
// Highest number
[Link](...points);
4. map() Method
The map() method iterates over an array, applies a function to each element, and returns a new array
without modifying the original array.
Questions & Answers:
// Square of elements
a = [10,11,12,13,14];
[Link](num => num * num);
// Multiply values by 10
number = [65, 44, 12, 4];
[Link](num => num * 10);
// Square root of values
numbers = [4, 9, 16, 25];
[Link](num => [Link](num));
5. filter() Method
The filter() method creates a new array by selecting elements that satisfy a given condition.
a = [10,11,12,13,14,15,16,17,18,19,20];
// Print only even numbers
[Link](num => num % 2 === 0);
age = [20,14,26,37,30,10,8];
// Ages 18 and above
[Link](a => a >= 18);
6. forEach() Method
The forEach() method executes a provided function once for each array element. It does not return a new
array.
const numbers = [1, 2, 3, 4, 5];
[Link]((element, index, arr) => {
[Link](index, element, arr);
});
const countries = ['Finland', 'Denmark', 'Sweden', 'Norway', 'Iceland'];
[Link](country => [Link]([Link]()));
7. Products Array
products = [
[2,'lays',20,80],
[3,'oreo',40,100],
[4,'parleG',25,10],
[5,'tiger',20,0],
[6,'unibic',60,20],
[7,'good day',70,20]
];
// Display product names one by one
[Link](product => [Link](product[1]));
8. reduce() Method
The reduce() method applies a function against an accumulator and each element in the array to reduce it
to a single value.
a = [1,2,3,4,5,6,7,8,9,10];
// Sum of elements
[Link]((sum, num) => sum + num, 0);
// Highest element
[Link]((a, b) => a > b ? a : b);
// Lowest element
[Link]((a, b) => a < b ? a : b);
9. Find Minimum Value Holder
Question:
Who got the minimum value?
Answer:
data = [
[1,'chinnu',100],
[2,'minnu',200],
[3,'ponnu',100],
[4,'Manu',100],
[5,'anu',300],
];
[Link]((a, b) => a[2] < b[2] ? a : b);
10. Theory Questions
1. Purpose of filter()
filter() is used to create a new array with elements that satisfy a specific condition.
2. How filter() works
filter() applies a callback function to each element and includes it if the function returns true.
3. filter() to get even numbers
[Link](num => num % 2 === 0);
4. filter() vs find()
filter() returns all matching elements, while find() returns only the first match.
5. forEach capital letters
[Link](c => [Link]([Link]()));
6. map() to double values
[Link](num => num * 2);
7. map() vs forEach()
map() returns a new array, forEach() does not return anything.
8. map() extract properties
[Link](person => [Link]);
9. reduce() explanation
reduce() combines all elements into a single value using an accumulator.
10. reduceRight() vs reduce()
reduceRight() works from right to left, reduce() works from left to right.
11. TASK 2 – Customer Data
const customerData = [
[3000, 'John Doe', 'New York', '[Link]@[Link]', 1000],
[3001, 'Alice Smith', 'Los Angeles', '[Link]@[Link]', 1200],
[3002, 'Bob Johnson', 'Chicago', '[Link]@[Link]', 800],
[3003, 'Emily Davis', 'San Francisco', '[Link]@[Link]', 1500],
[3004, 'David Lee', 'Houston', '[Link]@[Link]', 1100],
[3005, 'Sophia Chen', 'Miami', '[Link]@[Link]', 900],
[3006, 'Michael Wilson', 'Seattle', '[Link]@[Link]', 1300],
[3007, 'Emma Brown', 'Dallas', '[Link]@[Link]', 950],
[3008, 'Daniel Miller', 'Boston', '[Link]@[Link]', 1050],
];
Questions & Answers:
//1 Print all customer names
[Link](c => c[1]);
//2 Total customers
[Link];
//3 Customers from Chicago
[Link](c => c[2] === 'Chicago');
//4 Amount greater than 1000
[Link](c => c[4] > 1000);
//5 Customer named David Lee
[Link](c => c[1] === 'David Lee');
//6 Amount between 900 and 1100
[Link](c => c[4] >= 900 && c[4] <= 1100).length;
//7 Customers not from New York
[Link](c => c[2] !== 'New York');
//8 Average transaction amount
[Link]((sum, c) => sum + c[4], 0) / [Link];
