JS: 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.

If you are using ES2015, you should read this page instead:

see JS: Functional Programing (ES2015+)

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 JS: 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
const 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 JS: 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 JS: 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 xji

Function Topic

  1. JS: Define Function
  2. JS: Arrow Function
  3. JS: Function Parameters
  4. JS: var/function Order
  5. JS: var Name Scope
  6. JS: Function Declaration vs Function Expression
  7. JS: Closure
  8. JS: Functional Programing
  9. JS: Function Call, Apply, Bind
  10. JS: Function Argument Default Value
  11. JS: Function Rest Parameters
  12. JS: Function Argument Destructure

  1. JS: Function Object
  2. JS: Function.prototype
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth