Functions are objects in JavaScript

In JavaScript, functions are indeed objects. This means that, just like any other object in JavaScript, a function can have properties and methods. It’s one of the key features that makes JavaScript a versatile and powerful language.

A function is an instance of the Object type, and it has all the characteristics of Object. This special type of object is what we call a “First-Class Function”. It means that a function can do everything that other objects can do. We can store functions in variables, objects, and arrays. We can pass them as arguments to other functions, and they can be returned by other functions.

Here are some examples to illustrate:

Example 1: Assigning function to a variable

1
2
3
4
5

let greet = function() {
    console.log('Hello, world!');
};

greet(); // Outputs: Hello, world!

In this case, greet is a variable that holds a function.

Example 2: Adding a property to a function

1
2
3
4
5
6
7

let greet = function() {
    console.log('Hello, world!');
};

greet.language = 'English';

console.log(greet.language); // Outputs: English

In this case, we’ve added a language property to the greet function.

Example 3: Passing function as an argument

1
2
3
4
5
6
7
8
9

let greet = function() {
    console.log('Hello, world!');
};

function callFunction(fun) {
    fun();
}

callFunction(greet); // Outputs: Hello, world!

In this case, the greet function is passed as an argument to the callFunction function.

Example 4: Function as a return value

1
2
3
4
5
6
7
8

function createGreeting(name) {
    return function() {
        console.log('Hello, ' + name);
    };
}

let greetJohn = createGreeting('John');
greetJohn(); // Outputs: Hello, John

In this case, createGreeting function returns a new function that uses the name argument.

Closure

The fourth example uses the concept of closure. In this example, the inner anonymous function that is returned by createGreeting has access to the name variable from its outer function, even after the outer function (createGreeting) has finished execution.

This is the fundamental idea of a closure: a function has access to its own scope, the outer function’s scope, and the global scope. Here, the inner function remembers the environment in which it was created, i.e., it “closes over” the name variable from createGreeting, hence the term “closure”. This is why when we call greetJohn(), it can still output “Hello, John” even though the createGreeting function has already completed its execution.

Additional Aspects

Indeed, we’ve touched upon this topic when discussing “functions as values” and “functions as data”. However, there’s always more depth to explore when it comes to the versatile nature of JavaScript functions. Here are some additional aspects to consider:

1. Assigning functions to variables:

Because functions in JavaScript are objects, they can be assigned to variables.

1
2
3
4

const greet = function() {
    console.log("Hello, world!");
};
greet(); // Outputs: "Hello, world!"

2. Storing functions in data structures:

Functions can also be stored within data structures like arrays or objects, which allows you to manage and use groups of functions more easily.

1
2
3
4
5
6

const operations = {
    add: function(a, b) { return a + b; },
    subtract: function(a, b) { return a - b; },
};

console.log(operations.add(5, 3)); // Outputs: 8

3. Passing functions as arguments:

Functions can be passed to other functions as arguments, which allows for higher-order functions and can lead to more flexible and reusable code.

1
2
3
4
5
6

function callTwice(func) {
    func();
    func();
}

callTwice(greet); // Outputs: "Hello, world!" twice

4. Returning functions from other functions:

Functions can also be returned from other functions. This is the foundation of closures and can also be used to create factory functions, among other things.

1
2
3
4
5
6

function multiplyBy(n) {
    return function(x) { return x * n; };
}

const double = multiplyBy(2);
console.log(double(4)); // Outputs: 8

5. Function methods:

As objects, functions have methods. For example, every function has a call and apply method, which allow you to invoke the function with a specific value of this.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const person = {
    name: 'Alice',
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

const anotherPerson = { name: 'Bob' };

person.greet.call(anotherPerson); // Outputs: "Hello, my name is Bob"

These are just some of the ways that JavaScript’s treatment of functions as objects can be used to enable a functional style of programming. This aspect of the language lends itself to powerful and flexible coding patterns.