Functional Programing in JavaScript

, , …,
Want to master JavaScript in a week? Buy Xah JavaScript Tutorial.

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」

If you want your function to return a value, you must use the return statement with keyword return. A function without return value, when called, will return the builtin special value undefined. Example:

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

console.log(f(3));              // undefined

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;};

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 value 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() {} ); // prints 「function」

Assign a Function to Variable

You can assign a function to a 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;};

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

Function Returning a Function

You can have a function return another 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)

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

Function Composition

Because all the above features, JavaScript has some ability to do 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: Defining Function with Optional Parameters/Arguments

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, and Function with State

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

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

blog comments powered by Disqus