JS: Functional Programing (pre ES2015)

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

JS: Functional Programing

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, return undefined. [see JS: Value 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

[see JS: “typeof” Operator]

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

JavaScript Basics

  1. JavaScript Basics
  2. Operators
  3. true, false
  4. Branch Control
  5. Loop
  6. Array Basics
  7. Object Basics

Value Types

  1. Value Types
  2. Primitive Value
  3. “typeof” Operator

Variable

  1. let
  2. const
  3. var 👎
  4. var Order 👎
  5. var Scope 👎
  6. Global Variable
  7. Destructuring Assignment

String

  1. String Overview
  2. Template String
  3. String Escape Sequence
  4. Unicode Escape Sequence
  5. Char, Code Unit, Codepoint

Function

  1. Define Function
  2. Arrow Function ⭐
  3. Function Params
  4. “arguments” Object
  5. Rest Params ⭐
  6. Arg Default Value ⭐
  7. Arg Destructure ⭐
  8. f Declaration vs Expression
  9. Closure
  10. f call apply bind
  11. Functional Programing

Object Property

  1. Property Overview
  2. Property Key
  3. Dot vs Bracket Notation
  4. Create/Delete Property
  5. Get/Set Property
  6. Property Existence
  7. Access Property
  8. List Properties
  9. Property Attributes
  10. Getter/Setter
  11. Property Descriptor
  12. Symbol

Object and Inheritance

  1. Object Overview
  2. Object Type
  3. Find Object's Type
  4. Prototype Chain
  5. Check is in Prototype Chain
  6. Get/Set Parent
  7. Show Prototype Chain
  8. Create Object
  9. Object Literal Expr
  10. Create Object with Parent X
  11. Prevent Adding Property
  12. Clone Object
  13. Test Object Equality
  14. Add Method to Prototype

Array

  1. Understand JS Array
  2. Create Array
  3. Sparse Array
  4. Array-Like Object
  5. Array How-To

Constructor/Class

  1. “this” Binding
  2. What's Constructor?
  3. Property Key "prototype"
  4. Operator “new”
  5. Operator “instanceof”
  6. Property Key “constructor”
  7. Class
  8. Keyword “extends”
  9. Keyword “super”

Iterable ⭐

  1. Interface
  2. Iterable
  3. Iterator
  4. Iterator Prototype
  5. for-of Loop
  6. Spread Operator
  7. Generator
  8. Generator Function

Regular Expression

  1. RegExp Basics
  2. RegExp Syntax
  3. Regex Find/Replace

Date

  1. Date Tutorial
  2. Compute Date Range

Set Object

  1. Set Object
  2. Union, Intersection, Diff

Map Object

  1. Map Object
  2. Iterate Over Map Object
  3. Convert Object to/from Map
  4. Map Filter
  5. Reverse Key/Value

Number

  1. String to/from Number
  2. Convert Decimal/Hexadecimal
  3. Format Number
  4. Random Number

Misc

  1. Import/Export
  2. Promise
  3. Proxy
  4. Try Catch Throw Finally
  5. ES2015 Features
  6. ES2016, 2017, 2018, 2019
  7. How to Convert ES5 to ES2015
  8. Style Guide
  9. Semicolon Rules
  10. Exclamation Before Function
  11. How to Determine Strict Mode?
  12. x.y.z Associativity
  13. Function Chain
  14. Random Number, Range, Integer, Element
  15. Timing JS Code
  16. Range Function for Array
  17. Tagged Template String
  18. Allowed Characters in Identifier
  19. Encode URL, Escape String

Object Reference

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials