Understanding this Javascript function

Question

I am continuing a project. And this is the only thing I do not understand. It is the key function for assembling a filter string to be used for sql query. This function is invoke via onclick of a button.

My problem is the value for query is taken from $_REQUEST['FILTER'].

<input id="HDN_FILTER" name="FILTER" type="hidden" value="<?php echo $_REQUEST['FILTER']; ?>">

At first $_REQUEST['FILTER'] is empty. Then upon pressing the submit button it assembles and return the string. But I don't understand how it assembled the string. Because it seems the function get its value from this input. But it's value is empty. So the function should received empty from this input. It's like going in circles

Example what does "" != means in javascipt anyway?

An example of the assembled string is ""DELIVER_STORE_ACCOUNT=ALL^STORES_ACCOUNT=ALL^ACTIVE=1^PART_NUMBER=ALL^NEW_PART_NUMBER=ALL""

And I see the join("^") part in the function. And it seems this line assembles it. But why is it inside a switch parenthesis?

 function SUBMIT(e, t) {
    array_Filter = new Array;

    for (i in array_Dropdown) {
        if (varField = array_Dropdown[i], varID = "SEL_" + varField, aryTemp = new Array, -1 != document.getElementById(varID).selectedIndex)
            for (i = 0; i < document.getElementById(varID).options.length; i++)
                document.getElementById(varID).options[i].selected === !0 && (aryTemp[aryTemp.length] = document.getElementById(varID).options[i].value);
        aryTemp.length > 0 && (array_Filter[varField] = aryTemp)
    }

    "" != document.getElementById("HDN_SEARCH").value && (aryTemp.SEARCH = document.getElementById("HDN_SEARCH").value), array_Filter_Temp = new Array;
    for (i in array_Filter)
        array_Filter_Temp[array_Filter_Temp.length] = i + "=" + array_Filter[i].join("|");
    switch (varFilter = array_Filter_Temp.join("^"), document.getElementById("HDN_FILTER").value = varFilter, document.getElementById("HDN_EXCEL").value = 1 == e ? 1 : 0, !0) {
        case 1 == t:
            document.getElementById("HDN_OVERRIDE").value = 1;
            break;
        case 0 == t:
            document.getElementById("HDN_OVERRIDE").value = 0;
            break;
        case-1 == t:
    }

    varTXTBOX = document.getElementById("TXT_SEARCH").value;
    alert(varTXTBOX);

    document.getElementById("FORM1").submit()
}

"But why is it inside a switch parenthesis" --- because an author of this code has no idea how to write maintainable js. — zerkms
– zerkms, Commented Jul 21, 2015 at 3:15
the guys who wrote this well... speechless, anyway he is not assigning nothing in "" != document.getElementById("HDN_SEARCH").value && (aryTemp.SEARCH = document.getElementById("HDN_SEARCH").value) neither creating and if statement and then he create again the same global scope variable of array_Filter_Temp = new Array; you could remove those line and will nothing happen — ncubica
– ncubica, Commented Jul 21, 2015 at 3:20
so '' != is comparing to an empty string. Makes sense didn't notice. Because I usually put the empty string at the right hand side. LOL you said so. This project is giving me a lot of headaches. Especially the variable names some variables are just named x, y, z — aozora
– aozora, Commented Jul 21, 2015 at 3:20
@ncubica Something IS happening in that code. It is basically an if check to see if there is a value and sets aryTemp.SEARCH — epascarello
– epascarello, Commented Jul 21, 2015 at 3:27

Marcos Dimitrio · Accepted Answer · 2015-07-21 05:01:46Z

Whoever wrote this code was trying to obfuscate it, making it hard for anyone else to understand what it does, perhaps because the result is sent to a SQL query, as you stated. Of course, if you want to hide anything from your users, specially SQL commands, implement it server-side.

1) The "" != part:

"" != document.getElementById("HDN_SEARCH").value                // left side
&&                                                               // logical AND
(aryTemp.SEARCH = document.getElementById("HDN_SEARCH").value),  // right side
array_Filter_Temp = new Array;                                   // another statement

Here he's taking advantage of the short-circuit evaluation, if the left side of the expression evaluates to false, then the right side isn't executed. The next statement after the , is always executed (read more about the comma operator). So it's the same as writing:

if (document.getElementById("HDN_SEARCH").value != "") {
    aryTemp.SEARCH = document.getElementById("HDN_SEARCH").value
}
array_Filter_Temp = new Array;

2) The switch part:

switch (
    varFilter = array_Filter_Temp.join("^"), 
    document.getElementById("HDN_FILTER").value = varFilter, 
    document.getElementById("HDN_EXCEL").value = 1 == e ? 1 : 0, 
    !0
) {

The first two are trivial. On the third one, he is assigning HDN_EXCEL based on the value of e. Adding parenthesis makes it clearer: document.getElementById("HDN_EXCEL").value = (1 == e) ? 1 : 0

The !0 is there just to make sure the rest of the switch is executed (it evaluates to true). If it was 0 or false, then HDN_OVERRIDE would never be assigned to a value.

So that whole set could be rewritten as:

varFilter = array_Filter_Temp.join("^");
document.getElementById("HDN_FILTER").value = varFilter;
document.getElementById("HDN_EXCEL").value = (e == 1) ? 1 : 0;
switch (t) {
    case 1:
        document.getElementById("HDN_OVERRIDE").value = 1;
        break;
    case 0:
        document.getElementById("HDN_OVERRIDE").value = 0;
        break;
}

3) The first for loop: (you haven't asked, but here it goes anyway)

for (i in array_Dropdown) {
    if (
        varField = array_Dropdown[i], 
        varID = "SEL_" + varField, 
        aryTemp = new Array, 
        -1 != document.getElementById(varID).selectedIndex
    )
        for (i = 0; i < document.getElementById(varID).options.length; i++)
            document.getElementById(varID).options[i].selected === !0 && (aryTemp[aryTemp.length] = document.getElementById(varID).options[i].value);
    aryTemp.length > 0 && (array_Filter[varField] = aryTemp)
}

Again the use of the , operator to execute all commands and return the value of the last one to the if, which is -1 != document.getElementById(varID).selectedIndex, so the second for loop will run only if the element in varID has a selectedIndex.

The === !0 is the same as === true.

This could be rewritten as:

for (key in array_Dropdown) {
    varField = array_Dropdown[key];
    varID = "SEL_" + varField;
    aryTemp = new Array;
    if (document.getElementById(varID).selectedIndex != -1) {
        for (i = 0; i < document.getElementById(varID).options.length; i++) {
            if (document.getElementById(varID).options[i].selected) {
                aryTemp[aryTemp.length] = document.getElementById(varID).options[i].value;
            }
        }
    }
    if (aryTemp.length > 0) {
        array_Filter[varField] = aryTemp;
    }
}

As a side note, if you can, I suggest you refactor this code, send only the collected data to the server and do all the transformation needed on the server-side.

Thanks for this wonderful answer. You really cleared a lot. Didn't know there is something called short-circuit evaluation. Nice to know. Thanks also for the extra bit in the for loop

Collectives™ on Stack Overflow

Understanding this Javascript function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related