JavaScript Function Objects

In the world of JavaScript, a function is known and said to be an object and often called a function objects just like an array why is that?

  • Function objects come in the form of key-value pairs the other objects don't.
  • To elaborate this we have to know the Primitive and non-primitive types which establish functions as objects.
  • All functions in javascript are objects with the exception are primitive values
  • We have some of the primitive values such as number, string, null, boolean, etc which are immutable means they cannot be changed.
  • We have non-primitive values such as functions, arrays, objects which are mutable means they can be changed and are often called objects and are stored in memory for reference.

As you can see these functions come under the category of non-primitive which generally means when you gonna use a function it means you are probably using an object.

This concludes that functions are first-class citizens meaning functions are values that can be passed around since they are objects.

Simple as that.

Let us dive into some real case scenarios and prove that functions are objects.

function helloWorld(){
    console.log("Hello World")
}

console.log(helloWorld)

Output: [Function: helloWorld]

  • The following function returns the output in key-value pair as function objects are in the form of key-value pair where other objects don't return like that.

Assign and log a function

function hokage() {
    let sName = 'Obito';
    console.log(`My favorite hokage is ${sName}`);
  }
hokage()  
  // Let's assign property.
  hokage.otherShinobis = ['Minato', 'Sarutobi', 'Tobirama'];
  
  // Let's assign function.
  hokage.showHokage = function () {
    return this.otherShinobis;
  };
  
  // Let's log hokage function.
  console.log(hokage);

Output

My favorite hokage is Obito
[Function: hokage] {
  otherShinobis: [ 'Minato', 'Sarutobi', 'Tobirama' ],
  showHokage: [Function]
}
  • Here the function Hokage instead of behaving like a function it is behaving like an object where we have assigned some variables to the functions and used another function in that name to log that with the same original Hokage function.
  • We were successfully able to assign properties and methods to that.

As we mentioned earlier functions are first-class citizens which means they are more than assigned.

Store functions in a variable

// stored in a variable. (Function expression)
const uchiha = function () {};

// stored in an array.
const listOfUchihas = ['itachi', 5, uchiha];

// stored in object.
const thisIsAnObject = {
  showListOfUchihas: function () {},
};

console.log(uchiha)
console.log(listOfUchihas)
console.log(thisIsAnObject)

Output:

[Function: uchiha]
[ 'itachi', 5, [Function: uchiha] ]
{ showListOfUchihas: [Function: showListOfUchihas] }

Here we can see that they can be stored in variables too.

Pass Functions As Parameters

// Function declaration
function hokage() {
    return 'Naruto';
  }
  
  // Function declaration with params
  function logHokage(func) {
    return func();
  }
  
  // Passing hokage as a parameter in logHokage
  console.log(logHokage(hokage)); 

Output: Naruto

  • Here we can see that functions can also be used as a parameter to be passed in another function to return that value.

Now we can say for sure that functions are objects but if you have noticed while our coding examples:

  • We may have noticed this showHokage: [Function] why does it return to function?.
  • It is because they are not only objects they are function objects meaning besides all the fun things like assigning properties and methods to them, they have already built-in properties and methods too.
  • This is defined by function objects.

Conclusion:

To conclude this article we can understand that functions are not some kind of unique chosen one or a special thing we use while coding instead it is just objects which has some built-in with special methods and properties that can be distinguished easily from a regular object.

Fri, 12/10/2021 - 14:15

Authored by

Ashwin is working with iVagus as a Technical Lead. He has experience in various technologies like Cypress, JavaScript, TypeScript, Rest Assured, Selenium, Cucumber, and Java.
Tags