Study JavaScript #3 – Function Objects

by

1. Functions in JavaScript Are Objects

In JavaScript, functions are not just blocks of reusable code; they are also objects. This means that a function can have properties and methods just like any other object.

Example:

JavaScript
// Function declaration
function add(x, y) {
    return x + y;
}

// Adding properties to the function
add.result = add(3, 2);
add.status = "OK";

console.log(add.result);  // 5
console.log(add.status);  // "OK"

2. Functions Are First-Class Citizens

Functions in JavaScript are treated as first-class objects, which means they can:

  • Be created using literals
  • Be assigned to variables, array elements, or object properties
  • Be passed as arguments to other functions
  • Be returned as values from other functions
  • Have properties dynamically assigned to them

2.1 Assigning Functions to Variables or Properties

JavaScript
var value = function() { return 100; };
var obj = {};
obj.test = function() { return 200; };

console.log(value());   // 100
console.log(obj.test()); // 200

2.2 Passing Functions as Arguments

Functions can be passed as arguments to other functions, enabling higher-order functions.

2.3 Returning Functions

A function can return another function, allowing dynamic function creation.

JavaScript
function outerFunction() {
    return function() {
        console.log("Inner function executed!");
    };
}

var inner = outerFunction();
inner(); // Output: "Inner function executed!"

3. Built-in Properties of Function Objects

JavaScript functions have built-in properties and methods, inherited from Function.prototype. These include name, length, caller, arguments, and prototype.

Example:

JavaScript
function sampleFunction(x, y) {
    return x + y;
}

console.dir(sampleFunction);

Key Properties Explained:

  • name: The name of the function (empty for anonymous functions)
  • caller: The function that invoked this function (deprecated in strict mode)
  • arguments: An array-like object containing passed arguments (deprecated)
  • length: The number of expected parameters
  • prototype: A property used when the function is a constructor

3.1 length Property

The length property indicates the number of parameters the function expects.

JavaScript
function test0() {};
console.log(test0.length); // 0

function test1(x) { return x; };
console.log(test1.length); // 1

function test2(x, y) { return x + y; };
console.log(test2.length); // 2

3.2 prototype Property

Every function in JavaScript has a prototype property, which points to an object used for inheritance when the function is used as a constructor.

JavaScript
function MyFunction() {
    return true;
}

console.dir(MyFunction.prototype);
console.dir(MyFunction.prototype.constructor);

Understanding prototype vs. __proto__

Both prototype and __proto__ refer to prototype objects but serve different roles:

  • __proto__: Refers to the prototype of an object instance.
  • prototype: Refers to the prototype object associated with a constructor function.

When a function is created, JavaScript automatically assigns it a prototype object with a constructor property pointing back to the function itself.

JavaScript functions are more than just code blocks; they are powerful objects with unique properties that enable flexible and dynamic programming. Understanding these concepts allows developers to write more efficient and expressive code.

Leave a Comment