JavaScript: Functional Programing

By Xah Lee. Date: . Last updated: .

This page teaches you functional programing in JavaScript.

The programing techniques on this page are not JavaScript basics, but are not advanced “fancy tricks” neither. If you do any serious JavaScript programing, you have to know all of the techniques shown on this page.

JavaScript Function Techniques

Defining a Function

Here's how to define a function:

// defines a function
function f(n) {return n+1;};

Function without 「return」 returns 「undefined」

A function without return, when called, will return the builtin value undefined. 〔➤see JavaScript: Data Types

// function without return statement returns undefined
function f() {3;};

console.log( f() === undefined ); // true

Pure Function (aka Anonymous Function, lambda)

You can define a function without naming it. Example:

// defines a function without naming it
(function (n) {return n+1;})

// need parenthesis, because of a quirk in js
// without parenthesis, js think it's a function declaration, and require a name.

Apply a Function to a Value

You can apply a function to value directly.

// apply a pure function to value directly
(function (n) {return n+1;} (2))
// result is 3

Function's Value is 「function」

A function definition has a value that represent the function. Its type is “function”.

console.log(
 typeof function f() {} === "function"
); // prints true

Assign a Function to Variable

You can assign function to variable.

// assign a function to a variable
var f = function (n) {return n+1;};
console.log(f(2)); // prints 3

The above is effectively equivalent to this:

(function f(n) {return n+1;})

〔➤see JavaScript: What's the Difference Between Function Declaration and Function Expression

Function Returning a Function

Function can return a function.

// function returning a function
function f(n) {
    return function (x) { return (n + " and " + x ); };
}

console.log (f(2) (7)); // prints 「2 and 7」

So, for example, you can define a function f(n) that returns a function g(x) that computes nth power of x.

// function returning a function
function f(n) {
    return function (x) {return Math.pow(x,n); };
}

console.log (f(2) (7)); // prints 49

In the above, we first call f(2), the result is a function that computes x^2. Then, we give this function a argument of 7, so the result is 49.

Recursion

Function can call itself. Here's a example of factorial.

function f(n) {
    if (n <= 1) {return 1;}
    else { return n * f(n - 1);}
}

console.log(f(4)); // prints 24. (it's 4×3×2×1)

〔➤see JavaScript: What's the Difference Between Function Declaration and Function Expression

Function Composition

Because all the above features, JavaScript can do some advanced functional programing. For example, we can define a function (say, simpleFunctionCompose), that takes 2 arguments, each is a function (say, f and g), and simpleFunctionCompose returns a new function whose behavior is equivalent to f(g(x)).

// function composition

// takes two single value functions f(x) and g(x) and returns a function that computes f(g(x))
function simpleFunctionCompose(f, g) {
    return function (n) { return f(g(n)); };
}

// test
function i(n) { return n*2;}
function j(n) { return n+1;}

console.log(simpleFunctionCompose(i,j)(5)); // prints 12

Defining Function with Optional Parameters

JavaScript: Function with Optional Parameters

Variable Scope: Function Level vs Block Level

JavaScript Variable Scope: Function Level vs Block Level

Variable & Function Declaration Order: Name Hoisting

JavaScript: Variable/Function Declaration Order, Name Hoisting

Function Constructor

JavaScript Function Constructor

Closure, and Function with State

JavaScript: Closure

JavaScript: What's the Difference Between Function Declaration and Function Expression

JavaScript: What's the Difference Between Function Declaration and Function Expression

Like what you read? Buy JavaScript in Depth.