Help refactoring functions...

[cjl]

Hey all:

I have the following (ugly) code:

function preload()
{
if (cr_series.length >1) preloadCR();
if (ct_series.length >1) preloadCT();
if (mr_series.length >1) preloadMR();
if (us_series.length >1) preloadUS();
if (xr_series.length >1) preloadXR();
}

function preloadCR()
{
cr_images = new Array();
for (var loop = 0; loop <= (cr_series.length-2); loop++)
{
cr_images[loop] = new Array();

for (var i = 0;i<4;i++)
{
cr_images[0] = new Image();
cr_images[0].src = "images/cr" + (loop+1) + "_" + (i+1) + ".jpg";
}
}
}

function preloadCT()
{
ct_images = new Array();
for (var loop = 0; loop <= (ct_series.length-2); loop++)
{
ct_images[loop] = new Array();

for (var i = 0;i<4;i++)
{
ct_images[0] = new Image();
ct_images[0].src = "images/ct" + (loop+1) + "_" + (i+1) + ".jpg";
}
}
}


As you can see, the two preload functions (and the others I didn't
paste here) are all but identical, except for the names of the arrays
created and used.

I am a beginner, and having trouble writing a generic function that
could do the same thing, but be called with a paramater:

if (cr_series.length > 1) preload('cr');

I don't know how to take the passed paramated and use it on the 'left'
side of an expression to dynamically create a variable name, etc....
can anyone point me in the right direction?

thanks,
cjl

 

[RobG]

Hey all:

I have the following (ugly) code:

function preload()
{
if (cr_series.length >1) preloadCR();
if (ct_series.length >1) preloadCT();
if (mr_series.length >1) preloadMR();
if (us_series.length >1) preloadUS();
if (xr_series.length >1) preloadXR();
}

function preloadCR()
{
cr_images = new Array();
for (var loop = 0; loop <= (cr_series.length-2); loop++)
{
cr_images[loop] = new Array();

for (var i = 0;i<4;i++)
{
cr_images[0] = new Image();
cr_images[0].src = "images/cr" + (loop+1) + "_" + (i+1) + ".jpg";
}
}
}

function preloadCT()
{
ct_images = new Array();
for (var loop = 0; loop <= (ct_series.length-2); loop++)
{
ct_images[loop] = new Array();

for (var i = 0;i<4;i++)
{
ct_images[0] = new Image();
ct_images[0].src = "images/ct" + (loop+1) + "_" + (i+1) + ".jpg";
}
}
}


As you can see, the two preload functions (and the others I didn't
paste here) are all but identical, except for the names of the arrays
created and used.

I am a beginner, and having trouble writing a generic function that
could do the same thing, but be called with a paramater:

if (cr_series.length > 1) preload('cr');

That's the right idea...

When posting code, use indents of 2 or 4 spaces, not tabs, and manually
wrap lines at about 70 characters to prevent auto-wrapping. It makes
life for those who would reply much easier.

I don't know how to take the passed paramated and use it on the 'left'
side of an expression to dynamically create a variable name, etc....
can anyone point me in the right direction?

Call a function that creates the array, then return a reference to it to
the original function (I presume you want to make these global). Do you
want to load the images into 'cr_series', 'ct_series', etc. or a new
variable?

I'll presume that you created 'cr_series' etc. as a global variables
elsewhere and that you want to load the images into them. It seems that
the parameter you pass is the directory name where the images are
stored, so I've passed it as a string.

I'm also a bit bemused about the '+1' bit. It's much easier to make
everything zero-indexed, but if you can't change that I guess you just
have to work with it (but it makes the code more obtuse and more
difficult to maintain).


function preload() {
if (cr_series.length > 1) cr_series = loadArray('cr');
if (ct_series.length > 1) ct_series = loadArray('ct');
// and so on...
}

function loadArray( parm ) {
var A = [];
for (var loop=0, len=(cr_series.length-2); loop<=len; loop++) {
A[loop] = [];

for (var i=0; i<4; i++ ) {
A[0] = new Image();
A[0].src = 'images/' + parm + (loop+1)
+ '_' + (i+1) + '.jpg';
}
}
return A;
}

A is local to the 'loadArray()' function. It creates the array, then
returns a reference to it to the calling function (preload). Because a
reference persists, the array stays alive.

Here is a more concise version of the loadArray function:

function loadArray( d ) {
var A = [];
var j, i = cr_series.length; // no '- 2' ... see below

while ( --i ) {
A = [];
j = 5; // not 4 ... see below

while ( --j ) {
A[j] = new Image();
A[j].src = 'images/' + d + i + '_' + j + '.jpg';
}
}
return A;
}

I've used a pre-decrement operator ( --i ) so that i will have values
inside the while loop of (whatever-it-is-set-at - 1) down to 1 (when it
hits zero the while exits *before* doing the loop content). Same for j.
Saves all the +/-1 stuff.

You may want to pass the value for j as a parameter too, hard-coding '5'
inside the loadArray function reduces it's re-usability.

Untested of course, but it should work (OK, maybe a little debugging
required...).

 

[cjl]

Rob:

Thanks for the quick reply. I will follow your advice for posting code
in the future.

I'll presume that you created 'cr_series' etc. as a global variables
elsewhere and that you want to load the images into them. It seems that
the parameter you pass is the directory name where the images are
stored, so I've passed it as a string.

You presumed correctly. There is a subdirectory named 'images'. In it
the user will place the relevant images, adhering to a naming
convention. If there are for example two series of CR images and one
series of CT images, the directory might contain "cr1_1.jpg, cr1_2.jpg,
cr1_3.jpg,cr1_4.jpg, cr2_1.jpg, cr2_2.jpg, ct1_1.jpg, ct1_2.jpg,
ct1_3.jpg, ct1_4.jpg, ct1_5.jpg" etc, you get the picture. Then the
user edits the arrays in a seperate js file, such that in this example
there would be:

cr_series = [4,2,0];
ct_series = [5,0];

I'm also a bit bemused about the '+1' bit. It's much easier to make
everything zero-indexed, but if you can't change that I guess you just
have to work with it (but it makes the code more obtuse and more
difficult to maintain).

Some of the users will not understand zero-index, and the naming
convention for the images will suffer.

function preload() {
if (cr_series.length > 1) cr_series = loadArray('cr');
if (ct_series.length > 1) ct_series = loadArray('ct');
// and so on...
}

function loadArray( parm ) {
var A = [];
for (var loop=0, len=(cr_series.length-2); loop<=len; loop++) {
A[loop] = [];

for (var i=0; i<4; i++ ) {
A[0] = new Image();
A[0].src = 'images/' + parm + (loop+1)
+ '_' + (i+1) + '.jpg';
}
}
return A;
}

I think there is a problem with this code, which is exactly the
question I was trying to ask in my original post.

Your code has cr_series.length "hard-coded" into the loadArray
function. This array actually needs to change depending on the
paramater passed to the function. If I want to preload CR images, then
cr_series.length is fine, but your example would not work for CT
images.

Let me try to explain the generic function I would like to write. If
the passed parameter is "cr", then it should create an
(multidimensional)array cr_images like my original code does. If I pass
"ct" then it should created a (multidimensional) array ct_images.
These arrays will then be accessed later in the code.

something like:
preload(foo)
{
'foo'_array = code goes here;
}

Is this possible?

thanks again,
cjl

 

[cjl]

Hey guys;

Another thought just occured to me...
is eval() what I am looking for to dynamically create variables, etc.?

-CJL

 

[cjl]

Hey all:

I've got an extremely ugly refactored function working, using eval()

function preload()
{
if (cr_series.length >1) preloadIt('cr');
if (ct_series.length >1) preloadIt('ct');
}

function preloadIt(what)
{
eval("" + what + "_images = new Array();");

for (var loop = 0; loop <= eval("" + what + "_series.length-2");
loop++)
{
eval("" + what + "_images[loop] = new Array();");

for (var i =0; i < eval("" + what + "_series[loop]"); i++)
{
eval("" + what + "_images[0] = new Image();");
eval("" + what + "_images[0].src = \"images/" + what + "\" +
(loop+1) + \"_\" + (i+1) + \".jpg\";");
}
}
}

whew. I guess it keeps me from repeating myself, but I bet if I look at
this code in the morning I won't remember what I did.

Is there another way to accomplish this, without eval() ?

-CJL

 

[Lee]

cjl said:

Rob:

Thanks for the quick reply. I will follow your advice for posting code
in the future.

I'll presume that you created 'cr_series' etc. as a global variables
elsewhere and that you want to load the images into them. It seems that
the parameter you pass is the directory name where the images are
stored, so I've passed it as a string.

You presumed correctly. There is a subdirectory named 'images'. In it
the user will place the relevant images, adhering to a naming
convention. If there are for example two series of CR images and one
series of CT images, the directory might contain "cr1_1.jpg, cr1_2.jpg,
cr1_3.jpg,cr1_4.jpg, cr2_1.jpg, cr2_2.jpg, ct1_1.jpg, ct1_2.jpg,
ct1_3.jpg, ct1_4.jpg, ct1_5.jpg" etc, you get the picture. Then the
user edits the arrays in a seperate js file, such that in this example
there would be:

cr_series = [4,2,0];
ct_series = [5,0];

I'm also a bit bemused about the '+1' bit. It's much easier to make
everything zero-indexed, but if you can't change that I guess you just
have to work with it (but it makes the code more obtuse and more
difficult to maintain).

Some of the users will not understand zero-index, and the naming
convention for the images will suffer.

function preload() {
if (cr_series.length > 1) cr_series = loadArray('cr');
if (ct_series.length > 1) ct_series = loadArray('ct');
// and so on...
}

function loadArray( parm ) {
var A = [];
for (var loop=0, len=(cr_series.length-2); loop<=len; loop++) {
A[loop] = [];

for (var i=0; i<4; i++ ) {
A[0] = new Image();
A[0].src = 'images/' + parm + (loop+1)
+ '_' + (i+1) + '.jpg';
}
}
return A;
}

I think there is a problem with this code, which is exactly the
question I was trying to ask in my original post.

Your code has cr_series.length "hard-coded" into the loadArray
function. This array actually needs to change depending on the
paramater passed to the function.

I think that was an oversight in his code.
Simply change "cr_series.length" to "window[parm+'_series'].length".

Global variables can be referenced as attributes of the window Object
using this "bracket" notation.

 

[cjl]

Lee:

What is the difference, if any, between using eval() and using the
window Object "bracket" notation you described?

-CJL

 

[Lee]

cjl said:

Lee:

What is the difference, if any, between using eval() and using the
window Object "bracket" notation you described?

The bracket notation is more efficient and is also easier to debug.
Using eval() requires invoking the Javascript compiler for each use.

 

[RobG]

Rob:
[...]

cr_series = [4,2,0];
ct_series = [5,0];

Consider getting rid of the trailing '0' element, it makes life more
difficult.

Some of the users will not understand zero-index, and the naming
convention for the images will suffer.

C'est la vie.

function preload() { [...]
}

I think there is a problem with this code, which is exactly the
question I was trying to ask in my original post.

Your code has cr_series.length "hard-coded" into the loadArray
function. This array actually needs to change depending on the
paramater passed to the function. If I want to preload CR images, then
cr_series.length is fine, but your example would not work for CT
images.

Ok, so the number of series is the length of the array, and the number
of images in each series is given by the values of the elements. So
pass the array and extract the values from it.

Let me try to explain the generic function I would like to write. If
the passed parameter is "cr", then it should create an
(multidimensional)array cr_images like my original code does. If I pass
"ct" then it should created a (multidimensional) array ct_images.
These arrays will then be accessed later in the code.

something like:
preload(foo)
{
'foo'_array = code goes here;
}

Is this possible?

Start from where you declare cr_series (dropping the trailing '0'):

cr_series = [4,2]; // declared as a global

Now call preload():

function preload() {
if ( cr_series.length > 1 ) cr_images = loadArray( cr_series, 'cr' );
...
}

function loadArray( x, d ) {

// x is reference to cr_series array, d to directory name
// The number of series to load (2) is the length of x
var j, i = x.length;
var A = [];
while ( i-- )

// the number of images to load (j) is in the array
j = x;

// Make the ith element of A an array
A = [];

// load the images
while ( j-- ) {
A[j] = new Image();
A[j].src = 'images/' + d + (i+1) + '_' + (j+1) + '.jpg';
}
}
return A;
}

And that's it.

cr_images[0][0] = 'images/cr1_1.jpg'
cr_images[0][1] = 'images/cr1_2.jpg'
cr_images[0][2] = 'images/cr1_3.jpg'
cr_images[0][3] = 'images/cr1_4.jpg'
cr_images[1][0] = 'images/cr2_1.jpg'
cr_images[1][1] = 'images/cr2_2.jpg'


Here's a test script:

<script type="text/javascript">

var cr_series = [4, 2];

function preload() {
if ( cr_series.length > 1 ) cr_images = loadArray( cr_series, 'cr' );
}

function loadArray( x, d ) {
var j, i = x.length;
var A = [];
while ( i-- ){
j = x;
A = [];
while ( j-- ) {
A[j] = new Image();
A[j].src = 'images/' + d + (i+1) + '_' + (j+1) + '.jpg';
}
}
return A;
}

// Call preload
preload();

// Have a look at cr_images
var msg = [];
for ( var m=0; m<cr_images.length; m++){
for ( var p=0; p<cr_images[m].length; p++ ){
msg.push( cr_images[m][p].src );
}
}
alert( 'cr_images after loading:\n\n' + msg.join('\n') );

</script>


Incidentally, if you (or your visitors) have Firefox configured to not
allow scripts to change images, you can't set the src attribute of the
new image objects, they are blank. No error message or warning is given.

 

[VK]

Global variables can be referenced as attributes

of the window Object using this "bracket" notation.

Or in more global approach (using global or local):

function bufferedReader(prefix) {
var myName = prefix + '_series';
var buffer = new Object();
buffer[myName] = new Array();
...
}

 

[RobG]

Hey all:

[...]

Please, kill it before it breeds... :-x

 

[RobG]

cjl said: [...]
I think that was an oversight in his code.
Simply change "cr_series.length" to "window[parm+'_series'].length".

Global variables can be referenced as attributes of the window Object
using this "bracket" notation.

Hey, the penny finally dropped:

<script type="text/javascript">

var cr_series = [4, 2];
var ct_series = [2, 3];

function preload() {
for ( parm in window ) {
if ( parm.match('_series') ) {
loadArray( parm.replace('_series','') )
}
}
}

function loadArray( d ) {
var x = window[d+'_series'];
var j, i = x.length;
var A = [];
while ( i-- ){
j = x;
A = [];
while ( j-- ) {
A[j] = new Image();
A[j].src = 'images/' + d + (i+1) + '_' + (j+1) + '.jpg';
}
}
window[d+'_images'] = A;
}

// Call preload
preload();

function showArray( y ) {
var x = window[y];
var msg = [];
for ( var m=0; m<x.length; m++){
for ( var p=0; p<x[m].length; p++ ){
msg.push( x[m][p].src );
}
}
alert( y + ':\n\n' + msg.join('\n') );
}

// Have a look at cr_images
for ( parm in window ) {
if ( parm.match('_images') ) showArray( parm );
}

</script>

 

[cjl]

Hey all:

Thank you all. I obviously have a lot to learn.

Rob, your last example was sweet. Let me see if I understand it:

//declare my 'user editable' arrays.
var cr_series = [4, 2];
var ct_series = [2, 3];


function preload() {
// next I will iterate through all the attributes of the window object
// which includes my global variables, the arrays I have already
declared
for ( parm in window ) {

// if the current attribute contains the string '_series', use it
if ( parm.match('_series') ) {

//transform the current attribute by dropping '_series'
//which will result in for example 'cr_series' changing to 'cr'
//and call the loadArray function with the transformed attribute
loadArray( parm.replace('_series','') )
}
}
}



function loadArray( d ) {

//the variable x will 'reconstitute' my attribute name my adding
'_series'
var x = window[d+'_series'];

//my loop iterating variable should be the length of the user-defined
arrays
var j, i = x.length;

//A is an object
var A = [];

//do my loopy magic to create the multidimensional array
//with the apppropriate image names
while ( i-- ){
j = x;
A = [];

while ( j-- ) {
A[j] = new Image();
A[j].src = 'images/' + d + (i+1) + '_' + (j+1) + '.jpg';
}
}

//aha! declare a new global array with a dynamically created name
window[d+'_images'] = A;
}


OK - I think I have it. And thanks for the Firefox tip, I will require
that my users set their browsers to allow javascript to change image
src. I think this is the default setting?

Thanks again,
-cjl

 

[Lasse Reichstein Nielsen]

I've got an extremely ugly refactored function working, using eval()

You cansay that again.

If you want to dynamically create named references to something, there
is no need for them to be variables .Just make them properties of a
container object. Also, it's better to pass something directly than
to pass its name and need it looked up.

function preload()
{
if (cr_series.length >1) preloadIt('cr');
if (ct_series.length >1) preloadIt('ct');

if (cr_series.length >1) preloadIt('cr', cr_series);
if (ct_series.length >1) preloadIt('ct', ct_series);

}

var namespace = new Object();

function preloadIt(what)
{

function preloadIt(what, series) {

eval("" + what + "_images = new Array();");

namespace[what+"_images"] = new Array();

for (var loop = 0; loop <= eval("" + what + "_series.length-2");
loop++)
{

for (var loop = 0; loop <= .length-2;loop++) {

eval("" + what + "_images[loop] = new Array();");

namespace[what+"_images"][loop] = new Array();

for (var i =0; i < eval("" + what + "_series[loop]"); i++)
{

for (var i = 0; i < series[loop]; i++)

eval("" + what + "_images[0] = new Image();");
eval("" + what + "_images[0].src = \"images/" + what + "\" +
(loop+1) + \"_\" + (i+1) + \".jpg\";");

var img = new Image();
img.src = "images/" + what + (loop+1) + "_" + (i+1) + ".jpg";
namespace[what+"_images][0] = img;

}
}
}

whew. I guess it keeps me from repeating myself, but I bet if I look at
this code in the morning I won't remember what I did.

Good!

Anyway, you don't need to store the image object, they preload just as
fine without that, so this should be sufficient:
---
function preload() {
if (cr_series.length > 1) { preloadSeries("cr", cr_series); }
if (ct_series.length > 1) { preloadSeries("ct", ct_series); }
}
function preloadSeries(name, series) {
for (var loop = 0, n = series.length; loop < n, loop++) {
for (var i = 0; i < series[loop]; i++) {
var img = new Image();
img.src = filename(name, loop + 1, i + 1);
}
}
}
function filename(name, major, minor) {
return "images/" + name + major + "_" + minor + ".jpg";
}
---

Is there another way to accomplish this, without eval() ?

Always!

/L

 

[cjl]

Lasse:

Thank you for your reply. I'm not sure that I understand it, but
that's probably because I am thick-skulled, and not a programmer. I
will keep reading, and try to figure it out.

Anyway, you don't need to store the image object...

The reason I was storing a globally scoped array of image objects was
that later in my script I need easy access to both the names of the
preloaded images (so that I can do things like next_image and
previous_image) and to the properties of the image objects (namely,
height and width). Some of my images are of different sizes, and I must
dynamically shrink them to the size of a container div before they are
displayed. I need access to the image objects to read in the heigth and
width before swapping the src and changing the height / width of the
displayed image.

Anyway, now I can see that there are better ways to achieve my goal, I
will happily abandon eval ()! Once I have a working solution I will
post a URL.

For those who are interested or learning like me, I found the following
article about eval() and performance:
http://builder.com.com/5100-6371-5169823.html

Thanks again,
cjl

 

[RobG]

Hey all:

Thank you all. I obviously have a lot to learn.

Rob, your last example was sweet. Let me see if I understand it:

//declare my 'user editable' arrays.
var cr_series = [4, 2];
var ct_series = [2, 3];


function preload() {
// next I will iterate through all the attributes of the window object
// which includes my global variables, the arrays I have already
declared
for ( parm in window ) {

// if the current attribute contains the string '_series', use it
if ( parm.match('_series') ) {

Yes, but it's not very efficient. Consider putting your prefixes into
an array (e.g. prefixArray = ['ct','cr',...] ) and iterating through
that instead (the window object likely has a lot of parameters to get
through and you only want a couple of them).

//transform the current attribute by dropping '_series'

It gets a substring of the attribute name by replacing the matched
portion with an empty string.

//which will result in for example 'cr_series' changing to 'cr'
//and call the loadArray function with the transformed attribute
loadArray( parm.replace('_series','') ) [...]
function loadArray( d ) {

//the variable x will 'reconstitute' my attribute name my adding
'_series'

The name is 'reconstituted' on the right, x becomes a reference to the
array that is also referenced by '.._series'.

var x = window[d+'_series'];
[...]

//aha! declare a new global array with a dynamically created name
window[d+'_images'] = A;
}

Or you could do the '_images' bit in preload and just return A, so the
call from preload would be something like:

if ( parm.match('_series') ) {
var pre = parm.replace('_series','');
window[pre + '_images'] = loadArray( window[pre + '_series']);
...

and loadArray would end with:

return A;
}

OK - I think I have it. And thanks for the Firefox tip, I will require
that my users set their browsers to allow javascript to change image
src. I think this is the default setting?

By default Firefox allows images to be changed, only inveterate
fiddlers or the paranoid will turn it off (guess you know how I found
out...).

 

[Randy Webb]

cjl wrote:

For those who are interested or learning like me, I found the following
article about eval() and performance:
http://builder.com.com/5100-6371-5169823.html

I had always wondered if that moron published that article after I
emailed him a reply to it showing how to do every one of those examples
without eval. Instead of trying to determine the value, and uses, of
eval, he was hunting examples of when and why to use eval and make it
sound like eval was a catch all. And it is - for the inexperienced
programmers. Even his division data is of my own making, as can be seen
in the thread he linked to, although he says (in the article) "I have
been able to determine..." when he did no such thing.

 

[Michael Winter]

For those who are interested or learning like me, I found the following
article about eval() and performance: [...]

When I read that, I assumed that the article would say the usual:
compared to the alternatives, eval is slow and clumsy, and should be
avoided in the majority of all code. Oh, how I wish that was the case.

I had always wondered if that moron published that article after I
emailed him a reply to it showing how to do every one of those examples
without eval.

Rubbish, isn't it? It even seems like he's trying to devalue use of the
elements collection by adding extra whitespace to make it seem like that
version is larger. Rather underhand considering code size appears to be
his only reason for preference.

[snip]

Even his division data is of my own making, as can be seen
in the thread he linked to, although he says (in the article) "I have
been able to determine..." when he did no such thing.

If you continue into that paragraph, he writes: "However, in some cases,
EVAL outperforms conventional coding." Your example was very specific
and simply doesn't occur in day-to-day code. Moreover, the eval function
(and is it really so difficult to say function, not command?) was only
faster in one particular browser, and slower in others. Finally, he
fails to mention that the numbers he's quoting must be for around 500000
iterations (based on your numbers), and that the performance impact of
either approach is negligible anyway (which you noted yourself in the
cited thread).

He says that there are already plenty of sites and books that recommend
bad uses for the eval function. Did he just feel like creating another?

Mike

 

[cjl]

Hey:

Since starting this thread a few days ago I have learned a lot, and
wanted to say thank you again to everyone who responded. I have since
abadoned the use of eval, and have now re-implemented everything using
the examples provided above (Thanks RobG). I still have some ugly code,
and one or two eval statements elsewhere, and no error checking, and
all sorts of mssing features, but I am on my way.

I also took RobG's advice, and started all my counting from 0!

Sadly, even though my horrendous eval based function was beastly, it
worked, and it worked in both IE and Firefox. I can't get my 'new'
version to work with IE...

If anyone has some time to kill, and wants to help me even further, my
rough draft is up at:

http://www.saintrays.net

My new and improved preload function does not seem to work in IE.

I'll repeat what I said in a different thread: before mocking my design
choices and coding abilities, keep in mind that I am a doctor
(radiologist) and not a programmer or designer. This web app will be
targeted to a very small group of people, and I will require that they
must view it in 'fullscreen' 1024 x 768 for it to render correctly,
hopefully in Firefox / Mozilla until I iron out the IE bugs. It will
be a sort of 'teaching file' of interesting cases when finished. The
fullscreen look is so that it can mimic the look of powerpoint, without
actually being as limiting as powerpoint. To see what I mean, click on
the "CR" button to load the plain film images, and double click on an
image. This zooms it. When zoomed, you can click and drag to pan.
Double clicking again zooms out. All of this is impossible with
powerpoint. Of course, a lot of functionality has yet to be
implemented.

Anyway, thanks again. Now to clean up the code, and add some actual
error checking to my functions.

-CJL

 

[Randy Webb]

For those who are interested or learning like me, I found the following
article about eval() and performance: [...]

When I read that, I assumed that the article would say the usual:
compared to the alternatives, eval is slow and clumsy, and should be
avoided in the majority of all code. Oh, how I wish that was the case.

Me too. I read the article before it was "published" and had a lot of
bad to say about it, and hoped it would never see the web but it did.

Rubbish, isn't it? It even seems like he's trying to devalue use of the
elements collection by adding extra whitespace to make it seem like that
version is larger. Rather underhand considering code size appears to be
his only reason for preference.

If he even understood it then it might make sense, but I truly believe
he was just a journalist out to sell a story.

[snip]

Even his division data is of my own making, as can be seen
in the thread he linked to, although he says (in the article) "I have
been able to determine..." when he did no such thing.

If you continue into that paragraph, he writes: "However, in some cases,
EVAL outperforms conventional coding." Your example was very specific
and simply doesn't occur in day-to-day code. Moreover, the eval function
(and is it really so difficult to say function, not command?) was only
faster in one particular browser, and slower in others. Finally, he
fails to mention that the numbers he's quoting must be for around 500000
iterations (based on your numbers), and that the performance impact of
either approach is negligible anyway (which you noted yourself in the
cited thread).

That is almost verbatim of what I tried to explain to him in emails
before it got published but he wasn't looking for any truth, he was
looking for "reasons to use eval" of which I only know one:

To execute unknown (at runtime) code.

He says that there are already plenty of sites and books that recommend
bad uses for the eval function. Did he just feel like creating another?

Whether he felt like it or not, he succeeded in doing it.

It might turn out to be a good thing though. If people reading it end up
here, in clj, then they can learn the proper ways and finally realize
how ludicrous that article is.