Exploration of Advanced Function Concepts in JavaScript

Well what do you know about functions in JavaScript? Functions are one of the fundamental building blocks in JavaScript. Everyone has heard the above sentence about functions. But functions are more than just building blocks. They are OBJECTS in JavaScript. They behave like objects because they are a special type of object called callable objects. This means that functions can have properties and methods just like regular objects, but they can also be invoked (called). Let us look into it: 1) Functions can have properties: You can add properties to a function just like would with an object. function greet() { console.log("Hello!"); } greet.language = "English"; console.log(greet.language); //Output: English. Even though greet looks like just a function, since functions are objects in JS, you can add properties to them like greet.language. 2) Functions can have built-in properties: "Functions have built-in properties like .name (function's identifier) and .length (number of parameters). function add(a, b) { return a + b; } console.log(add.name); // Output: "add" (name of the function) console.log(add.length); // Output: 2 (number of parameters). 3) Functions can be assigned to variables: Functions can be treated as values and assigned to variables. const sayHi = function () { console.log("Hi!"); }; sayHi(); // Output: "Hi!" The function is assigned to sayHi variable. 4) Higher order functions: A higher-order function is a function that does at least one of the following: Takes another function as its argument, or Returns a function as its result. Functions as arguments function wow(){ console.log("wow function executed"); } function cute(fn) { fn(); } cute(wow); //output: wow function executed wow is a function that was passed as an argument to our cute function. The sole purpose of cute is to execute the function it receives as an argument. Functions which returns another functions function first(mul1) { return function (mul2) { return mul1*mul2; } } const f = first(10); const s = f(9);//executing the f function console.log(s); //Output: 90 You're creating a function that returns another function — a classic higher-order function. It captures (remembers) the first value (mul1 = 10) using a closure, and then uses it when the returned function is later called with mul2 = 9. 5) Functions Can Be Used as Constructors: Functions can be used to create objects using the new keyword. function c(firstName) { this.firstName = firstName; } const obj = new c("Batman"); console.log(obj.firstName);// Output: Batman The function c is a constructor used to create objects. When you use new c("Batman"), it creates a new object and sets its firstName property to "Batman". The this.firstName = firstName line stores the passed value in the object. Finally, console.log(obj.firstName) prints "Batman". 6) Functions have a prototype: Functions have a prototype property, which is used when creating objects via constructors. function Animal() {} Animal.prototype.speak = function () { console.log("I am an animal"); }; const dog = new Animal(); dog.speak(); // Output: "I am an animal" Now let us see some more characteristics of Functions with examples. difference between arrow functions and regular functions in JS. Arrow functions do not have their own this whereas regular functions have their own this, which depends on how they’re called. In regular functions, this refers to the object that called the method — in this case, ob. Arrow functions don’t have their own this — they use the this of the outer scope (likely window or globalThis) arrow functions cannot be used as constructors in JavaScript. If you try to use an arrow function with the new keyword, it will throw a TypeError. Regular functions have an internal method called [[Construct]], which is required to create objects when using the new keyword. Constructors rely on their own this to initialize new objects, which arrow functions cannot provide. Prototype of Functions: Prototype: Every function in JavaScript has a prototype property, which is an object. When a function is used as a constructor (with the new keyword), the prototype object becomes the prototype of the newly created object. Prototype vs proto: The prototype and proto properties help establish inheritance between objects. The prototype property exists on constructor functions and defines shared methods and properties that will be available to all instances created by that function. On the other hand, every object has an internal proto property (often pronounced "dunder proto"), which points to the prototype of the constructor function that created it. You can think of a constructor function as a mold, and objects as the items shaped by that mold. The prototype lets us see or modify the mo

Apr 24, 2025 - 11:46

Exploration of Advanced Function Concepts in JavaScript

Well what do you know about functions in JavaScript?

Functions are one of the fundamental building blocks in JavaScript.
Everyone has heard the above sentence about functions. But functions are more than just building blocks. They are OBJECTS in JavaScript. They behave like objects because they are a special type of object called callable objects. This means that functions can have properties and methods just like regular objects, but they can also be invoked (called).
Let us look into it:

1) Functions can have properties:
You can add properties to a function just like would with an object.

function greet() {
    console.log("Hello!");
}
greet.language = "English";
console.log(greet.language); //Output: English.

Even though greet looks like just a function, since functions are objects in JS, you can add properties to them like greet.language.

2) Functions can have built-in properties:
"Functions have built-in properties like .name (function's identifier) and .length (number of parameters).

function add(a, b) {
    return a + b;
}
console.log(add.name); // Output: "add" (name of the function)
console.log(add.length); // Output: 2 (number of parameters).

3) Functions can be assigned to variables:
Functions can be treated as values and assigned to variables.

const sayHi = function () {
    console.log("Hi!");
};
sayHi(); // Output: "Hi!"

The function is assigned to `sayHi` variable.

4) Higher order functions:
A higher-order function is a function that does at least one of the following:

Takes another function as its argument, or
Returns a function as its result.

Functions as arguments

function wow(){
    console.log("wow function executed");
}
function cute(fn) {
    fn();
}
cute(wow); //output: wow function executed

wow is a function that was passed as an argument to our cute function. The sole purpose of cute is to execute the function it receives as an argument.

Functions which returns another functions

function first(mul1) {
    return function (mul2) {
        return mul1*mul2;
    }
}
const f = first(10); 
const s = f(9);//executing the f function 
console.log(s); //Output: 90

You're creating a function that returns another function — a classic higher-order function.
It captures (remembers) the first value (mul1 = 10) using a closure, and then uses it when the returned function is later called with mul2 = 9.

5) Functions Can Be Used as Constructors:
Functions can be used to create objects using the new keyword.

function c(firstName) {
    this.firstName = firstName;
}
const obj = new c("Batman");
console.log(obj.firstName);// Output: Batman

The function c is a constructor used to create objects.
When you use new c("Batman"), it creates a new object and sets its firstName property to "Batman".
The this.firstName = firstName line stores the passed value in the object.
Finally, console.log(obj.firstName) prints "Batman".

6) Functions have a prototype:

Functions have a prototype property, which is used when creating objects via constructors.

function Animal() {}
Animal.prototype.speak = function () {
    console.log("I am an animal");
};
const dog = new Animal();
dog.speak(); // Output: "I am an animal"

Now let us see some more characteristics of Functions with examples.

difference between arrow functions and regular functions in JS.

Arrow functions do not have their own this whereas regular functions have their own this, which depends on how they’re called.

In regular functions, this refers to the object that called the method — in this case, ob.

Arrow functions don’t have their own this — they use the this of the outer scope (likely window or globalThis)

arrow functions cannot be used as constructors in JavaScript. If you try to use an arrow function with the new keyword, it will throw a TypeError.

Regular functions have an internal method called [[Construct]], which is required to create objects when using the new keyword.

Constructors rely on their own this to initialize new objects, which arrow functions cannot provide.

Prototype of Functions:

Prototype: Every function in JavaScript has a prototype property, which is an object. When a function is used as a constructor (with the new keyword), the prototype object becomes the prototype of the newly created object.

Prototype vs __proto__: The prototype and __proto__ properties help establish inheritance between objects. The prototype property exists on constructor functions and defines shared methods and properties that will be available to all instances created by that function. On the other hand, every object has an internal __proto__ property (often pronounced "dunder proto"), which points to the prototype of the constructor function that created it. You can think of a constructor function as a mold, and objects as the items shaped by that mold. The prototype lets us see or modify the mold itself, while __proto__ allows an object to access and inherit features from the mold it came from.

When we define a regular function, it automatically gets a prototype property. This is used when the function is invoked as a constructor. So if you do const obj = new First();, then obj.__proto__ === First.prototype. obj.__proto__ points to first.prototype. That’s why the comparison is true.

Note 1:- prototype property is not available for arrow functions.
Note 2:- Though __proto__ can be used to access an object's prototype, it's generally recommended to use Object.getPrototypeOf(obj) for modern code.

That brings us to the end of this article.
These are the concepts I thought would be helpful... Any feedback is heartily welcomed.

Have a great one,Bye