Functional programming is a way of writing clearner code through clever way of mutating, combinding, and using functions.
Arrow functions create a concise expression that encapsulates a small piece of functionality. Additionally, arrows retain the scope of the caller inside the function eliminating the need of self = this.
For example:
// const multiply = function(x, y) { // return x * y; // } // Can be rewritten as: // const multiply = (x, y) => { return x * y }; // Since the function is a single expression return and braces are not needed: const multiply = (x, y) => x * y; console.log(multiply(5,10)) // 50- Global scope
- Local scope
- Function scope
- Block scope
- Function hoisting and scope
- Functions do not have access to each other's scope
- Nested scope
Global scope
If a variable is declared outside all functions or curly braces ({}), it is said to be defined in the global scope.
const globalVariable = 'some value';Clousure is the functions that have access to the parent scope, even when the parent function has closed.
For every closure there are 3 scopes:
- Local scope ( Own scope)
- Outer functions scope
- Global scope
Function delegates encapsulate a method allowing functions to be composed or passed as data.
For example:
const isZero = n => n === 0; const a = [0, 1, 0, 3, 4, 0]; console.log(a.filter(isZero)); // [0, 0, 0]Statements define an action and are executed for their side effect. Expressions produce a result without mutating state.
For example:
Statement
const getSalutation = function(hour) { var salutation; // temp value if (hour < 12) { salutation = "Good Morning"; } else { salutation = "Good Afternoon" } return salutation; // mutated value } console.log(getSalutation(10)); // Good MorningExpression
const getSalutation = (hour) => hour < 12 ? "Good Morning" : "Good Afternoon"; console.log(getSalutation(10)); // Good MorningA function that accepts another function as a parameter, or returns another function.
For example:
function mapConsecutive(values, fn) { let result = []; for(let i=0; i < values.length -1; i++) { result.push(fn(values[i], values[i+1])); } return result; } const letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g']; let twoByTwo = mapConsecutive(letters, (x, y) => [x, y]); console.log(twoByTwo); // [[a, b], [b, c], [c, d], [d, e], [e, f], [f, g]]A function that given the same input, will always return the same output. A pure function produces no side effects.
Note: Side effects may include:
- changing the file system
- inserting a record into a database
- making an http call
- mutations
- printing to the screen / logging
- obtaining user input
- querying the DOM
- accessing system state
For example:
var xs = [1, 2, 3, 4, 5]; // ==== pure ==== xs.slice(0, 3); //=> [1, 2, 3] xs.slice(0, 3); //=> [1, 2, 3] xs.slice(0, 3); //=> [1, 2, 3] // ==== pure ==== xs.splice(0, 3); //=> [1, 2, 3] xs.splice(0, 3); //=> [4, 5] xs.splice(0, 3); //=> [] // pure var checkAge = function(age) { var minimum = 21; return age >= minimum; }; // impure var minimum = 21; var checkAge = function(age) { return age >= minimum; };Recursion is the ability to call a function from within itself.
For example:
function countUp(n) { console.log(n); if(n < 10) countUp(n+1); } countUp(1);Anonymous function is the function that was declared without any named identifier to refer to it.
For example:
// Normal function function sayHi() { alert('Hello world!'); } sayHi(); // Anonymous function assigned to sayHi variable var sayHi = function() { alert('Hello World!'); } // Use as an argument to other functions setTimeout(function() { console.log('Hello World!'); }, 1000); // Use as a closure (function() { alert('Hello World!'); })(); // Use as a closure with parameters (function(msg) { alert(msg); }('Hello World!')); // An anonymous function can refer to itself via arguments.callee local variable, useful for recursive anonymous functions console.log( (function(n) { return (1 < n) ? arguments.callee(n - 1) + n : 1; })(10) ); // Instead of using arguments.callee, you can use named function expression instead console.log( (function sum(n) { return (n <= 1) ? 1 : sum(n-1) + n })(10) );Currying allows a function with multiple arguments to be translated into a sequence of functions. Curried functions can be tailored to match the signature of another function.
// Statement // function convertUnits(toUnit = 0, factor, offset) { // return function(input) { // return ((offset + input) * factor).toFixed(2).concat(toUnit) // } // } // Can be written as an expression const convertUnits = (toUnit, factor, offset = 0) => input => ((offset + input) * factor).toFixed(2).concat(toUnit); const milesToKm = convertUnits('km', 1.60936, 0); const poundsToKg = convertUnits('kg', 0.45460, 0); const farenheitToCelsius = convertUnits('degrees C', 0.5556, -32); console.log(milesToKm(10)); //"16.09 km" console.log(poundsToKg(2.5)); //"1.14 kg" console.log(farenheitToCelsius(98)); //"36.67 degrees C" const weightsInPounds = [5, 15.4, 9.8, 110]; // Without currying // const weightsInKg = weightsInPounds.map(x => convertUnits('kg', 0.45460, 0)(x)); // With currying const weightsInKg = weightsInPounds.map(poundsToKg); console.log(weightsInKg); // 2.27kg, 7.00kg, 4.46kg, 50.01kgArray Functions are the gateway to functional programming in JavaScript. These functions make short work of most imperative programming routines that work on arrays and collections.
[].every(fn)
Checks if all elements in an array pass a test.
[].some(fn) | [].includes(fn)
Checks if any of the elements in an array pass a test.
[].find(fn)
Returns the value of the first element in the array that passes a test.
[].filter(fn)
Creates an array filled with only the array elements that pass a test.
[].map(fn)
Creates a new array with the results of a function applied to every element in the array.
[].reduce(fn(accumulator, currentValue))
Executes a provided function for each value of the array (from left-to-right). Returns a single value, the accumulator.
[].sort(fn(a,b)) warning, mutates state!
Modifies an array by sorting the items within an array. An optional compare function can be used to customize sort behavior. Use the spread operator to avoid mutation. [...arr].sort()
[].reverse() warning, mutates state!
Reverses the order of the elements in an array. Use the spread operator to avoid mutation. [...arr] . reverse()
For example:
const names = [ {text: "Alpha", value: 5}, {text: "Beta", value: 2}, {text: "Gamma", value: 4}, ]; //Checks if all elements in an array pass a test. let everyResult = names.every(x => x.value > 0); //true // Checks if any of the elements in an array pass a test. let someResult = names.some(x => x.text === "Alpha"); //true // Returns the value of the first element in the array that passes a test. let findResult = names.find(x => x.text === "Gamma"); //{text: "Gamma", value: 4} // Creates an array filled with only the array elements that pass a test. let filterResult = names.filter(x => x.value > 3); //[{text: "Alpha", value: 5}, {text: "Gamma", value: 4}] // Creates a new array with the results of a function applied to every element in the array. let mapResult = names.map(x => ({...x, value: x.value *10})); //[{text: "Alpha", value: 50}, {text: "Beta", value: 20}, {text: "Gamma", value: 40}]; // Executes a provided function for each value of the array (from left-to-right). The returns a single value, the accumulator. let reduceResult = names.reduce((accumulator, currentValue) => currentValue.value > accumulator.value ? currentValue : accumulator); // Get the largest object by value: {"text":"Alpha","value":5} // Modifies an array by sorting the items within an array. An optional compare function can be used to customize sort behavior. Use the spread operator to avoid mutation. [...arr].sort() let sortResult = [...names].sort((a,b) => b.value - a.value); // reverses the order of the elements in an array. Use the spread operator to avoid mutation. [...arr].reverse() let reverseResult = [...names].reverse(); // Results const appDiv = document.getElementById('app'); appDiv.innerHTML = ` <p>every: ${everyResult}</p> <p>some: ${someResult}</p> <p>find: ${JSON.stringify(findResult)}</p> <p>filter: ${JSON.stringify(filterResult)}</p> <p>map: ${JSON.stringify(mapResult)}</p> <p>reduce: ${JSON.stringify(reduceResult)}</p> <p>reverse: ${JSON.stringify(reverseResult)}</p> <p>sort: ${JSON.stringify(sortResult)}</p>`;Method chains allow a series of functions to operate in succession to reach a final result. Method chains allow function composition similar to a pipeline.
For example:
let cart = [ { name: "Drink", price: 3.12 }, { name: "Steak", price: 45.15}, { name: "Drink", price: 11.01} ]; let drinkTotal = cart.filter(x=> x.name === "Drink") .map(x=> x.price) .reduce((t,v) => t + v) .toFixed(2); console.log(`Total Drink Cost $${drinkTotal}`); // Total Drink Cost $14.13A pipeline allows for easy function composition when performing multiple operations on a variable. Since JavaScript lacks a Pipeline operator, a design pattern can be used to accomplish the task.
const pipe = functions => data => { return functions.reduce( (value, func) => func(value), data ); }; let cart = [3.12, 45.15, 11.01]; const addSalesTax = (total, taxRate) => (total * taxRate) + total; const tally = orders => pipe([ x => x.reduce((total, val) => total + val), // sum the order x => addSalesTax(x, 0.09), x => `Order Total = ${x.toFixed(2)}` // convert to text ])(orders); console.log(tally(cart)); // Order Total = 64.62