×
IBORN Logo
Javascript logo on a yellow backgroudn and a loupe.

The Power of JavaScript Functions Explained

Dragan Gelevski
November 12, 2018

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 calle


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.

More similar blog posts:

Javascript logo on a yellow backgroudn and a loupe.

Introduction to Reactive Programming

Reactive Programming is a new declarative paradigm. It makes it possible to work with finite or infinite data flows asynchronously, allowing it to propagate generating changes in the application. As it is indicated by the title, it ‘reacts’ to the data by executing a series of events.

Javascript logo on a yellow backgroudn and a loupe.

Callbacks - A thing of the past

If you are a web developer you probably spend a considerable amount of time handling requests, waiting for things from external sources and then handling the requested data. The problem is quite common and not easily manageable on the client-side.

Javascript logo on a yellow backgroudn and a loupe.

That one time every page run on a single thread

If you’ve ever seen website you would’ve noticed pages loading fast and all sorts of shenanigans, how is it even possible to run all that via a single, lone thread. Well, it’s not really a lone thread, in the sense that JavaScript isn’t doing all the work on its own. It’s simple then it sounds real.