JavaScript

The latest Ecma 5 specification adds various interesting methods to the JavaScript Array prototype. Sadly, most browsers do not implement these methods yet, or at least not all of them. Internet Explorer is usually the worst culprit, while the other browsers are still in the process of implementation. So what do you do when you […]

This article was posted by Independent Software, a website and database application development company based in Maputo, Mozambique. Our website offers regular write-ups on technical and design issues, ranging from details at code level to 3D Studio Max rendering. Read more about Independent Software's philosophy, or get in touch with Independent Software.

The latest Ecma 5 specification adds various interesting methods to the JavaScript Array prototype. Sadly, most browsers do not implement these methods yet, or at least not all of them. Internet Explorer is usually the worst culprit, while the other browsers are still in the process of implementation. So what do you do when you want to use some of these methods on an (older) browser that doesn’t support them yet?

JavaScript utility libraries like jQuery and Prototype implement some of these methods, but more typically a set of different methods. If you would like to standardize your methods with the Ecma 5 specification, then you’ll need to do more work.

As it happens, JavaScript allows native objects like Array to be extended by extending their prototypes. If you would like to add a method to the Array prototype, you would do this:

After this code is executed, any other code can now call the hello method on any array. There is no need to instantiate a special array class, or to make any modifications to the code. This is the magic of prototypes:

Adding methods to a prototype in order to extend them to satisfy the Ecma standard is called polyfilling. In this article, we present a set of methods to add to the Array prototype to complete the Ecma 5 specification. All methods are defined within an anonymous function so as not to create namespace conflicts with other code:

isArray

Available since: Ecma 5.1, Chrome 5, Firefox 4.0, IE 9, Opera 10.5, Safari 5

Returns true if arg  is an array.

every

Available since: Ecma 5.1, Chrome, Firefox 1.5, IE 9, Opera, Safari

The every  method tests whether all elements in the array pass the test implemented by the provided function. The every  method executes the provided callback function once for each element present in the array until it finds one where callback returns a falsy value (a value that becomes false when converted to a boolean). If such an element is found, the every method immediately returns false . Otherwise, if callback returned a true value for all elements, every will return true . The callback is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values.

filter

Available since: Ecma 5.1, Chrome, Firefox 1.5, IE 9, Opera, Safari

The filter  method creates a new array with all elements that pass the test implemented by the provided function.

foreach

Available since Ecma 5.1, Chrome, Firefox 5.1, IE 9, Opera, Safari

The forEach  method executes a provided function once per array element.

indexOf

Available since: Ecma 5.1, Chrome, Firefox 5.1, IE 9, Opera, Safari

The indexOf  method returns the first index at which a given element can be found in the array, or -1 if it is not present.

Elements are matched using the ===  operator.  An index can be specified where searching should start (default start index is zero). If a negative index is specified, then the start index is counted from the back of the array where -1 corresponds to the last element in the array.

lastIndexOf

Available since: Ecma 5.1, Chrome, Firefox, IE 9, Opera, Safari

The lastIndexOf  method returns the last index at which a given element can be found in the array, or -1 if it is not present.

Elements are matched using the ===  operator. An index can be specified where searching should start (default start index is zero). If a negative index is specified, then the start index is counted from the front of the array where -1 corresponds to the first element in the array.

 

map

Available since: Ecma 5.1, Chrome, Firefox 1.5, IE 9, Opera, Safari

The map  method creates a new array with the results of calling a provided function on every element in this array.

reduce

Available since: Ecma 5.1, Chrome, Firefox 3.0, IE 9, Opera 10.5, Safari 4.0

The reduce  method applies a function against an accumulator and each value of the array (from left-to-right) has to reduce it to a single value.

reduceRight

Available since: Ecma 5.1, Chrome, Firefox 3.0, IE 9, Opera 10.5, Safari 4.0

The reduceRight  method applies a function against an accumulator and each value of the array (from right-to-left) has to reduce it to a single value.

some

Available since: Ecma 5.1, Chrome, Firefox 1.5, IE 9, Opera, Safari

The some  method tests whether some element in the array passes the test implemented by the provided function.

 

Trackbacks

  1. Extending the JavaScript Array prototype with Ruby methods | Independent Software

Comments

1 One Response to “Extending the JavaScript Array prototype with polyfills”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">