So tonight I'm going to stray a bit from the camp fire "Here's a billion links, go learn" and unleash some of the magic of JavaScript. There are a few tricks that I am absolutely astonished that most web developers are completely unaware of... So I hope you enjoy! (All code samples linked below can be seen in action here)

  • JavaScript objects are essentially glorified associative arrays. "What is an associative array?" I'm glad you asked, a normal array is a collection of objects you access through their index in the collection. Assume you have the following array:

    var funTimes = ["The Dentist", "The Flu", "Hunting", "Fishing", "A Prostate Exam"];

    Because this is a standard array you would get at "Hunting" by saying funTimes[2]. An associative array is a collection of key, value pairs. So I could have:

    var moreFun = new Array();
    moreFun["Hunting"] = "Deer";

    This allows me to access the index "Hunting" to return the value "Deer"! So what does this have to do with JavaScript variables. First and foremost very few people know about JavaScripts for/in keyword. The importance of this with JavaScript objects is that it allows you to iterate across the variable names in the object!



This outputs: "Name, Gender, Occupation, FavoriteFood"

  • Next having seen the for/in combo in action, you might know what is coming up next! The difference between the statement information["FavoriteFood"] and information.FavoriteFood is purely syntax. This allows the following:



...but wait... if that works then....



Yes, this concept is the one that amazes me that so few JavaScript "Experts" do not know. It opens a whole new set of doors for clever architectures and experiments into insanity.

  • Next up is abusing the prototype library to make any base JavaScript object do your bidding.



This has an amazing result, it prints every variable in the object you call VulgarDebug on with the associated value! This includes functions, even VulgarDebug itself! (I did add a condition to remove VulgarDebug = ... from the JSFiddle but you can easily comment it out and see for yourself)

So why is this so powerful? For example IE8 and lower do not have the indexOf(..) function. This is a HUGE buzz kill because it is an important function to have! This means that you can extend the JavaScript base Array object and manually add in the indexOf(..) function yourself.

The awesomeness doesn't just end there... The sky is the limit and the power is at your finger tips.

  • Finally some neatness with JavaScript objects and JQuery. Some know about this one... more than the prior examples but I figured I would toss it in for fun.

    JQuery exposes a method called "extend" which will over-write or "extend" properties of one object into another object and merge the two together. This is really neat for many reasons even past the really off the wall dumb example I am using it in!




Well that is all I have for tonight! Please feel free to start commenting with requests of additional topics you would like to see me cover. If it is not something I know I will do the research and we can discover it together! Always keep pushing the boundaries and never stop learning!

(We shall see if the JSFiddle embeds below, if it does... these are the live samples I have screen shots shown above)