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

Anonymous Function (aka 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 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 represents the function. The typeof operator on function returns the string "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: Function Declaration vs 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: Function Declaration vs Function Expression

Function Composition

Because all the above features, JavaScript can do some advanced functional programing.

For example, we can define a function (say, fCompose), that takes 2 arguments, each is a function (say, f and g), and fCompose returns a new function whose behavior is equivalent to f(g(x)).

// function composition

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

function i(s) {
 // append "i" to string
    return s + 'i';
}

function j(s) {
    // append "j" to string
    return s + 'j';
}


console.log(fCompose(i,j)("x")); // prints xij

Function topics:

  1. JavaScript: Functional Programing
  2. JavaScript: Function Optional Parameters
  3. JavaScript: Variable/Function Declaration Order, Name Hoisting
  4. JavaScript Variable Scope: Function Level vs Block Level
  5. JavaScript: Function Declaration vs Function Expression
  6. JavaScript: Closure
  7. JavaScript: f.call f.apply f.bind
  8. JavaScript Function Constructor
  9. JavaScript: Function Argument Default Value (ES2015)
  10. JavaScript: Function Rest Parameters (ES2015)
  11. JavaScript: Arrow Function (ES2015)
Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.