How Arrays and Functions Are Also Objects in JavaScript

You’ve started learning about objects in JavaScript and understand that they’re data structures that store information as key-value pairs.

But then you come across something surprising: functions and arrays are also considered objects. How does the basic idea of key-value pairs apply to arrays and functions? Do they inherit from Object.prototype like other objects?

This can feel unclear, so let’s break it down and see how arrays and functions also work as objects in JavaScript.

Arrays

When you create an array, it has some default key-value pairs that are part of its internal structure. These are primarily methods and properties that JavaScript provides for working with arrays.

• Indices: The numeric indices (e.g., 0, 1, 2, ...) are the keys, and the values are the elements of the array.

• length: This is a special property that represents the number of elements in the array. The key is "length", and the value is the number of elements.

let arr = [10, 20, 30];

console.log(arr[0]); // 10 (key: "0", value: 10)
console.log(arr.length); // 3 (key: "length", value: 3)

Just as objects can inherit, arrays also inherit from both Object.prototype and Array.prototype, so they have properties from both such as:

• push: A function to add elements to the end of an array.

• pop: A function to remove the last element of an array.

• map: A function that creates a new array by applying a function to each element.

• filter: A function that creates a new array with all elements that pass a test.

• forEach: A function that executes a provided function once for each array element.

Functions

Functions also have default key-value pairs such a

• name: The name of the function (if it is a named function). The key is "name", and the value is the name of the function.

• length: The number of parameters the function expects. The key is "length", and the value is the number of parameters.

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet.name); // "greet" (key: "name", value: "greet")
console.log(greet.length); // 1 (key: "length", value: 1)

Same as arrays, functions also inherit methods from Function.prototype, such as:

• call: A method that calls a function with a given this value and arguments provided individually.

• apply: A method that calls a function with a given this value and arguments provided as an array.

• bind: A method that creates a new function that, when called, has its this keyword set to the provided value.

Functions are a special type. They can be called, unlike regular objects. For example:

function func() {}
const obj = {};

func(); // Works fine
obj(); // Error! Cannot be called

JavaScript internally marks these objects as callable based on how they’re created. Objects made with {} can’t be called, but objects created with function syntax (like function) can be.

To conclude, although arrays and functions behave differently, they share the same underlying structure of key-value pairs and inherit properties and methods just like any other object in JavaScript.