Codementor Events

The infamous loop

Published Feb 14, 2019
The infamous loop

The infamous loop is so much infamous in Javascript, that every JS veteran must have come
across this, atleat once in lifetime.
What I found that, it remains no more frightful and infamous, once you know what it is.
I no more find it so much deadly.
What is it?
Here is what I have understood:
In a loop construct of Javascript language, there is a counter variable which keeps track of how many times the loop has iterated. And there is another place, where we store, how many times, the loop has to be iterated. I am calling it ‘maxcount’. This is a ‘must’ thing for ‘for’ loops, but we can arrange it in different way, in while loops.
And once, the control goes out of the loop, the ‘counter’ variable is equal to the ‘maxcount’. It still has that value.
This is true, atleast for Javascript.
Take this snippet, you will find widely, in any site or blog about the subject ‘infamous loop’.

****function addLinks () {
for (var i=0, link; i<5; i++) {
link = document.createElement("a");
link.innerHTML = "Link " + i;
link.onclick = function () {
alert(i);
};
document.body.appendChild(link);
}
}

window.onload = addLinks;****

found that, this example is so ‘infamous’, so ‘infamous’, that you can find it, atleast at a dozon of places discussing this subject.

This example appends five links to the document, with a function attached to its onclick event.
I assume that you are certainly clever and witty enough to know, that as I am presenting this apparently obvious example, there must be something messy about it.
Actually, there is nothing messy.
The variable ‘i’ is incremented in every iteration, and at the end, it is ‘5’
So each link will show an alert ‘5’, and not ‘1’ , ‘2’ , ‘3’ , ‘4’ , ‘5’, as you might expect.
When you are burried inside a heap of so many thousands lines of code, even if you know these things,
sometimes you commit these kind of ‘mistakes’.
The remedy is to stop work for a while, ( I mean for short duration, not the while loop)
Take a walk of 10-15 minutes (only), and then have a look at the code, compeletely in detached stance,as if it is someone else’s code.

This is another ‘infamous’ example.

**function doSomething(msg) {
console.log(msg);
}

var messages = [ "hello", 42, { pi: 3.14 } ];
var buffer = []; // 1

for(var i = 0; i < messages.length; ++i) {
buffer[i] = function() { // 2
doSomething(messages[i]);
}
}

// ...

**for(var j = 0; j < buffer.length; ++j) {
bufferj; // ****

Found here: http://bitingcode.blogspot.in/2012/10/the-javascript-infamous-loop-problem.html
To quote the lines from the same above place:

What happened here? The problem is that the loop variable is not actually such. So, when in (3) we call doSomething() through the buffer, the index is the current value (actually, the length of the message array) and not its value when in (2) we assigned the function to the buffer.

Then, what after all, is ‘Closure’?
My dear friends, what else was I discussing for last couple of posts?
This is Closure, as far as I have understood.
Understanding Scopes, inside blocks, global space, inside functions and loops, inside loops
and recursive loops, recursive functions, functions inside functions, that’s all.
I came across so many programmers, who actually use this kind of complex things, without actually knowing what it called, and, other way, I came across, some others, who know all this, but hardly can handle the actual complexity while coding.
I came across some mind boggling statements while reading about closures, like,
when you are defining a function, you are actually defining a closure.
Anything enclosed within “{” and “}” is actually a closure.
The better approach, IMHO, is dig in as much as, the job requires. Understand how it works, as well as, theory behind it.
Don’t get immersed so much in terminology, that you forget the implementation, and don’t get involved so much in implementation, that you ignore the theory.
And here is the Closure.

Discover and read more posts from Avinash Ketkar
get started