A function in JavaScript is an object, because,
- Functions contain properties like objects
- We can add new properties or read the properties
- We can pass a function to another function along with its properties and data
- We can return a function along with its properties and data
- It belongs to the JavaScript prototype chain
Talk is cheap, show me your code
Let's see these statements in action,
Functions contain property
We can get a function name just like object properties,
function getBestRockBandInBd() {
return 'Warfaze';
}
console.log(getBestRockBandInBd.name); // getBestRockBandInBd
Here we see, when we create a function, it has the property of name
that can be printed just like object properties.
When we create a function, it internally creates an object with the following properties,
- Code (We can invoke them using
functionName()
) - name (Stored the function name, not applicable for the arrow functions)
We can add new properties or read the properties
We can use the function to store property and retrieve it later,
function bestPsychedelicRockBandInBd() {
return 'Sonar Bangla Circus';
}
bestPsychedelicRockBand.foo = 'bar';
console.log(bestPsychedelicRockBand.foo); // bar
Here we set a property foo
to the function bestPsychedelicRockBand
and later print it in the console.
We can pass a function to another function along with its properties and data
Let's pass a function to another function and do the execution,
function nemesis(whoIsVocal) {
console.log(whoIsVocal()); // `whoIsVocal` function comes as parameter
}
// We will pass this function to `nemesis` function as parameter
function showVocalName() {
console.log('Zohad');
}
nemesis(showVocalName);
We can return a function along with its properties and data
Now like an object, we will return a function from another function,
function anotherRockBand() {
// We are returning function named `aurthohin`
return function aurthohin() {
console.log('This is Aurthohin');
}
}
const returnedFunction = anotherRockBand();
returnedFunction();
This feature power up the JavaScript closure
feature.
It belongs to the JavaScript prototype chain
We know the base object Object
has a property called prototype
,
console.log(Object.hasOwnProperty('prototype')); // true
If we create a function, we can see, the function also has the property prototype
,
function crypticFate() {}
console.log(crypticFate.hasOwnProperty('prototype')); // true
We can invoke a function using call
, bind
and apply
. Interestingly these are not function's own property, we can verify this,
function crypticFate() {}
console.log(crypticFate.hasOwnProperty('call')); // false
console.log(crypticFate.hasOwnProperty('bind')); // false
console.log(crypticFate.hasOwnProperty('apply')); // false
Actually, these properties are inherited from the prototype chain and native to the base object. To verify,
function crypticFate() {}
console.log(crypticFate.__proto__.hasOwnProperty('call')); // true
console.log(crypticFate.__proto__.hasOwnProperty('bind')); // true
console.log(crypticFate.__proto__.hasOwnProperty('apply')); // true
Final thoughts
As we see these 5 points, mentioned above, functions are just objects in JavaScript world. Let me know your thoughts on this.