If an object has methods, we can easily decorate those methods, adding a layer of additional business logic. Arrays are tricky, however, since they allow for both method-based augmentation (ie. push(), pop(), etc.) and direct-index assignment (ie. settings array[index] to some value). For this experiment, I am accepting the fact that I cannot trap direct-index assignment - if the fixed-length queue is to be augmented, it should usually be done so through the use of the native Array class methods.
To make sure that the length of the queue is maintained, I am adding wrappers around the following methods:
The Array class has many more methods than this; however, I felt these were the few methods most likely to cause the length of the array to extend beyond its fixed size. The wrappers act by invoking the given class method followed by a "trimming" method. If items are unshifted onto the head of the array, excess items are removed from the tail. If items are pushed onto the tail of the array, excess items are removed from the head.
Let's take a look at some demo code:
In the above code, I am creating a FixedQueue() of max-length, 3. Then, I'm using a variety of mutation methods to change the queue values. When we run the above code, we get the following console output:
Add [ Tricia, Anna ] to head.
["Tricia", "Anna", "Sarah"]
Add [ Kim, Joanna ] to tail.
["Sarah", "Kim", "Joanna"]
Add [ Nancy ] out of bounds (explicitly).
["Sarah", "Kim", "Joanna", undefined, undefined, "Nancy"]
Add [ Becca ] to tail.
[undefined, "Nancy", "Becca"]
As you can see, using Array class methods like push() and unshift() maintain a max-length of 3 items. But, when we used bracket notation to explicitly set an index value outside of the fixed-length boundaries, the length breaks. If we use other class methods after the "breakage", however, the max-length of the array is, once again, restored.
Want to use code from this post? Check out the license.
great blog, I just found it and will be tuning in!
This example certainly shows the way on how a developer can start building his own data-structures in JS. We can extend this to single linkedlist, double linkedlist, etc.
Excellent stuff !! thanks Ben.
@Ben, Pretty cool, reminds me of a similar assignment we had one of the intro CS courses in college where we had to limit the size of the array, but the index bounds weren't always 0 to n, they could be any range decided by the prof when he tested it.
@Anna, granted, your past work experiences may make you more qualified to say this than when I do, but I still love the fact that if you can't find it, it must not exist :)
@Ben, Thanks for this! I have found a use for it already. I am creating a widget that detects and fires a "shake" event (drag it left and right or up and down with the mouse) and I only want to check the last (n) direction changes to see if they fall within the (time_threshold). This needs to be constantly updated until a shake is fired or detection ceases.
Thanks my man! Glad you enjoyed it :D
The way you described that site, it wouldn't surprise me if it was my website :P
I think building data structures is a lot of fun and can be very useful. On the one hand, it really forces you to think about how the native language works and how the native classes can be extended. But also, they can provide some really useful functionality!
I don't know much about the proxies either and from the few articles that I looked at, they seem massively complex :) Hopefully more stuff will show up on the radar.
Sounds awesome! That's exactly the kind of scenario I had in my head - last N instances of something. That way, you can just keep push()ing and don't have to worry about maintenance.
@Ken... :) right...if I can't find it, it doesn't exist. Oh. Wait a minute. That means there is a whole heck of a lot of stuff out there that doesn't exist (in spite of my previous abilities of being able to find a lot of stuff)
@Alex, that sound pretty cool, and something like I would be trying to do. I like those JS's where you chase the thingies around the page with the mouse. Those are always fun and interesting.
@Ben, as long as she was a brunette. :P I'm sorry, I just happen to have a thing for brunettes. :)
This looks pretty nice. I was just about to try to do something like this for my JsTrace (jstrace.codeplex.com) object's internal message storage
Is your code under any particular license? JsTrace is dual under GPL 2 and MIT. I was wondering if I may use this in there.
If so, how would you like me to credit you?
If not, that's cool too.
Thanks for the interesting read...
P.S. I think about code in bed all the time.. thus my blog name :)