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!
Also Read About, Javascript hasOwnProperty
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.
84+ registered