1 of 39

Functional Programming

Ketan Mayer-Patel

UNC Department of Computer Science

COMP 426: Modern Web Programming (Fall 2026)

Module 1: Fundamentals

Lecture 05

2 of 39

No need to request Vercel installation for the comp426-26f GitHub organization� You should fork your assignment into your own GitHub account (i.e., outside of the classroom organization) and then deploy to Vercel from there.��Still about 23 people that are not linked to a GitHub account on Classroom50. If you are having trouble accepting the A01 assignment invitation link, fill out the form linked in the Canvas announcement about this.

Functional Programming

COMP 426: Modern Web Programming (Fall '26)

Announcements

M1: Fundamentals

L05

!

3 of 39

Functional Programming

COMP 426: Modern Web Programming (Fall '26)

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

script.ts

�const num = 426;�

const halve =

(x: number) => {

return x / 2;

}

const result = halve(num);

Stack

Heap

Globals (F0) P: �

num

426

Global variable is placed in the stack frame.

M1: Fundamentals

L05

4 of 39

COMP 426: Modern Web Programming (Fall '26)

Functional Programming

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

script.ts

�const num = 426;�

const halve =

(x: number) => {

return x / 2;

}

const result = halve(num);

Stack

Heap

Globals (F0) P: �

num

426

id:0 P: F0

fn lines 4-6

x: number

The function definition is placed in the heap and is given an ID.

The function was defined from within the globals frame, so we set P (parent ID) to the frame ID of F0.

halve

id:0

We create the variable halve, whose value is the function in the heap at ID: 0.

M1: Fundamentals

L05

5 of 39

COMP 426: Modern Web Programming (Fall '26)

Functional Programming

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

script.ts

�const num = 426;�

const halve =

(x: number) => {

return x / 2;

}

const result = halve(num);

Stack

Heap

Globals (F0) P: �

num

426

id:0 P: F0

fn lines 4-6

x: number

halve

id:0

halve (F1) P:F0 �

RA

8

RV

x

426

We call a function, which means we need a new stack frame!��RA = Return Address

RV = Return Value

P = Parent Frame

We return a value, so we set the return value and execution returns to the line stored in the return address.

213

M1: Fundamentals

L05

6 of 39

COMP 426: Modern Web Programming (Fall '26)

Functional Programming

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

script.ts

�const num = 426;�

const halve =

(x: number) => {

return x / 2;

}

const result = halve(num);

Stack

Heap

Globals (F0) P: �

num

426

id:0 P: F0

fn lines 4-6

x: number

halve

id:0

halve (F1) P:F0 �

RA

8

RV

x

426

213

M1: Fundamentals

L05

7 of 39

COMP 426: Modern Web Programming (Fall '26)

Functional Programming

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

script.ts

�const num = 426;�

const halve =

(x: number) => {

return x / 2;

}

const result = halve(num);

Stack

Heap

Globals (F0) P: �

num

426

id:0 P: F0

fn lines 4-6

x: number

halve

id:0

halve (F1) P:F0 �

RA

8

RV

x

426

result

213

The function’s value is returned.

The active stack frame returns to global - the frame we were just in is popped off the stack.

M1: Fundamentals

L05

8 of 39

COMP 426: Modern Web Programming (Fall '26)

That’s the stack diagram!�

Functional Programming

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

script.ts

�const num = 426;�

const halve =

(x: number) => {

return x / 2;

}

const result = halve(num);

Stack

Heap

Globals (F0) P: �

num

426

id:0 P: F0

fn lines 4-6

x: number

halve

id:0

halve (F1) P:F0 �

RA

8

RV

x

426

result

213

The active stack frame returns to global - the frame we were just in is popped off the stack.

The function’s value is returned.

M1: Fundamentals

L05

9 of 39

Warm Up! (Part 1 – Attendance Check)

With a partner - try to draw a memory diagram for this TypeScript snippet!

Let’s spend 5 min on this.

COMP 426: Modern Web Programming (Fall '26)

Functional Programming

Hints:

script.ts

const x = 12;

const multiply =

(a: number, b: number) => {

return a * b;

}

const square = (a: number) => {

return multiply(a, a);

}

const result = square(x);

id:# P: F#

fn lines #-#

params

Globals (F0) P: �

func (F1) P:F0 �

RA

RV

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

M1: Fundamentals

L05

10 of 39

COMP 426: Modern Web Programming (Fall '26)

Functional Programming

M1: Fundamentals

L05

script.ts

const x = 12;

const multiply =

(a: number, b: number) => {

return a * b;

}

const square = (a: number) => {

return multiply(a, a);

}

const result = square(x);

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

Stack

Heap

Globals (F0) P: �

x : ??

11 of 39

COMP 426: Modern Web Programming (Fall '26)

Functional Programming

M1: Fundamentals

L05

script.ts

const x = 12;

const multiply =

(a: number, b: number) => {

return a * b;

}

const square = (a: number) => {

return multiply(a, a);

}

const result = square(x);

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

Stack

Heap

Globals (F0) P: �

x : 12

12 of 39

COMP 426: Modern Web Programming (Fall '26)

Functional Programming

M1: Fundamentals

L05

script.ts

const x = 12;

const multiply =

(a: number, b: number) => {

return a * b;

}

const square = (a: number) => {

return multiply(a, a);

}

const result = square(x);

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

Stack

Heap

Globals (F0) P: �

x : 12

multiply: ??

13 of 39

COMP 426: Modern Web Programming (Fall '26)

Functional Programming

M1: Fundamentals

L05

script.ts

const x = 12;

const multiply =

(a: number, b: number) => {

return a * b;

}

const square = (a: number) => {

return multiply(a, a);

}

const result = square(x);

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

Stack

Heap

Globals (F0) P: �

x : 12

multiply: id0

id:0 P: F0

fn lines 4-6

a: number

b: number

14 of 39

COMP 426: Modern Web Programming (Fall '26)

Functional Programming

M1: Fundamentals

L05

script.ts

const x = 12;

const multiply =

(a: number, b: number) => {

return a * b;

}

const square = (a: number) => {

return multiply(a, a);

}

const result = square(x);

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

Stack

Heap

Globals (F0) P: �

x : 12

multiply: id0

square: ??

id:0 P: F0

fn lines 4-6

a: number

b: number

15 of 39

COMP 426: Modern Web Programming (Fall '26)

Functional Programming

M1: Fundamentals

L05

script.ts

const x = 12;

const multiply =

(a: number, b: number) => {

return a * b;

}

const square = (a: number) => {

return multiply(a, a);

}

const result = square(x);

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

Stack

Heap

Globals (F0) P: �

x : 12

multiply: id0

square: id1

id:0 P: F0

fn lines 4-6

a: number

b: number

id:1 P: F0

fn lines 9

a: number

16 of 39

COMP 426: Modern Web Programming (Fall '26)

Functional Programming

M1: Fundamentals

L05

script.ts

const x = 12;

const multiply =

(a: number, b: number) => {

return a * b;

}

const square = (a: number) => {

return multiply(a, a);

}

const result = square(x);

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

Stack

Heap

Globals (F0) P: �

x : 12

multiply: id0

square: id1

result: ??

id:0 P: F0

fn lines 4-6

a: number

b: number

id:1 P: F0

fn lines 9

a: number

17 of 39

COMP 426: Modern Web Programming (Fall '26)

Functional Programming

M1: Fundamentals

L05

script.ts

const x = 12;

const multiply =

(a: number, b: number) => {

return a * b;

}

const square = (a: number) => {

return multiply(a, a);

}

const result = square(x);

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

Stack

Heap

Globals (F0) P: �

x : 12

multiply: id0

square: id1

result: ??

id:0 P: F0

fn lines 4-6

a: number

b: number

id:1 P: F0

fn lines 9

a: number

square (F1) P:F0 �

RA

12

RV

a: 12

18 of 39

COMP 426: Modern Web Programming (Fall '26)

Functional Programming

M1: Fundamentals

L05

script.ts

const x = 12;

const multiply =

(a: number, b: number) => {

return a * b;

}

const square = (a: number) => {

return multiply(a, a);

}

const result = square(x);

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

Stack

Heap

Globals (F0) P: �

x : 12

multiply: id0

square: id1

result: ??

id:0 P: F0

fn lines 4-6

a: number

b: number

id:1 P: F0

fn lines 9

a: number

square (F1) P:F0 �

RA

12

RV

a: 12

multiply (F2) P:F0 �

RA

9

RV

a: 12

b: 12

19 of 39

COMP 426: Modern Web Programming (Fall '26)

Functional Programming

M1: Fundamentals

L05

script.ts

const x = 12;

const multiply =

(a: number, b: number) => {

return a * b;

}

const square = (a: number) => {

return multiply(a, a);

}

const result = square(x);

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

Stack

Heap

Globals (F0) P: �

x : 12

multiply: id0

square: id1

result: ??

id:0 P: F0

fn lines 4-6

a: number

b: number

id:1 P: F0

fn lines 9

a: number

square (F1) P:F0 �

RA

12

RV

a: 12

multiply (F2) P:F0 �

RA

9

RV

144

a: 12

b: 12

20 of 39

COMP 426: Modern Web Programming (Fall '26)

Functional Programming

M1: Fundamentals

L05

script.ts

const x = 12;

const multiply =

(a: number, b: number) => {

return a * b;

}

const square = (a: number) => {

return multiply(a, a);

}

const result = square(x);

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

Stack

Heap

Globals (F0) P: �

x : 12

multiply: id0

square: id1

result: ??

id:0 P: F0

fn lines 4-6

a: number

b: number

id:1 P: F0

fn lines 9

a: number

square (F1) P:F0 �

RA

12

RV

144

a: 12

21 of 39

COMP 426: Modern Web Programming (Fall '26)

Functional Programming

M1: Fundamentals

L05

script.ts

const x = 12;

const multiply =

(a: number, b: number) => {

return a * b;

}

const square = (a: number) => {

return multiply(a, a);

}

const result = square(x);

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

Stack

Heap

Globals (F0) P: �

x : 12

multiply: id0

square: id1

result: 144

id:0 P: F0

fn lines 4-6

a: number

b: number

id:1 P: F0

fn lines 9

a: number

22 of 39

COMP 426: Modern Web Programming (Fall '26)

What is the result of the program below? (~3min!)

Functional Programming

Warm Up! (Part 2)

script.ts

const mystery = (nums: number[], fn: (x: number) => number): number[] => {

result = [];

for(const num of nums) {

result.push(fn(num));

}

return result;

}

const operationFactory = (factor: number) => {� return (x: number) => x * factor;�}

const operation = operationFactory(3);

const result = mystery([1, 2, 3], operation);�

M1: Fundamentals

L05

23 of 39

Higher Order Functions

In RD03, you learned about higher order functions.
Higher Order Function: Function that either returns another function, or accepts a function as a parameter.�
Higher Order Functions unlocks an entirely new paradigm of programming.

Functional Programming

COMP 426: Modern Web Programming (Fall '26)

M1: Fundamentals

L05

24 of 39

Work with a partner – does this code run without any errors, and if so, what should the console output be?

Let’s spend 5 minutes on this!
Hint: If it helps, draw a memory diagram!

Functional Programming

COMP 426: Modern Web Programming (Fall '26)

Another Question

script.ts

�const updater = () => {� let counter = 0;

return () => {� counter += 1;

console.log(counter);� }�}��const update = updater();

update();

M1: Fundamentals

L05

25 of 39

Work with a partner – does this code run without any errors, and if so, what should the console output be?

Let’s spend 5 minutes on this!
Hint: If it helps, draw a memory diagram!

Functional Programming

COMP 426: Modern Web Programming (Fall '26)

Another Question

script.ts

�const updater = () => {� let counter = 0;

return () => {� counter += 1;

console.log(counter);� }�}��const update = updater();

update(); // 1

update(); // 2

update(); // 3

M1: Fundamentals

L05

This seems very surprising!

26 of 39

Functional Programming

COMP 426: Modern Web Programming (Fall '26)

script.ts

�const updater = () => {� let counter = 0;

return () => {� counter += 1;

console.log(counter);� }�}��const update = updater();

update(); // 1

update(); // 2

update(); // 3

M1: Fundamentals

L05

update�

() => {� counter += 1;

console.log(counter);�}

update�

() => {� counter += 1;

console.log(counter);�}

counter is referencing a value out of the immediate scope of the function, but still has access to the variable!

This is called a closure.

Let’s look at a memory diagram.

27 of 39

Functional Programming

COMP 426: Modern Web Programming (Fall '26)

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

script.ts

�const updater = () => {� let counter = 0;

return () => {� counter += 1;

console.log(counter);� }�}��const update = updater();

update();

M1: Fundamentals

L05

Stack

Heap

Globals (F0) P: �

28 of 39

Functional Programming

COMP 426: Modern Web Programming (Fall '26)

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

script.ts

M1: Fundamentals

L05

Stack

Heap

Globals (F0) P: �

id:0 P: F0

fn lines 1-8

updater (F1) P:F0 �

updater

id:0

counter

0

id:1 P: F1

fn lines 4-7

RA

10

RV

id:1

update

id:1

�const updater = () => {� let counter = 0;

return () => {� counter += 1;

console.log(counter);� }�}��const update = updater();

update();

29 of 39

Functional Programming

COMP 426: Modern Web Programming (Fall '26)

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

script.ts

M1: Fundamentals

L05

Stack

Heap

Globals (F0) P: �

id:0 P: F0

fn lines 1-8

�const updater = () => {� let counter = 0;

return () => {� counter += 1;

console.log(counter);� }�}��const update = updater();

update();

updater (F1) P:F0 �

updater

id:0

counter

0

id:1 P: F1

fn lines 4-7

RA

10

RV

id:1

update

id:1

update (F2) P:F1 �

RA

12

RV

1

Since F2’s parent frame is F1, F2 has access to the variables stored in F1.

Again, we call this a closure.

This construction enables an entirely different type of programming paradigm.

30 of 39

Functional Programming

Programming paradigms are ways of structuring and organizing code.

Object-Oriented Programming, taught since COMP 110, is a paradigm.

But, this is NOT the only programming paradigm!

Functional Programming

COMP 426: Modern Web Programming (Fall '26)

M1: Fundamentals

L05

31 of 39

Functional Programming

Programming paradigms are ways of structuring and organizing code.

Object-Oriented Programming, taught since COMP 110, is a paradigm.

But, this is NOT the only programming paradigm!�

Functional Programming: Instead of using classes, all problems can ultimately be modelled using functions.

Functional Programming

COMP 426: Modern Web Programming (Fall '26)

M1: Fundamentals

L05

32 of 39

Functional Programming

COMP 426: Modern Web Programming (Fall '26)

script.ts

M1: Fundamentals

class Person {

name: string;

constructor(

fn: string,

ln: string� ) {� this.name = fn + “ “ + ln;� }�� greet() {� return “Hi, “ + name + “!”;� }

}

const aj = new Person(“A”,”J");

console.log(aj.greet());

L05

script.ts

const Person =

(fn: string, ln: string) => {

let name = fn + “ “ + ln;� return {� name: () => name,� greet: () => {� return “Hi, “+ name +“!”;� }� }� }

const aj = Person(“A”,“J”);

console.log(aj.greet());

33 of 39

Functional Programming

COMP 426: Modern Web Programming (Fall '26)

script.ts

M1: Fundamentals

class Person {

name: string;

constructor(

fn: string,

ln: string� ) {� this.name = fn + “ “ + ln;� }�� greet() {� return “Hi, “ + name + “!”;� }

}

const aj = new Person(“A”,”J");

console.log(aj.greet());

L05

script.ts

const Person =

(fn: string, ln: string) => {

let name = fn + “ “ + ln;� return {� name: () => name,� greet: () => {� return “Hi, “+ name +“!”;� }� }� }

const aj = Person(“A”,“J”);

console.log(aj.greet());

https://go.unc.edu/426f26-L05

This is an object literal!

We can create objects simply using { … }

34 of 39

Functional Programming

COMP 426: Modern Web Programming (Fall '26)

Your Turn

Draw the memory diagram for this!

Let’s spend 10 min on this.

Hint:�Heap for fns Heap for� “object”

Heap for strings ->

M1: Fundamentals

L05

script.ts

const Person =

(fn: string, ln: string) => {

let name = fn + “ “ + ln;� return {� name: () => name,� greet: () => {� return “Hi, “+ name +“!”;� }� }� }

const aj = Person(“A”,“J”);

const greeting = aj.greet();

console.log(greeting);

!

id:# P: F#

fn lines #-#

params

id:#

�

field_1

val

field_2

val

id:# string “val”

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

15

16

35 of 39

Functional Programming

COMP 426: Modern Web Programming (Fall '26)

M1: Fundamentals

L05

script.ts

const Person =

(fn: string, ln: string) => {

let name = fn + “ “ + ln;� return {� name: name,� greet: () => {� return “Hi, “+ name +“!”;� }� }� }

const aj = Person(“A”,“J”);

const greeting = aj.greet();

console.log(greeting);

Stack

Heap

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

15

16

36 of 39

script.ts

const Person =

(fn: string, ln: string) => {

let name = fn + “ “ + ln;� return {� name: () => name,� greet: () => {� return “Hi, “+ name +“!”;� }� }� }

const aj = Person(“A”,“J”);

const greeting = aj.greet();

console.log(greeting);

Stack

Heap

Globals (F0) P: �

id:0 P: F0

fn lines 2-10

fn: string

ln: string

Person

id:0

aj

id:4

greeting

id:7

Person (F1) P: F0 �

fn

id:1

RA

12

RV

id:4

ln

id:2

name

id:3

id:1 string “A”

id:2 string “J”

id:3 string “A J”

id:4

�

name

greet

id:5 P: F1

fn line 5

greet (F2) P: F1 �

RA

13

RV

id:7

id:7 string “Hi, A J!”

Hi, A J!

id:6 P: F1

fn lines 6-8

id:5

id:6

�1�2

3

4�5

6�7�8�9�10

11

12

13

14

15

16

37 of 39

Functional Programming

COMP 426: Modern Web Programming (Fall '26)

To Be Exact…

You may have noticed that the name field in the function version is not mutable.�JavaScript provides a syntax for defining getter/setter methods that look like directly accessible fields.

M1: Fundamentals

L05

script.ts

const Person =

(fn: string, ln: string) => {

let name = fn + “ “ + ln;� return {� get name() {

return name;� }� set name(new: string) {� name = new;� }� greet: () => {� return “Hi, “+ name +“!”;� }� }� }

const aj = Person(“A”, “J”);

aj.name = “XYZ”

console.log(aj.greet());

38 of 39

Functional Programming

None of this would be possible without closures!
In the older versions of JavaScript, class notation did not exist.

Objects would be created either as literals or purely with functions.
Encapsulation (private fields) were only possible with closures.

Functional Programming

COMP 426: Modern Web Programming (Fall '26)

M1: Fundamentals

L05

39 of 39

Functional Programming

In fact, web programming heavily relies on functional programming!

Right now, think of event handlers → functions running in response to events.
In this course, especially starting next module, you will begin to see how many core parts of web programming are expressed as, or composed of, functions.�

Functional programming is also extremely useful in many programming languages across many different disciplines – you are sure to see it in industry!

Ex) Python (from COMP 110), Java Lambda Expressions (from COMP 301)

Functional Programming

COMP 426: Modern Web Programming (Fall '26)

M1: Fundamentals

L05