Fun with JavaScript Numbers and Prototype

One of the things that makes JavaScript so portable is it's intentionally minimal library of built-in functions. By reducing the assumption that some off-the-wall function is available in a given version, we are nearly guaranteed that our scripts will work in any environment.

However, this also means that a bit more work as to be done on the part of the developer to create basic functions that might otherwise be available in other languages. The good news is that the need for these common functions has been lingering for many years, so most are readily available on the web.

This lack of built-ins brings rise to another powerful feature of the language though. Because it's assumed that many functions will need to be created to operate on primitive data types, JavaScript provides us with the prototype property on function objects. Prototype allows us to easily add new methods to built-in objects (classes) "on-the-fly". Meaning, if you've already instantiated a numeric variable, any method you add to the Number prototype will automatically, and instantly be applied.

So, let's have some fun with Number's prototype!
 

Is Number between x and y

This function isn't going to win any awards, but don't you think it looks cleaner than: if(x >= 5 && x <= 10) ?

Number.prototype.between = function(x,y) {
    return (this.valueOf() >= x && this.valueOf() <= y)
}

> x = 10;
> x.between(5, 15);

  true

Safe division (avoiding divide by zero issues)

I get the divide by zero problem, you can't divide anything into 0 parts, unless you're Chuck Norris. But, as far as 90% my web apps are concerned, divide by zero isn't some cool abstract concept, they just want a return value of zero (or maybe N/A).

But, instead, I need to perform checks every time I do a division operation, to make sure the result isn't "infinity", as returned by JavaScript when you divide by zero.

I'm not a fan of having dozens of useless conditions floating around my code. Instead, I'd like to add a level of abstraction to the divide by zero concept, letting my code think that the result is always zero. Further, I'd like to encapsulate that into a function.

Number.prototype.safeDivideBy = function(x) {

    var result = this.valueOf() / x;
    if(result === Infinity) {
        return 0;
    }
    else {
        return result;
    }
}

> x = 10;
> x.safeDivideBy(0);

  0


Convert to currency string

Your used to seeing currency related functions on the server-side, but with all this rich web application developer going around, a good set of currency-related functions might come in handy. Here's a start!

Number.prototype.currency = function() {
    return '$' + (parseFloat(this.valueOf()).toFixed(2)).toString();
}

> x = 10
> x.currency

  "$10.00"

 

Random numbers

I can't actually recall ever needing a random number between 0 and 1, but that's what JavaScript's random() function gives you. That's what any good random() function should give you. It's our job to build on that function for the specific needs of our application. In most cases, this means multiplying the result by a number, then rounding to an integer. Not bad, but this could be encapsulated into a function just as easily:

Number.prototype.randomMax = function() {
    // return a random number with a maximum value of x
    return Math.floor(Math.random() * (this.valueOf() + 1));
}

> x = 10
> x.randomMax();

  3

 

Existence in an array

If you've ever read "Code Complete" by Steve McConnell, you probably recall his discussion about Programming Into a Language. He was referring to the concept of tailoring a language to suit your development needs, rather than adjusting your needs to fit the limitations of the language. Prototype is one way we can achieve this within JavaScript.

I used to do a fair amount of Python development, and came to love the in keyword syntax. It was so flexible in determining existence of one variable in a list or array. For example:

'test' in 'testing'

'test' in ['test', 'test1']

9 in [9, 10, 11]

I came to love it so much, that I just had to have it in my JavaScript development!

Number.prototype.in = function(array) {
    var arrayLength = array.length;
    for(var i=0; i < arrayLength; i++) {
        if (array[i] === this.valueOf()) return true;
    }
    return false;
}

> myArray = [5,6,7,8]
> x = 1
> x.in(myArray)
  false

> x = 7
> x.in(myArray)
  true

Why follow me on Twitter?

  • I tweet about new technologies, services or libraries I find interesting
  • Yeah, sometimes I'll post a pet-peeve or rant about something trivial
  • If I discover something that made my web development life easier, I share it
  • I'll shout out any handy tip that I think might be useful to other devs


Tagged , , .

Updated: 2012-10-24

Phil LaNasa follow us in feedly
  • http://www.squarific.com Filip Smets

    Well written altough I would have liked to see even more examples cause they were great.

  • Liam

    Out of interest, why are you using <code>.valueOf()</code>? This seems to work for me:
    <code>
    Number.prototype.between = function(x, y) {
      return (this >= x && this <= y);
    }
    </code>
     

    • admin

      Both work, I was just being more explicit.