# In the YUI 3 Gallery: Matt Snider's Number Module

**About the author:** Matt Snider is the lead frontend engineer for Mint.com (now a part of Intuit), where he makes extensive use of YUI in the presentation layer. He is also the author of a popular blog on JavaScript. Matt contributed the YUI 2 Storage Utility to YUI and is an active community member; you can see his presentation from YUICONF 2009 on YUI Theater.

Natively, JavaScript has a very limited set of functions for working with numbers located on the global Math object. Mostly these functions are for working with exponents, trigonometry, and rounding. And while these functions are needed and efficient, the Math API has remained unchanged for years, and probably won't be improved anytime in the near future. So it is up to the developers of JavaScript libraries to create and maintain a component for working with numbers.

The Number component in the YUI 3 Gallery, derived from work originally used on Mint.com, aims to fill in missing number-related functionality. It provides a light-weight set of static functions for working with numbers. The Number component weighs in at about 1.8kb after minification and before gzip; it's supported by all A-grade browsers.

One of the features in Number that I use the most is the `format()`

function, which injects a formatted number into a string by evaluating the format of the placeholder number in the string. (Note: This is similar to the formatting support `Y.DataType.Number`

currently provides, but rolls up the separate configuration properties which `Y.DataType.Number.format`

accepts into a single formatting pattern string.) The function works with all symbols, but it formats numbers according to the English standard. Here are a few example of how to use `format()`

from its unit test:

var n = 1111.11, formatDollars = "$0,0.00'" // use comma and decimal when formatting formatPercent = "0.00%", // use decimal when formatting formatRound = "0,000", // use comma when formatting formatText = "Please add the $0,0.00 to my tab!"; Y.Assert.areEqual("$1,111.11", Y.Number.format(n, formatDollars)); Y.Assert.areEqual("1111.11%", Y.Number.format(n, formatPercent)); Y.Assert.areEqual("1,111", Y.Number.format(n, formatRound)); Y.Assert.areEqual("Please add the $1,111.11 to my tab!", Y.Number.format(n, formatText));

Other useful functions include:

: provides an easy API for getting random whole numbers;`random()`

: simplifies the evaluation of number ranges;`isBetween()`

/`isNotBetween()`

: when working with the Math trigonometry functions (such as`radian()`

/`degrees()`

`Math.cos()`

), which expect radians instead of degrees, both`radian()`

and`degrees()`

are useful for converting values.

To use the Number Gallery component, first include the script:

<script src="http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js& gallery-2010.02.22-22/build/gallery-number/gallery-number-min.js"></script>

Then include `'gallery-number'`

in your `use()`

function, to get the following functions:

YUI().use('gallery-number', function(Y) { Y.Number = { degrees(number), format(number, format), getPrecision(number), isNotBetween(number, number, number, boolean), isBetween(number, number, number, boolean), isPrime(number), radians(number), random(number, number), roundToPrecision(number, number) }; });

These functions were modeled after the native Math functions and, like the Math functions, the functions on `Y.Number`

return `NaN`

if the value provided is not a number. If you would like to contribute to the development of or require new features added to Number, please leave a message on the Forum.