ES6 in Action: New Number Methods

This article covers new and improved number methods in ES6 (ECMAScript 6).

It’s part of a series about the new features of ES6, in which we’ve also discussed new methods available for the String and Array data types, but also new types of data like Map and WeakMap.

I’ll introduce you to the new methods and constants added to the Number data type. Some of the number methods covered, as we’ll see, aren’t new at all, but they’ve been improved and/or moved under the right object (for example, isNaN()). As always, we’ll also put the new knowledge acquired into action with some examples. So, without further ado, let’s get started.

Number.isInteger()

The first method I want to cover is Number.isInteger(). It’s a new addition to JavaScript, and this is something you may have defined and used by yourself in the past. It determines whether the value passed to the function is an integer or not. This method returns true if the passed value is an integer, and false otherwise. The implementation of this method was pretty easy, but it’s still good to have it natively. One of the possible solutions to recreate this function is:

Number.isInteger = Number.isInteger || function (number) {
  return typeof number === 'number' && number % 1 === 0;
};

Just for fun, I tried to recreate this function and I ended up with a different approach:

Number.isInteger = Number.isInteger || function (number) {
  return typeof number === 'number' && Math.floor(number) === number;
};

Both these functions are good and useful but they don’t respect the ECMAScript 6 specifications. So, if you want to polyfill this method, you need something a little bit more complex, as we’ll see shortly. For the moment, let’s start by discovering the syntax of Number.isInteger():

Number.isInteger(number)

The number argument represents the value you want to test.

Some examples of the use of this method are shown below:

// prints 'true'
console.log(Number.isInteger(19));

// prints 'false'
console.log(Number.isInteger(3.5));

// prints 'false'
console.log(Number.isInteger([1, 2, 3]));

A live demo of the previous code is shown below and is also available at JSBin.

JS Bin on jsbin.com

The method is supported in Node and all modern browsers, with the exception of Internet Explorer. If you need to support older browsers, you can employ a polyfill, such as the one available on the Mozilla Developer Network on the methods page. This is also reproduced below for your convenience:

if (!Number.isInteger) {
  Number.isInteger = function isInteger (nVal) {
    return typeof nVal === 'number' &&
      isFinite(nVal) &&
      nVal > -9007199254740992 &&
      nVal < 9007199254740992 &&
      Math.floor(nVal) === nVal;
  };
}

Number.isNaN()

If you’ve written any JavaScript code in the past, this method shouldn’t be new to you. For a while now, JavaScript has had a method called isNaN() that’s exposed through the window object. This method tests if a value is equal to NaN, in which case it returns true, or otherwise false. The problem with window.isNaN() is that it has an issue in that it also returns true for values that converted to a number will be NaN. To give you a concrete idea of this issue, all the following statements return true:

// prints 'true'
console.log(window.isNaN(0/0));

// prints 'true'
console.log(window.isNaN('test'));

// prints 'true'
console.log(window.isNaN(undefined));

// prints 'true'
console.log(window.isNaN({prop: 'value'}));

What you might need is a method that returns true only if the NaN value is passed. That’s why ECMAScript 6 has introduced the Number.isNaN() method. Its syntax is pretty much what you’d expect:

Number.isNaN(value)

Here, value is the value you want to test. Some example uses of this method are shown below:

// prints 'true'
console.log(Number.isNaN(0/0));

// prints 'true'
console.log(Number.isNaN(NaN));

// prints 'false'
console.log(Number.isNaN(undefined));

// prints 'false'
console.log(Number.isNaN({prop: 'value'}));

As you can see, testing the same values we obtain different results.

A live demo of the previous snippet is shown below and is also available at JSBin.

ES6 New Number Methods on jsbin.com

The method is supported in Node and all modern browsers, with the exception of Internet Explorer. If you want to support other browsers, a very simple polyfill for this method is the following:

Number.isNaN = Number.isNaN || function (value) {
  return value !== value;
};

The reason this works is because NaN is the only non-reflexive value in JavaScript, which means that it’s the only value that isn’t equal to itself.

Number.isFinite()

This method shares the same story as the previous one. In JavaScript there’s a method called window.isFinite() that tests if a value passed is a finite number or not. Unfortunately, it also returns true for values that converted to a number will be a finite number. Examples of this issue are demonstrated below:

// prints 'true'
console.log(window.isFinite(10));

// prints 'true'
console.log(window.isFinite(Number.MAX_VALUE));

// prints 'true'
console.log(window.isFinite(null));

// prints 'true'
console.log(window.isFinite([]));

For this reason, in ECMAScript 6 there’s a method called isFinite() that belongs to Number. Its syntax is the following:

Number.isFinite(value)

Here, value is the value you want to test. If you test the same values from the previous snippet, you can see that the results are different:

// prints 'true'
console.log(Number.isFinite(10));

// prints 'true'
console.log(Number.isFinite(Number.MAX_VALUE));

// prints 'false'
console.log(Number.isFinite(null));

// prints 'false'
console.log(Number.isFinite([]));

A live demo of the previous snippet is shown below and is also available at JSBin.

ES6 New Number Methods on jsbin.com

The method is supported in Node and all modern browsers, with the exception of Internet Explorer. You can find a polyfill for it on the method’s page on MDN.

Continue reading %ES6 in Action: New Number Methods%

by Aurelio De Rosa via SitePoint