JavaScript Name Hoisting and One-Liner Functional Style

, , …,

JavaScript has name hoisting. 〔☛ JavaScript: Variable & Function Declaration Order: Name Hoisting〕 and i think Douglas Crockford in his 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);
        } }}

i think to solve this, one'd do heavy functional style instead. That is, often just eliminate variables all together.

For example, this block:

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>";

would be rewritten as:

resultItem = document.createElement("table");
resultItem.innerHTML = (function(uChar, uNum, uHex, 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], uNum.toString(16), String.fromCodePoint(uNum), unicodedata[uNum] )

This is typical functional programing style. Notice, that most variables are eliminated. However, it's much less readable.

Actually, i don't think it's much less readable. It's more correct to say that less people find it readable.

The functional style takes some used to. If your first language is a functional language, then it might be more readable to you. Because, there, you only need to pay attention to function and its parameters. As simple as that. While the version with lots variables, you have to find all locations where the variable are used.

A lot “readability” issue is psychological. For example, lisp programers don't have problem reading lots nested parenthesis. 〔☛ Emacs Lisp Tutorial by Example

For the first 5 years of my coding career, i code in the functional language Mathematica, same style as the one you see above.

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

blog comments powered by Disqus