Some JavaScript/React Handy Helper Methods

3 min readNov 12, 2020

Ever found yourself repeating certain functionality over & over across multiple projects? My latest project highlighted that for me. Here are some handy-dandy things that I’m surprised JS/React HASN’T added.

JavaScript is a cool language. It has a lot of functionality & common sense syntax that can be difficult to transition away from. That being said, I’m sure we’ve all realized this by now, but JavaScript is… weird.

Yeah, JS has a seemingly infinite amount of quirks that makes one scratch their head. But that isn’t what this article is about. I’m here for the stuff JS leaves out. Some of the methods I list below seem like no-brainers… why AREN’T they a baseline part of JavaScript? Let’s take a look.

Side note: I’m going to be using the words “inclusive” and “exclusive” a bit throughout the article. If you don’t already know:
Inclusive = includes said number. Exclusive = doesn’t include said number.

Samples & Random Numbers

Looking for a random number, or a random index of an array? Hah! That’s funny! JavaScript can’t help you there!

Wait… really? Yeah. It boggles my mind too.

Well, there is a caveat here — Math.random() is what we have. Only problem? This returns a value between 0 (inclusive) & 1 (exclusive). Let’s mess with this to make some helpful functions.

Array.sample()

Source: https://stackoverflow.com/questions/4550505/getting-a-random-value-from-a-javascript-array

Let’s grab a random element out of an array! Here’s how to quickly set this up.

Array.prototype.sample = function(){
  return this[Math.floor(Math.random() * this.length)]
}

Let’s say we have an array of length 4. Math.random() will always return a value less than 1, and Math.floor will round a number down. This allows us to get a fairly uniform variation of numbers from 0 to 3 (or whatever your array’s length is minus 1). And since we’re applying it to the array prototype, it can be used on any array!

randomNum(min, max)

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

This function will give us a float between a minimum value (inclusive) and maximum value (exclusive).

function randomNum(min, max){
   return Math.random() * (max - min) + min
}

randomInt(min, max)

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

This function will give us an integer between a minimum value (inclusive) and maximum value (inclusive).

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

Some Other Random Helper Methods

Here’s a small sample of nice, unrelated helper functions.

copyOfObject(obj)

Source: https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript

function copyOfObject(obj){
  return JSON.parse(JSON.stringify(obj))
}

This will make a deep copy of an object or array, albeit with some caveats — if you include something with the Date datatype, don’t use this method.

A “deep copy” will not bring references to other arrays/objects nested inside. If we’re working with API data that has objects inside of objects inside of arrays, etc., and we want to edit our copy without editing the original, we need to deep copy.

String.capitalize()

Source: Conrad’s brain

String.prototype.capitalize(){
  return this.slice(0, 1).toUpperCase() + this.slice(1)
}

Pretty simple. Not sure why JS doesn’t have a capitalize function. But there you go.

Finding More Handy-Dandy Helper Methods

Looking for more methods to help make your JS apps easier to work with? Here’s a list of all the references from above, as well as some other compendiums.