Where do array methods come from?

Some of you mave have heard that everything in JavaScript is an object. This is a big concept and probably requires a series of blog posts to explain. But, instead of wondering down that rabbit hole, let's try to understand this idea within the context of arrays.

If everything in JavaScript is an object, does that mean arrays are objects too? Yes! But if you're like me, you want some actual proof before you believe an outrageous statement like this. Let's look at a couple of ways to demonstrate that an array really is an object under the hood.

Proof #1: Using the typeof keyword

First, we can use the typeof keywords to tell us what type a variable is. If you pop open your Developer Tools console, throw this block of code in there.

const arrayExample = [1, 2, 3];
const whatIsTheType = typeof arrayExample;
console.log(whatIsTheType); // 'object'

The string object should have been logged. Crazy, eh?!

Proof #2: Using Array "Methods"

The word "method" in JavaScript infers there is an object involved. A method is basically a function defined on an object property. And since we are going to explore array methods, we can safely assume arrays are objects since they have methods.

Let's open our DevTools again and create a simple array and assign it to a variable:

const arr = [1, 2, 3];

Like any other object with a method, try using dot notation to access the join method.

arr.join();

Cool, right!?

Maybe you're not as impressed as I am, but if you take a minute to ponder it, this idea of built in methods is really powerful. We can use them at our disposal anytime we are working with an array.

To go a little deeper on this concept, consider how might these methods be available to use on every array?

The Array and its prototype

There are multiple ways of creating an array in JavaScript. The most common way is using literal notation and the other way is using the Array() constructor.

const arrayLiteralNotation = []; // literal notation
const arrayConstructor = new Array(); // Array constructor

Both literal notation and the Array constructor create a new instance of the Array object. Let's open our DevTools console again and insert this:

console.log(Array.prototype);

You'll see the prototype object logged and all its methods. These are our Array methods and are available to use with any array we construct.

The concept of the prototype is powerful and if you want a better understanding of how it works, I recommend checking out the MDN article on prototypes. The prototype allows our new array to inherit properties from the Array object–like the Array methods map(), join(), etc.

Remember, any new array you create is an instance of the Array object. The Array object contains a bunch of methods that live on its prototype, in which our new arrays inherit.

☝️ Takeaway

The array methods we often use like map, forEach, reduce are inherited from the Array object. Everytime we create a new array, whether by using literal notation or the Array constructor, we are creating a new instance of the Array object. And with that new instance of Array comes our handy Array methods.