In the course functional programming we'll learn to create visualisations from data. But first we had to learn how to clean and transform data. The dataset that is used in the exercise is a collection of survey data filled in by students from this course. With the skills learned from the exercise, a visualization will be made from external datasets. The dataset will be transformed using functional patterns offcourse.

Table of content

• Functional Patterns
• Impure VS Pure Functions
  • Impure Function
  • Pure Function
• Immutability VS Mutability
• Higher-order Functions
• Function Composition
  • Modules & Utilities
• Resources

Functional Programming are collections of patterns and principles written wifth Javascript

Intresting Functional Pattern

If a function returns something to the screen, or adds/changes data outside the scope of the function then it’s not pure.

let number = 2;

function double() {
	number = number + number;
	return number;
}

square();

> This double() function changes the original number variable

A Pure Function doesn't have side effects We can call a pure function over and over again, and as long as the parameters are the same, it will always return the same value.

function double(num) {
	return num + num;
}

double(2);

> This double() function returns a new value from its parameter.

let data = ['hi', 'this', 'is', 'a', 'data', 'array'];

Imutability: Returns new array based on data array

Mutability: Modifies original data array

if (imutability === true) {
	const newData = data.filter((d) => d === 'data');
	// returns ['hi', 'this', 'is', 'a', 'array'];
	// the original data array is not mutated
	console.log(data); // returns ['hi', 'this', 'is', 'a', 'data', 'array'];
} else if (mutability === true) {
	data.shift();
	// shift() removes first element of an array
	console.log(data); // returns ['this', 'is', 'a', 'data', 'array'];
}

A higher order function is a function that takes another function as a parameter and/or returns another function.

Examples of Higher-order Functions are map(), filter() & reduce().

In Javascript these types of functions are seen as values themselves. this makes it possible to assign them to variables.

I've used some of these functions to modify the parking data and to filter that data based on the activeProvince

I have used the map() function to create new objects with only values i need.

This function can be found at .formatters.jsx

const formatData = (data) => {
	return data.map((d) => {
		return {
			id: d.id,
			name: d.name,
			province: d.province,
			usage: d.usage,
			city: d.city,
			latitude: d.latitude,
			longitude: d.longitude,
			capacity: d.capacity,
			minHeign: d.minimumHeightInMeters,
			active: false,
		};
	});
};

const activeLocations = state.allLocations.filter((d) =>
					filterParkingByProvince(d, activeProvince)

This function can be found at .formatters.jsx

parkingReducer.jsx

export const filterParkingByProvince = (d, filter) => d.province === filter;

Use smaller functions with a specific in/output. Use these functions to increase reusability. and compine multiple functions to build something complex.

For my project I've written some helper functions, these functions are reused in different files and functions.

The functions I've used and created can be found in the Frontend-Applications Repo

export const nestedData = (data) => {
	const nested = rollups(
		data,
		(v) => v.length,
		(d) => d.usage
	);
	return nested;
};

export const filterParkingByUsage = (d, filter) => d.usage === filter;
export const filterParkingByProvince = (d, filter) => d.province === filter;
export const filterParkingByCity = (d, filter) => d.city === filter;
export const resetParkingFilter = (d) => {
	d.active = false;
	return d;
};

export const provinceValue = (d) => d.province;
export const colorRange = [colors.darkBlue, colors.darkGray, colors.yellow];

• cmda-tt - cmda-tt/course-20-21/examples/functional-patterns
• Nested Software - Basic Functional Programming Patterns in JavaScript