JS: Should You Move Variables to the Top?

In many modern languages, it is recommended that variables be declared as late as possible, at the first point of use. That turns out to be bad advice for JavaScript because it lacks block scope. So instead, it is best to declare all of the variables used in a function at the top of the function body.

— Douglas Crockford, in JavaScript the Good Parts Buy at amazon

JavaScript has name hoisting. Meaning, all declared variables inside a function block are moved to the top within the function block. [see var Declaration Order (Name Hoisting)]

And Douglas Crockford in his book JavaScript the Good Parts recommends to move all vars to the top, to reflect reality.

But look at the following code. Moving all var to the top would be silly.

function displaySearchResult (charArray, anchorNode) {
    // clear the result first
    while (anchorNode.hasChildNodes()) {
        anchorNode.removeChild(anchorNode.lastChild);
    }

    if ( charArray.length === 0 && searchBox.value.length !== 0) {
        var noResult = document.createElement("span");
        noResult.innerHTML = "none found. Try type more characters, or try “star”, decimal search “#97”, hexadecimal search “#x61”, or enter a Unicode “♥”";
        noResult.style.color="red";
        anchorNode.appendChild(noResult);
    } else {

        for (var ii = 0; ii < charArray.length ; ii++) {

            var uNum = charArray[ii];
            var uHex = uNum.toString(16);
            var uChar = String.fromCodePoint(uNum);
            var uName = unicodedata[uNum];

            var resultItem = document.createElement("table");
            resultItem.innerHTML = "<tr><td><span style='font-size:6ex'>" + uChar + "</span></td><td>" + uNum + "<br />x" + uHex + "</td></tr><tr><td colspan='2'>" + htmlEncode(uName) + "</td></tr>";

            resultItem.style.display="inline-block";
            resultItem.style.border="solid thin red";
            resultItem.style.width="18ex";
            resultItem.style.margin="0.2ex";
            resultItem.style.padding="0.2ex";
            resultItem.style.borderRadius="14px";

            anchorNode.appendChild(resultItem);
        } }}

One way to solve this, is to not use variables all together, by using heavy functional style.

For example, this part:

var uNum = charArray[ii];
var uHex = uNum.toString(16);
var uChar = String.fromCodePoint(uNum);
var uName = unicodedata[uNum];

var resultItem = document.createElement("table");

resultItem.innerHTML = "<tr><td><span style='font-size:6ex'>" + uChar + "</span></td><td>" + uNum + "<br />x" + uHex + "</td></tr><tr><td colspan='2'>" + htmlEncode(uName) + "</td></tr>";

can be written as:

var resultItem = document.createElement("table");

resultItem.innerHTML =
(function ( uNum, uHex, uChar, uName) {
    return "<tr><td><span style='font-size:6ex'>" + uChar + "</span></td><td>" + uNum + "<br />x" + uHex + "</td></tr><tr><td colspan='2'>" + htmlEncode(uName) + "</td></tr>"; })(
    charArray[ii],
    charArray[ii].toString(16),
    String.fromCodePoint(charArray[ii]),
    unicodedata[charArray[ii]]
);

Though, this forced functional programing style is less readable.

Note: a lot “readability” issue is psychological and conditioning. Do you find Chinese readable? But Chinese people usually find English unreadable. And, Lisp programers don't have problem reading lots nested parenthesis. [see Emacs Lisp Tutorial by Example]

Google Plus discussion https://plus.google.com/+XahLee/posts/776XQf46CvZ