The awesome power of JavaScript functions

If someone came up to me and asked how would I describe JavaScript functions, there are only two words that pop to mind: strange and awesome. This particular choice of words is often used to describe JavaScript functions and it is mostly attributed to the fact that functions in JavaScript are first class citizens. Yeah, functions are what JavaScript is all about. But let’s dive in, let’s get into a bit more details.

First-class functions

Before we begin discussing why these functions are strange and awesome, we have to first explain why we say that JavaScript functions are first-class citizens. First-class citizen basically means that an entity in a programming language can be used and can act like any other entity in that language, hence the name. For someone that comes from a stricter language background, this can be a bit chaotic. A function that can be anything? What does this function think it is? But under that chaotic mess, there is a sea of unique possibilities and interesting solutions. Don’t believe me? Then say hello to a JavaScript function.

function sayHello(name){
   let result = `Hello there ${name}`;

   return result;
}

It consists of:

function keyword, declaring that we are going to write a function
A name of the function
One parameter called “name”
Some logic that greets someone
A return keyword, giving back a certain value to the caller

The many faces of a javascript function

So as we saw, a javascript function looks like a standard function with all the regular bells and whistles. So now we are wondering where can we use these functions? We can definitely call them but what else? Like we said it can be used as every other entity in the language. It can be:

Assigned to a variable
Added and stored in a collection
Passed as an argument in another function
Returned from another function
Used as an object
- Can have properties
- Can have methods

Assigning to a variable and stored as a collection

First things first, let’s start by assigning functions to variables and storing them in collections. We will assign a new function to a variable and then add that function and the one above to an array.

let sayGoodbye = function(name){
   let result = `Goodbye there ${name}`;

   return result;
}

let sayFunctions = [sayHello, sayGoodbye];

We can call our functions from a variable or from a function declaration, it makes no difference.

sayHello("Bob");
sayGoodbye("Bob");
sayFunctions[0]("Jill"); //SayHello

Passed as an argument and returned

Now like any other entity, functions can also be passed as arguments. Here we have a function that requires a function as an argument and calls whatever function it is passed and returns a result.

function saySomething(sayingFunction, name){
   let result = sayingFunction(name);

   return result;
}

saySomething(sayHello, "Bob");
saySomething(sayGoodbye, "Bob");

We can also return them from other functions. We can create a function that returns a random function from a collection of functions!

function getRandomFunction(functionsCollection){
   let randomNum = 
   Math.floor(
     Math.random() * Math.floor(functionsCollection.length)
   );

   return functionsCollection[randomNum];
}

Now that’s a functionseption! But how do we call our function from this return statement? Well, there are two ways. The first way is through a variable ( Ex.1 )and the other is directly ( Ex.2 );

let randomFunc = getRandomFunction(sayFunctions); // Ex.1
randomFunc("Bob");

getRandomFunction(sayFunctions)("Bob"); // Ex.2

Function acting as an object

Last but not least, the power to use functions as objects. This feature of javascript functions allows us to add properties and methods to the function without obstructing it’s working flow. Let’s upgrade our sayHello() function with some properties and methods.

sayHello.description = "A function that says hello!";

sayHello.callBob = function(){
    let result = this.call(this, "Bob");

    return result;
};

So now if we ask for the description of our sayHello function, it will give us a description of what the function does. Also if we want to call Bob directly we have a method in the function that calls our function with the name Bob for us. We can add even more properties and methods depending on the logic that we want to implement.

I think after these examples we can pretty much get the picture why the functions in javascript are weird and cool at the same time. It may look hard to find a use for these features at first glance, but knowing that they exist definitely opens new possibilities for new and different solutions in the future. At the very least you can have fun trying something new and different.