How to create your own custom array methods in JavaScript

Hey, it's Huferr.

Today, you will learn how to create your own custom array methods in Javascript.

To understand the process of creating a new method, you must first know what prototype is.

Before continuing, you must know that is not a good practice to change/add methods into natives objects! BUT, understanding how it works is a great way to learn more about the language itself!

🔎 What is prototype in JavaScript?

Every object in JavaScript has a built-in property, which is called its prototype (or __proto__ in most browsers).

The prototype is an object, so the prototype will have its own prototype, making what's called a prototype chain. The chain ends when we reach a prototype that has null for its own prototype.

Simplifying, It keeps the current object methods and allows you to add new properties and methods to objects.

For example, if you console.log(Object.prototype), you'll see something like this:

These are basically object methods that you can use in a common object in JavaScript!

📜 Array object

As you may know, almost everything in Javascript is an object.

It means that we also have an object called Array. Every array is an object in JavaScript:

const myArray = [0,1,2]

console.log(typeof myArray) // 'object'

✅ New array method

Let's create our new custom array method called duplicate().

This method will be responsible for duplicating the current array.

Example:

const numbers = [1,2,3]

const duplicatedNumbers = numbers.duplicate()

console.log(duplicatedNumbers) // [1,2,3,1,2,3]

To add this new method, we need to add our function in the Array object prototype:

Array.prototype.duplicate = ...

Now, we can simply create our function with the needed logic and assign it into this new property we added: duplicate.

To do that, we're going to use the function statement.

You can't use an arrow function in this scenario, since we need the function's this keyword, and it's only available for functions statements.

So, let's create it:

Array.prototype.duplicate = function() {
  const array = this // Just for readability purposes

  return [...array, ...array] // Duplicating the array
}

In this case, the this keyword refers to the array you are using the method.

So, if you do myArray.duplicate(), myArray will be exactly the this inside our function.

🥳 Congratulations! I've created your first custom array method, here's the full code:

Array.prototype.duplicate = function () {
  const array = this // Just for readability purposes

  return [...array, ...array] // Duplicating the array
}

const myArray = [1,2,3]

const duplicatedArray = myArray.duplicate()

console.log(duplicatedArray) // [1,2,3,1,2,3]

Thanks for reading this article! Help spreading knowledge!

Follow me on:

📹 Youtube => https://www.youtube.com/@thehuferr
🧵 X/Twitter => https://twitter.com/the_huferr