CPIT-405 · WEB APPLICATIONS
Part 6: Functions as values
Declarative vs imperativeFirst-class functionsHigher-order functionsmapfilterreduceforEachsome & every
01 · FUNCTIONAL PROGRAMMING
Build programs by composing functions
declarativeSay what you want
numbers.map(n => n * 2)
imperativeDescribe how, step by step
for (let i = 0; i < numbers.length; i++) doubled.push(numbers[i] * 2);
02 · FIRST-CLASS CITIZENS
A function is a value like any other
let f = square;store it in a variable
greet(…, format)pass it as an argument
return function…return it from a function
[f, g]keep it in an array or object
composition:
x
→
g
→f
→
f(g(x))
03 · HIGHER-ORDER FUNCTIONS
Takes a function, or returns one
function greet(name, country, formatterFunc) { return "Hello, " + name + ". Country: " + formatterFunc(country);}function countryAbbreviation(text) { return text.toUpperCase();}let message = greet("Ali", "ksa", countryAbbreviation);
"ksa"
→ countryAbbreviation →"KSA"
Hello, Ali. Country: KSA
04 · A FUNCTION AS INPUT
function applyTwice(f, num) { return f(f(num)); }function square(num) { return num * num; }let result = applyTwice(square, 3);
3
→
square
→
9
→
square
→
81
05 · A FUNCTION AS OUTPUT
function greaterThan(n) { return function(numberToCheck) { return numberToCheck > n; };}const greaterThan10 = greaterThan(10);greaterThan10(11);greaterThan10(9);
greaterThan(10)→ a new function where n = 10
greaterThan10
11> 10 →true
9> 10 →false
06 · WHY LEARN IT?
1Composition
Small functions combined: fewer lines, easier to read.
2Immutability
"Changes" make a new copy. The original stays untouched.
[1, 2, 3]→[2, 4, 6]
3Easier testing
Pure functions, no shared state, fewer side effects.
4React & Redux
Popular libraries are built on these ideas.
07 · map()
A new array, every element transformed
const doubled = numbers.map(num => num * 2);
08 · map() vs for LOOP
declarative · 1 line
const doubled = numbers.map(num => num * 2);
✓ concise, clear for array → array
imperative · 4 lines
let doubled = [];for (let i = 0; i < numbers.length; i++) { doubled.push(numbers[i] * 2);}
✓ more control: skip or break out
09 · filter()
Keep only what passes the test
const evenNumbers = numbers.filter(num => num % 2 === 0);
10 · reduce()
The whole array → one value
const sum = numbers.reduce((total, num) => total + num, 0);
start0
+ 11
+ 23
+ 36
+ 410
+ 515
11 · forEach()
Run a function once per element
numbers.forEach(num => console.log(num + 2));
forEach returns undefined, not a new array like map
12 · some() & every()
some: at least one?numbers.some(num => num < 0)
Is any number negative?
false
every: all of them?numbers.every(num => num > 0)
Is every number positive?
true
WRAPPING UP
You've covered JavaScript
1Fundamentals
2Events & cookies
3The DOM
4JSON
5Async & Ajax
6Functional JS
coming up nextReact.js →