Printing a javascript expression the easy way

Considering this is the third post about debugging in javascript and error logging, you could say I like this subject.

Leaving aside the simple error logging messages, this post covers something a little bit more complex. While I was working on a zoom algorithm, with all the complex features like double-tapping, panning, pinching and dragging, for both desktop and mobile, I got some undefined results. The bad part was that the undefined came out of a longish expression and logging all those variables would have been rather cucumbersome, at least for a lazy guy like me.

Imagine something like this:

x = ((a + b) * c) / d - (f * (g -h)) / 2;

In my case, I had no idea which one of these variables was at fault so I had to check them all out and I didn't like it. Looking at the equation, I thought it would be awesome to be able to print out the same expression, but with the actual values.

For example, to have this:

var a = 1, 
    b = 2,
    c = 3;
x = (a + b) / c;

And then use something that will print this:

1 = (1 + 2) / 3;

So after giving it some thought, I made a sort of code snippet to help me with this problem. Unfortunately, since in most of the cases we are dealing with local variables, it's not easy to put it in a function without passing all those variables as arguments. Still, it's a nice snippet and I found it very handy and since then used it every time I ran in such situations.

And here goes the snippet:

var newExp  = '', 
    currVar = '', 
    currCh  = '', 
    i = 0, 
    len = exp.length;
for( ; i < len; i++) { 
    ch = exp.charAt(i);
    if(isAlphaNumeric(ch)) {
        currVar += ch; 
        (i === len) && (newExp += eval(currVar));
    } else { 
       (currVar !== '') && (newExp += '' + eval(currVar) + ''); 
       currVar = ''; 
       newExp += ch;
    }
}

console.log(newExp);

...or a more compact version:

var newExp  = '', currVar = '', currCh  = '', i = 0, len = exp.length;
for( ; i < len; i++) { ch = exp.charAt(i);
if(isAlphaNumeric(ch)) {currVar += ch; (i === len) && (newExp += eval(currVar));
} else { (currVar !== '') && (newExp += '' + eval(currVar) + ''); currVar = ''; newExp += ch;}}
console.log(newExp);

There is a catch though, you also need the isAlphaNumeric function. This function checks if we're dealing with a valid javascript variable character although, I must admit, it's not exactly correct. A more complete description of the topic can be found here, but even taking that fact into account, this small regex function takes care of your usual situations.

function isAlphaNumeric(ch){
    var reg = /[a-zA-Z0-9._]/,
    arr = reg.exec(ch);
    return is = (arr) ? true : false;
}

Anyway, after including this function in your script (or maybe after making your own, based on Mathias Bynens' previously linked post), this is how you would use the snippet to print the previous expression:

x = ((a + b) * c) / d - (f * (g -h)) / 2;
var exp = 'x = ((a + b) * c) / d - (f * (g -h)) / 2;';

var newExp  = '', currVar = '', currCh  = '', i = 0, len = exp.length;
for( ; i < len; i++) { ch = exp.charAt(i);
if(isAlphaNumeric(ch)) {currVar += ch; (i === len) && (newExp += eval(currVar));
} else { (currVar !== '') && (newExp += '' + eval(currVar) + ''); currVar = ''; newExp += ch;}}
console.log(newExp);

...and this will reprint the expression, with all the values so you can see exactly what went wrong.

Anyway, take this as a disclaimer: I'm not claiming this is some really great code, but it was helpful for me. If you think there's something wrong with it or have any suggestions, I will be glad to hear it.