dean.edwards.name/weblog/2007/12/javascript/

base2.JavaScript

At the risk of boring everyone with this flood of posts about base2…

base2.JavaScript is a base2 package that fixes JavaScript’s built-in objects much like base2.DOM fixes the DOM.

It provides three “pseudo-subclasses”:

Array2
Adds support for generics, array extras (forEach(), map(), reduce() etc) and some additional base2 methods (combine(), contains(), copy(), extend(), flatten(), insertAt(), item(), pluck(), remove(), removeAt(), swap())
Date2
Adds support for new ES4 methods (now() and toISOString()). The parse() method is also ISO-aware.
String2
Adds support for generics and adds a trim() method.

I’ll talk about Array2 here but what I’m about to say also applies to Date2 and String2. All of the additional methods that base2 provides apply to both instances of Array2 and the static Array2 object (generics). Here is an example using Array2 as a constructor:

var array2 = new base2.JavaScript.Array2(1, 2, 3);
array2.insertAt(0, 99);
print(array2); //=> 99, 1, 2, 3

You can also use the insertAt() as a static method of the Array2 object:

var array1 = [1, 2, 3];
base2.JavaScript.Array2.insertAt(array1, 0, 99);
print(array1); //=> 99, 1, 2, 3

Array2 can be used to cast an existing array. So this also works:

var array2 = base2.JavaScript.Array2([1, 2, 3]);
array2.insertAt(0, 99);
print(array2); //=> 99, 1, 2, 3

You could use the Array2 constructor to cast the built-in Array prototype so that all arrays are base2 arrays. However, if you do this the static methods of Array2 are not copied. Instead you can use base2.JavaScript.bind(window) to immediately upgrade JavaScript’s built-in objects. This will upgrade the prototypes of Array, Date and String and will copy all of the static methods too. Note that if the methods are already defined on the native objects then they will not be overwritten.

base2.JavaScript.bind(window);

var array1 = [1, 2, 3];
array1.insertAt(0, 99);
print(array1); //=> 99, 1, 2, 3

If you don’t want to augment JavaScript’s built-in objects but would still like easy access to Array2 etc. then simply evaluate the base2.JavaScript namespace in the global scope:

eval(base2.JavaScript.namespace);

var array2 = new Array2(1, 2, 3);
array2.insertAt(0, 99);
print(array2); //=> 99, 1, 2, 3

The JavaScript namespace is automatically imported into base2 packages so you don’t need to specify it in the imports property.

That’s it. The JavaScript package is included in the base2 core so you don’t have to include any extra files. I hope that it provides a flexible way to access all those sexy new Array methods with the option to upgrade the built-in objects.

Comments (15)

Leave a comment

take that risk! it is great to have documentation w/ examples. The more you post the stronger my interest in taking another look at base2 grows. I typically am using jQuery, but now will be looking at the base2 option as well!

thanks…. post away!

  • Comment by: Wade Harrell
  • Posted:

No risk of boredom here.

Thanks for all the informative posts about Base2, these are answering a lot of questions I’ve been wondering about.

And congratulations on the beta milestone!

@Wade/Richard – thanks! I will continue to post then. There is still a lot more functionality packed into that 6KB that warrants discussion.

  • Comment by: -dean
  • Posted:

Bored no. Interrested yes !

Thanks fos these posts !

  • Comment by: Blog info
  • Posted:

More, more!:)

self != bored. Very nice explanation for newcomers!:)

  • Comment by: Ole
  • Posted:

I was bored when I first read this, but the second time I understood;-)

  • Comment by: Paul
  • Posted:

Dean,

Sorry if this is a dumb question but why did you decide to use Array2, Date2, and String2 instead of either modifiying the native objects or just use base2.JavaScript.Array since it is in a custom namespace?’

Thanks for the great work!

  • Comment by: Justin
  • Posted:

@Justin:

eval(base2.JavaScript.namespace);

allows the developer to import the JavaScript namespace into the local scope. Mozilla browsers would use this new Array constructor when creating arrays (even if you use the [..,..,..] notation). This is a peculiarity of Mozilla’s JavaScript implementation but is annoying enough to mean that I had to alias the new constructor as Array2.

  • Comment by: -dean
  • Posted:

@Paul, similar story I’ve been reading through most of these base2 posts. And I have to admit I had to read it a few times before I understood it fully, and not at the discredit of deans explanation (because they are very good.)

  • Comment by: Andy D
  • Posted:

I’m not sure if this affects the Package or not, (I’m assuming is does though) but a “security enhancement” in Firefox 3 will no longer let you override a slew of “core” Objects; String, Date and Array among them.

http://developer.mozilla.org/en/docs/Updating_web_applications_for_Firefox_3#JavaScript_changes

  • Comment by: Pat Denny
  • Posted:

@Pat – this does not affect base2 in any way.

  • Comment by: -dean
  • Posted:

You are not boring, actually this is quite interesting. I had a lot of problems with JS DOM, and I have recently stumbled upon your base2 package. I must say that it made my life much more simple:)Just keep up with the good work, we need more stuff like this…

i do not use base2, but i have looked at the code and do use foreach that you wrote, a good routine. i have been working on typeof issues lately and to do that i was using foreach to look how a custom typeof method compared to native typeof. but i was running into issues with foreach of String.prototype. the reason is that String.prototype has length so when you try to foreach it, instead of looping thru it as an object, it does it as an array-type object and you get nothing (String.prototype has length=0).

  • Comment by: mark oakley
  • Posted:

i should have added that this issue appears in msie.

  • Comment by: mark oakley
  • Posted:

Comments are closed.