JavaScript: Functional Programing

By Xah Lee. Date: . Last updated: .

This page teaches you basic functional programing in JavaScript.

All techniques on this page are common in industrial code. You should be familiar with them.

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
or, buy something from my keyboard store