Javascript Associative Array to Integer?

Question

I'm working on a hunk of software for an internship and I've been tasked to add functionality to a system that builds a table of Award Levels based on existing Prizes and numbers of Cards.

I'm getting into the function for adding rows and I find an extremely strange pair of declarations. I'm going to post the function itself lest lack of context inhibit answers. I've searched for various combinations of "cast","array" and "number" but nothing seemed to be related to this practice.

this.addNewTableRow = function(){
    var request = new XMLHttpRequest();
    awardLevel = this.length + 1;
    request.onreadystatechange = function(){
        if (request.readyState == 4 && request.status == 200){
            if(request.responseText != -1){
                var tableBody = document.getElementById('award-body');
                var sqlId = parseInt(JSON.parse(request.responseText));

                var prevSelector = document.getElementById('level-select-'+self.length);
                var prevLevel = 0;
                if(prevSelector != null){
                    prevLevel = parseInt(prevSelector.value);
                }

                var minCardQuantity = prevLevel + 1;
                var maxCardQuantity = minCardQuantity + 100;

                var awardLevel = {
                    id: sqlId,
                    awardId: 0,
                    certificateId: 0,
                    awardLvl: self.length + 1,
                    cardQuantity: minCardQuantity
                };

                self.changeLevelSelect(self.length + 1, minCardQuantity);

                var row = self.getRow(awardLevel, minCardQuantity, maxCardQuantity);

                tableBody.appendChild(row);
                self.awards[length] = awardLevel;
                self.length++;
            }
        }
    }
    request.open('GET', '_insert_award_lvl.php?level=' + awardLevel, true);
    request.send();
    location.reload();  
}

The behavior that has me puzzled is the treatment of AwardLevel

It's modified before it is declared, which even with a vague understanding of hoisting I don't think should work. Further the early assignment operator appears to be assigning the variable to an Int whereas it is assigned and used as an associative array later on.

The overall code has a lot of unexpected and confusing behavior and I'm already inexperienced with Javascript.

Answer 1

The external awardLevel variable isn't "modified before it is declared" : it's never declared. The other declaration is only valid for the function in which it is declared (and it shadows the external one).

This means :

• you have two different variables with same name and different semantics (one is an integer, one is an object)
• one of them is never declared (it's global) and is shadowed in the internal scope by the declared one
• the fact awardLevel has a property named awardLvl doesn't make it better
• this is a bad careless code

A way to make all this slightly less confusing would be this :

// awardLevel = this.length + 1; remove that line
request.onreadystatechange = function(){
    // don't change which is here
}
request.open('GET', '_insert_award_lvl.php?level=' + (this.length + 1), true);