DEV Community 👩‍💻👨‍💻

Cover image for Adding Methods to Prototypes, JS
Austin Beaufort
Austin Beaufort

Posted on

Adding Methods to Prototypes, JS

Let's start with a method that already exists:

Array.prototype.reverse()

.reverse() takes an array and reverses it:

const myNumbers = [1, 2, 3, 4, 5, 6, 7];

console.log(myNumbers.reverse()); // outputs [7, 6, 5, 4, 3, 2, 1];
Enter fullscreen mode Exit fullscreen mode

now lets pretend the .reverse() method doesn't exist

Let's make the method ourselves, we will call it .reverse2():

Array.prototype.reverse2 = function() {
    const reversedArray = [];
    this.forEach(item => reversedArray.unshift(item));
    return reversedArray;
}
Enter fullscreen mode Exit fullscreen mode

If the above is confusing, here is the same thing but with comments for clarity:

Array.prototype.reverse2 = function() {
    // create an empty array
    const reversedArray = [];
    // *this* reverses to the array to the left of the
    // .reverse2() method, in our case, *myNumbers*.

    // Here we take each item in myNumbers and add it to the front of reversedArray

    // ex. [1], [2, 1], [3, 2, 1], etc...
    this.forEach(item => reversedArray.unshift(item));
    // return the reversed Array.
    return reversedArray;
}
Enter fullscreen mode Exit fullscreen mode

Now we can use our .reverse2() method we created on any array:

const myNumbers = [1, 2, 3, 4, 5, 6, 7];
console.log(myNumbers.reverse2()); // outputs [7, 6, 5, 4, 3, 2, 1];
Enter fullscreen mode Exit fullscreen mode

still with me?

Here's the crazy bit.
.reverse() doesn't exist for strings 😱 😱 😱

const myString = 'I am writing a sentence';
console.log(myString.reverse()) // error, myString.reverse() is not a function
Enter fullscreen mode Exit fullscreen mode

Let's add .reverse() as a prototype method for Strings.

Array.prototype.reverse2 = function() {
    const reversedArray = [];
    this.forEach(item => reversedArray.unshift(item));
    return reversedArray;
}


const myString = 'I am writing is a sentence'

String.prototype.reverse = function() {
    return this.split('').reverse2().join('');
}

console.log(myString.reverse());
Enter fullscreen mode Exit fullscreen mode

A brief explanation:

  1. we split the string every character:
    ['I', ' ', 'a', 'm'] ... etc.

  2. The string is now an array, which means we can use our .reverse2() method we made for arrays. (or you can use the built in .reverse() array method here).
    ['e', 'c', 'n', 'e', 't', 'n', 'e', 's', ' ', 'a', ' ', 'g'] ... etc

  3. We then join the array back together into a string:
    **ecnetnes a gnitirw ma I"

Thanks for reading, for more tech content you can find me here:
Youtube => https://www.youtube.com/austinbeaufort
Twitter => https://twitter.com/AustinBeaufort

Top comments (2)

Collapse
jonrandy profile image
Jon Randy

Adding to native prototypes is generally a bad idea, unless you're doing it for polyfilling purposes

Collapse
beaufortaustin profile image
Austin Beaufort Author • Edited on

This article demonstrates how to add to native prototypes yes.

Whether it is a good or bad practice is irrelevant to the point of the article.

The article goal is to show how it's done.

Thanks for reading.

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.