Functions are first-class citizens in JavaScript

Nov 26, 2021

first class citizen entity/type : An entity that supports all operations other entities have. This means first-class citizens can be passed, returned & assigned etc.

To simply put it this means that you can

Assign a function to a variable

var coolVariable = function() {
    console.log("Cool Anon Function");
};

coolVariable; // Will return a function object, but not print anything to the console.
coolVariable(); // Will actually call the function.  The magic trick is in the `()`

Pass a function to a function

function randomDecoration()
{
var decors = Array("=", "-", "~", "X", "_");
// Returns a random decoration from an Array
return decors[Math.floor(Math.random()*decors.length)];
};


function printDecorated(msg, decor)
{
console.log(`${decor()} ${msg} ${decor()}`);
};
// prints:  "X Decorate Me ="

printDecorated("Decorate Me", randomDecoration);
// Notice that we do not add `()`; when passing it as an object

Partially apply or spawn a new function from a generic function

function customRandomDecoration(decors)
{
  return function(n)
  {
    d = decors[Math.floor(Math.random()*decors.length)]
    // We will repeat the same decoration n times e.g. xxx, --
    return d.repeat(n);
  }
};


function printDecorated(msg, decor)
{
  console.log(`${decor(3)} ${msg} ${decor(4)}`);
};


// We spawn a new function that has custom Decorations and it can be reused
var randomDecoration = customRandomDecoration(Array(":", "-", "~", "_", "+"));
// prints: ""--- Decorate Me ++++"

printDecorated("Decorate Me", randomDecoration);

Sources:

Functions as First Class Citizens in JavaScript