DEV Community 👩‍💻👨‍💻

Bruce Axtens
Bruce Axtens

Posted on

Too clever for your own good?

JavaScript is great for prototyping ideas. Okay, so it's a prototype-based language but we probably mean slightly different things.

I wanted to do a calculated selection of a value and quickly threw together the following, which takes a parameter, compares it to an array of possible match/result pairs, along with a default value in the event that there's no match in the match/result pairs. I also coded in the possibility of embedding a function.

Here's the ES3 code

function selector(target, casevalues, defaultvalue) {
    for (var i = 0; i < casevalues.length; i++) {
        var caseval = casevalues[i];
        if ("string" === typeof caseval[0]) {
            if (target === caseval[0]) {
                return caseval[1];
            }
        } else { //assume function
            return caseval[0](target);
        }
    }
    return defaultvalue;
}
Enter fullscreen mode Exit fullscreen mode

and the equivalent ES5 code

const selector = (target, casevalues, defaultvalue) => {
    for (let i = 0; i < casevalues.length; i++) {
        const caseval = casevalues[i];
        if ("string" === typeof caseval[0]) {
            if (target === caseval[0]) {
                return caseval[1];
            }
        } else { //assume function
            return caseval[0](target);
        }
    }
    return defaultvalue;
}
Enter fullscreen mode Exit fullscreen mode

Evaluating that can be done like this (ES3 then ES5):

var target = selector("page value", [
            ["domain", "domain"],
            ["subdomain", "subdomain"],
            [function (x) {
                    return x === "page value" ? "page" : x
                }
            ]], "");
Enter fullscreen mode Exit fullscreen mode
let target = selector("page value", [
            ["domain", "domain"],
            ["subdomain", "subdomain"],
            [x => x === "page value" ? "page" : x
            ]], "");
Enter fullscreen mode Exit fullscreen mode

So pretty cool, right? We-e-e-ell, maybe not. The whole thing might just as readily be expressed in a shorter piece of code, and done inline, using in-place evaluation. ES3 and ES5:

var target = (function (item) {
    switch (item) {
    case "page value":
        return (function (x) {
          return x === "page value" ? "page" : x
        }(item));
    case "domain":
        return "domain";
    case "subdomain":
        return "subdomain";
    }
    return "";
}("page value"));
Enter fullscreen mode Exit fullscreen mode
const target = (item => {
    switch (item) {
    case "page value":
        return (x => x === "page value" ? "page" : x)(item);
    case "domain":
        return "domain";
    case "subdomain":
        return "subdomain";
    }
    return "";
})("page value");
Enter fullscreen mode Exit fullscreen mode

Cost-benefit is the key here. Where I was wanting the original selector, the inline worked better and was more efficient. Maybe you do want to have a generalised selector function, in which case something like the above would work. An improvement might be to pass in an array of key-value-pair objects instead of an array of match/result pairs.

Okay, that's me done with thinking aloud for now. Kudos to Lebab's online editor for helping with the ES3 to ES5 conversions.

Top comments (0)

Find what you were looking for? Sign up so you can:

 
🌚 Enable dark mode
🔠 Change your default font
📚 Adjust your experience level to see more relevant content