Skip to main content

Array magic in JavaScript

I was trying to create a queue to collect all the element related functions to run after the elements had been created. As I was Googling, I came by this snippet.
var calls = [];

function executeNext(next) {
    if(calls.length == 0) return;
    var fnc = calls.pop();
    fnc();
    if(next) {
        executeNext(true);
    }
}

/*To call method chain synchronously*/
calls.push(callMe3);
calls.push(callMe2);
calls.push(callMe1);
executeNext(true);

/*To call method chain asynchronously*/
calls.push(callMe3);
calls.push(function(){
    callMe2();
    executeNext(false);
});
calls.push(function(){
    callMe1();
    executeNext(false);
});
An array was a perfect fit with the built in push() and pop() function. I also needed something that would work the pop() till the array was empty. As Douglas Crockford says in his wonderful book 'JavaScript: the good parts', arrays are actually (slightly disguised) objects. So one can simple add to the native methods that the array variable already has simply by declaring it and then use it. This would be truly elegant and very readable.
The Html Code used
<p id="demo1">
<br>Click the button to call the new ucase() method, and display the result.</p>
<br><button onclick="myFunction()">Try it</button>
And the JavaScript used
var fruits = ["Banana1", "Orange1", "Apple1", "Mango1"]
fruits.myUcase=function()
{
for (i=0;i<this.length;i++)
  {
  this[i]=this[i].toUpperCase();
  }
}

function myFunction()
{
fruits.myUcase();
var x=document.getElementById("demo1");
x.innerHTML=fruits;
}
Demo 1:
Click the button to call the new ucase() method, and display the result.

When one declares a new array, one simply inherits a prototype- this is called prototypal inheritence. JavaScript gives us the power to change this prototype itself. Since the array is actually an object, one can simply add methods directly to the array prototype. From w3school's reference page
<p id="demo2">
Click the button to create an array, call the new lcase() method, 
<br>and display the result.</p>
<button onclick="myFunction2()">Try it</button>
And the javascript
Array.prototype.myLcase=function()
{
for (i=0;i<this.length;i++)
  {
  this[i]=this[i].toLowerCase();
  }
}

function myFunction2()
{
var fruits2 = ["BANANA2", "OrAnGe2", "APpLE2", "mANgO2"];
fruits2.myLcase();
var x=document.getElementById("demo2");
x.innerHTML=fruits2;
}
Demo 2:
Click the button to create an array, call the new lcase() method,
and display the result.

As mentioned before, since the prototype for Arrays has been changed to add a new method myLcase() to change all the elements in the array to lower-case, it should be able to use this method myLcase() in the previously declared array fruits (used in the demo1.).
function myFunction3()
{
fruits.myLcase();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
The HTML is the same as in the first Demo.
Demo 3:
Click the button to call the new lcase() method on the fruits variable
and display the result.

This means that the methods added to the Array prototype would be usable even in the case of previously declared array variables. So the way of declaration affects the scope of the method. The term Scope itself is worthy of another blog post.

Since my specific need was to create a array to which one functions would be added which would empty it one by one and use them individually as an argument to the function given as an argument to the method added to the already declared array variable. To put it more simply, f is a function given as an argument to the added method popall. While actually using this method, the argument given is alert, which means the actual function happening when f(this.pop()) is alert(this.pop()) .
      stack = []
      stack.popall=function(f){
        if(this.length == 0) return this;
        while(this.length != 0) f(this.pop());
        return this;
      };

      stack.push('ah');
      stack.push('ah1');
      stack.push('ah2');
      stack.push('ah3');
And the html-
<button onclick=alert(stack.pop())>pop</button>
<button onclick=stack.push('ah'+stack.length.toString())>push</button>
<button onclick=stack.popall(alert)>empty</button>
<button onclick=stack.popall(alert).push('empty!')>empty n push</button>
Demo:

Comments

Post a Comment

Popular posts from this blog

Yo mama so geeky : generating jokes using Markov Chains

A few days back, I saw this article “ How to fake a sophisticated knowledge of Wine with Markov Chains ” on the programming subreddit. To my utter delight, the article referenced the code, along with a very detailed explanation, so I spent an hour getting it all to work. The hour taken was no fault of the original authors, it was taken because I wanted to get a good hang of XPath, which will be the topic of a later post. The program auto-generates wine reviews, by using Markov Chains to come up with a sequence of most probable trigrams. It was great fun spouting my expert-level sommelier reviews, especially considering that I can count on one hand the number of times I have actually tasted wine! The reviews were just the right amount of ambiguous with a hint of snobbishness (which, according to me, just made the whole thing perfectly more believable). While I was showing off my new-found expertise in wines, my partner in crime,  Rupsa , told me it could probably be used for ot...

Wicktionary Bookmarklet

A bookmarklet is defined by Wictionary as "A small piece of JavaScript code stored as a URL within a bookmark". I have been using bookmarklets to make my life easier from a long time. Some that I use regularly are [Read Now] : This makes it really easy for me to read pages which are unreadable. [Google Translate] : Translates pages [Mobilise This] : Formats the page for mobile viewing by Google. [Acronym lookup] : This helps me find the meanings for abbreviations. The links in [] brackets are bookmarklets. Just drag them to your bookmark bar. I picked these up from these two pages. There is also a whole website dedicated to them bookmarklets. As a developer, what i like about bookmarklets is that they are coded in JavaScript and i can meddle with them till my heart's content, without worrying about breaking anything. However, i wanted a bookmarklet that would allow me to look up meaning of words. Wiktionary was my open dictionary of choice. They d...

The first half of 2017 in review

Hi people, Half the year is over and i think its good to list out things, so that i have an idea as to how i am doing with my studies ( and pretty much everything else ). It's been a wonderful and fulfilling half year, to be honest. I did a lot of things I always wanted to do.  I started experimenting with hydroponics - haven't really progressed much, but I am sure I will do something substantial in the other half of the year. Benefits are a lot over traditional way, and the joy of watching your plants grow are invaluable, at the least. I read a few books on history. I have always wanted to do this , but I always had an excuse or 2 to avoid it. I finally started, and it's brought me a sense of childlike wonder, something I sorely missed. I cleaned my home! That's 20 years of procrastination right there! It was insane but I got it done. Whew! And wow!  At the beginning of the year, i finished my re-study of the CS subjects. Post February, i opened th...