mrspoonzy at gmail Cube by Noah Ellman A powerful javascript toolkit, in research © by Noah Ellman

Extensions To Javascript's Native Prototypes

Object extend(...)
String trim()
Array each(...)
Function bind(...)
Number isFloat()
Date create(...)
Math rand(...)

Jwee extends Javascript's native objects with additional functions. These functions can be shortcuts for many common things are and thus are very useful and also can help keep your code concise and clean. It is recommended you familerize yourself with what's available here.!

It is also possible to create your own custom prototypes, just like these. To do that, you would do something like this:

Show me how!

Important Concept - Functions VS Methods

If it says function next to the item, it means it is a static function, like or Object.toJSON(). For Object.toJSON() and ALL of the Object functions you must pass to the function your object in question. For example:

var obj = {};
obj.firstName = "Sally";
obj.lastName = "Smith";
Object.extend(obj, {phoneNumber: "1-405-555-5555"} ); 
// We just added her phone number to the 

// Or if we had another object which had data 
var obj2 = { middleName: "Joe"; }
// Then we can add them together, or extend the main obj with the properties from the 2nd.
Object.extend( obj, obj2 );

So basically, Object.extend(...) needs the object to extend as the first argument. The return value is of no importance, because in JavaScript objects are remembered when they are passed ((also known as passed by reference)).

The basic native javascript object behavior cannot be changed. No Javascript frameworks dare touch the 'prototype' of the Object.


If it says method next to the item, it means its a prototype method, and is a method on the instance. For example String.trim() does not exist. You would use .trim() directly on the string variable. For example:

var str = "hello extra spaces  ";
str = str.trim();
if( str.contains("hello" ) ) {  // then true  }


Extensions to the javascript Object are NOT prototype methods, they are just part of the Object object. Call these functions like this:

var obj = new Object();  // create new object = "bar"; // create some properties = "foo";

// the keys() function will return an array of properties
// that belong to the object

var props = Object.keys( obj );
// props will = ['foo','bar']

// you CANNOT do this
var props = obj.keys();

// In javascript, objects themselves to not get extented.

function Object.extend(...)( object to,  object from )
Add all the properties/methods of the second object to the first one. (Overwrites).
  1. {object} The object that will be extended
  2. {object} Any object with properties or methods
ReturnsThe first object is passed back
function Object.merge(...)( object,  [ object . . . ] )
Merge the properties and values from multiple objects.
  1. Unlimited number of objects
ReturnsA new object is returned with everything
function Object.values(...)( object )
Returns an array of all the values in the object.
  1. Any object with properties or functions
function Object.keys()( )
function Object.size(...)( object )
Get the length or number of properties in the object
  1. Any object with properties or functions
function Object.recycle(...)( object )
Delete the variable and its contents, freeing resources. (theoretically).
  1. Any object with properties or functions
??? toQueryString?
function Object.toJSON(...)( mixed )
Retun JSON encoding representation of the argument.
  1. Any object with properties or functions
function Object.toString()
Return string representation of the argument.
  1. Any object with properties or functions


method String.trim()
Removes any leading or trailing whitespace (if any) from string.
Returns{string} new string
method String.test(...)( RegExp pattern )
Test is a the string matches the provided regular expression
Example$('mydiv').className.test(/ ?hover/)
method String.contains(...)( string needle )
Check if passed string is contained in string.
??? right?
method String.capitalize()
Capitalize the string. Makes "foObAr" into "Foobar".
Returns{string} new string
method String.suffix()
Like parseInt() but the opposite, gets the alphabetic part of a string, like "px" from "200px"
Returns{string} new string
method String.camelize()
Converts a CSS property string to its javascript equvalent, such as "font-size" to "fontSize".
Returns{string} new string
method String.entities()
Convert special chars like “</var>” to their HTML entities, like “</var>”
Returns{string} new string
??? toJSON?


method Array.each(...)( function | string )
Run through every item in the array and do something.
  1. The function to apply to each item in the array.
NotesThe "this" in your function is current item in the array. The first argument of your function is also the item, and the 2nd argument is the array position.
ImportantThis is a important function/property to know.
method Array.indexOf(...)( mixed needle )
Search the array for needle
  1. A value of any type to search the array for
ReturnsReturns index of -1 if not found
method mixed needle )
Search the array for needle
  1. A value of any type to search the array for
ReturnsReturns index or null if not found
??? filter?
method Array.random()
Get a random value from the array
??? toJSON?


method Function.bind(...)( object thisVariable )
Permanently set what the variable this refers to in the function. If you are making your own class you can use bind to lock any function to your class. Also, once you called bind, the function itself is bound when you call your function with the .fire() method.
  1. The object to become the this variable.
ReturnsA new function with the binded this.
ImportantThis is a important function/property to know.
method Function.later(...)( number millaseconds )
Executes function after xx millaseconds.
  1. Millaseconds delays before running function.
ImportantThis is a important function/property to know.
??? callLater?
??? applyLater?
method Function.interval(...)( number millaseconds )
Executes this after xx millaseconds, repeatedly. Use method .cancel() to stop.
  1. Millaseconds delays before running function.
method Function.cancel()
Cancels the previous timeout or interval set with later()
NotesNo arguments needed, because the timer information is stored interally within the function.

The interval() and cancel() method work together to help you manage javascript timeouts. Any function, be it a built-in function, a jwee function, an element method, or an anonymous function, they all will support these methods and all the Function methods in this section. Calling .interval(250) on a function for example, would cause it to execute every 250 millaseconds from then on. With jwee however, you do not have to keep track of timer IDs in order to cancel timers. Simple by calling the .cancel() on the function or method, the previous interval will automatically be canceled. If none exists, then it will just just do nothing.


method Number.isFloat()
See if the number is a float (decimal number)
Returns{true | false}
method Number.toPaddedString(...)( int length,  int radix )


function Date.create(...)( string )
Get dates by saying things like now + 1 day
  1. {string} Something like: "now+2days", "2 hours ago", "+1month"
Returns{Date} A new Date object set with your specified datetime.
??? now?
function Date.stamp()
??? toJSON?


function Math.rand(...)( number or float min,  number or float max )
Get a random number between |min| 5uand max. Accepts decimals too.
  1. {number | float} Minimum
  2. {number | float} Maximum
Returns{number | float}

Very useful function, saves alot of work. Examples:

// Move the element to a random top pixel between 100 and 1000 px. = Math.rand(100,1000).px();

// Math.rand understand floats also!
var decimal = Math.rand(1.5, 3.5);

// To get the decimal value between 0 and 1 you can do this:
Math.rand( 0.0, 1.0 );

// Without the decimal arguments, it would return either 0 or 1
Math.rand( 0, 1 );

Discussion on /code-javascript-prototypes

Jwee Ninja 11/05/14 :  

I need angry emoticons. And @Xymon: sure.

Admin 11/05/14 :  

I think I feel like doing a complete revival and redesign of the jwee website. I want to stomp out jquery with my 1000% more effecient animation engine.

TheDoctor 11/05/14 :  

What's going on here?