Function Object and NFE

Sunil Sharma
Last Updated: May 13, 2022

Introduction

In this blog, we will explain JavaScript functions and how JavaScript treats them. We will look at function expression, how a JavaScript function acts as an object and how we can access the function properties like we access the object properties. 

 

We will discuss why JavaScript functions are also called “action objects”.

So, let’s get started!

JavaScript Functions

As we know, every value has a type. In JavaScript, we can assign functions to variables as we assign any other values like integer, string, etc. 

 

So what is the type of value to which we assign a function? Any guesses?

And the answer is object.

 

The reason being, functions are objects in JavaScript, they are referred to as Function Objects. Functions have properties and methods, and they can be kept in a variable or an array and supplied as arguments to other functions, much like objects.

 

Let’s see some of the properties of functions in JavaScript.

The “name” property

By using this property, we can check the name of our function. The name assigning logic is pretty intelligent in JavaScript. If you created a function without a name, the name is assigned to that function and then printed on the console.

 

We can check the name of any function by using the “.name” property.

 

Let’s take an example and see how it works.

Example: 1

 

 function sayHello() {
  console.log("JavaScript is fun")
};
console.log(sayHello.name); 

Output: sayHello.

 

Example:2

 

 let sayHello = function() {
  console.log("JavaScript is fun")
};
 console.log(sayHello.name); 

Output: sayHello

In example 2, we can see that the function is without any name. In this scenario, the first name is assigned to the function because the function is assigned to a variable named “sayHello”. Its name becomes “sayHello” and appears on the console.

 

If a function is defined as a method of an object, we can also check its name by using this property.

 

Example: 3

let myObject = {

  Hello1() {
    // ...
  },

  Hello2: function() {
    // ...
  }
}
console.log(myObject.Hello1.name);
console.log(myObject.Hello2.name); 

Output:

Hello1

Hello2

 

The exciting part here is that it is not always possible to assign a name to a function, in that case, we have no option but to return an empty string. If your function is assigned as an array value, then we have the array’s name but not the function, then we have no other option but to return an empty string.

 

Example:4

 

let myArr = [function() {}];

console.log( myArr[0].name ); // <empty string>

Output: <empty string>

The “length’ property

This property returns the number of arguments that a function has. You can use this property by “.length” syntax.

 

Example: 5

 

function fun1(arg1) {}
console.log(fun1.length); 

function fun2(arg1, arg2) {}
console.log(fun2.length); 

function manyFun(arg1, agr2, ...more) {}
console.log(manyFun.length); 

Output:

1

2

2

The critical point to note here is that the length property does not consider the rest parameters.

Custom properties

If we want, we can add our custom properties also. But the critical point here is that a function property with the name “callingnumber” and a local variable with the name “callingnumber” are two different and unrelated things.  

 

We can store as many properties as we want in a function, which does not affect the function’s execution.

 

Example: 6

 

function myFun() {
  console.log("JavaScript is fun.");
  
  myFun.callingnumber++;
}
myFun.callingnumber = 0; 

myFun();
console.log( `myFun is Called ${myFun.callingnumber} times.` ); 

myFun();
console.log( `myFun is Called ${myFun.callingnumber} times.` ); 

myFun();
console.log( `myFun is Called ${myFun.callingnumber} times.` ); 

myFun();
console.log( `myFun is Called ${myFun.callingnumber} times.` ); 

Output-           

JavaScript is fun.

myFun is Called 1 times.

JavaScript is fun.

myFun is Called 2 times.

JavaScript is fun.

myFun is Called 3 times.

JavaScript is fun.

myFun is Called 4 times.

Named Function Expression

The function expressions with a name are represented by NFE, a short form for Named Function Expression.

 

Example: 7

 

let myFun = function(place) {
  console.log(`currently, we are in ${place}`);
};

myFun("Delhi");

 

 

Output- currently, we are in Delhi

This is a normal function where a function is assigned to a variable.

 

Example 8

 

let myFun = function func1(place) { // we assigned func1 name to function

  console.log(`currently, we are in, ${place}`);
};

myFun("Delhi");

 

 

Output- currently, we are in, Delhi

The function mentioned above is an example of NFE.

 

Let me clear one thing very quickly, when we give a name to a function like this it does not cause any harm to the function. The function will operate like it was before. So the question is why we are doing this.

A big reason is by doing this, we can reference the function internally. Writing a function like this will help us if we plan to call the same function again inside our function.

 

Let’s understand with an example.

 

Example: 9

 

let myFun = function func1(place) {
  if(place){
  console.log(`currently we are in , ${place}`);
  }
  else{
    func1("Mumbai") // we are using func1 to call itself
  }
};
 
myFun("delhi");
func1(); // we cannot call func1 directly this will give an error

 

 

Here we are calling the same function again if the argument received in “myFun” is empty.

 

But now you think that we can call the same function by using the name “myFun,” and you are correct but think about the scenario when this variable “myFun” will point to the other function in the future because, in JavaScript, you can assign functions to other variables.

 

In that case, you internally call the same function using the name “myFun,” and myFun will be there pointing to another function, or maybe “myFun” is NULL in some scenarios.

 

Let me give you a clear picture with an example.

 

Example: 10

 

let myFun = function (place) {
  if(place){
  console.log(`currently we are in , ${place}`);
  }
  else{
    myFun("Mumbai") // Error: myFun is not a function
  }
};
 
let anotherFun=myFun;
myFun=null;

anotherFun(); // Error: nested myFun does not work anymore

 

 

This problem arises because the function takes “myFun” from its outer lexical environment as no “myFun” is local to the function. And when you are calling the function by outer “myFun,” it is null due to which error occurs.

 

The solution to this problem is NFE (named function expression). Let’s see how we can solve the above problem using the NFE concept.

 

Example: 11

 

let myFun = function func1(place) {
  if(place){
  console.log(`currently, we are in ${place}`);
  }
  else{
    func1("Mumbai")// Now everything works fine
  }
};
let anotherFun=myFun;

myFun=null;
anotherFun(); // nested call will work now

 

 

Output-  currently, we are in Mumbai

 

That is why the NFE concept is vital to understand. An important thing to note here is this NFE concept is only limited to function expressions. For regular function declarations, there is no syntax to provide them with an internal name.

Frequently Asked Questions

1). What is a JavaScript function?

Answer: A JavaScript function is a block of code designed by a programmer to perform a specific task.

 

2).. Why do we use functions?

Answer- The main motive behind writing a function is reusability. We only have to write a function one time, and then we can use it as many times as we want by simply just calling it. 

 

3). Can we use functions as variables?

Answer- Yes, you can use functions as variables. In fact, after assigning your function to a variable, you can use that variable in expressions and calculations.

 

4). What is the difference between a function expression and function declarations?

Answer- The main difference is function name; we can omit function name in the function expression and make our function anonymous 

 

5). What is IIFE?

Answer- IIFE stands for Immediately Invoked Function Expression. This type of function runs as soon as we define it.

Example: (function () {..........})();

Key Takeaways

This blog contains information about how JavaScript treats the function as an object and applies properties on function as we use on objects. The other topic we covered here is Named Function expression (NFE), and we discussed the scenarios where it might be helpful for us.

 

If you want to deep dive into JavaScript and become a great web developer, check out this amazing JavaScript course on web development. Also, if you want to prepare for your interviews and excel in them, visit this JavaScript interview question blog.

 

Happy Reading!

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think