Binding a Javascript function to a variable

Question

I'm trying to bind one of either toLowerCase or toUpperCase to a variable, and I'm missing some step along the way. Here's a simplified version of my code:

for(let i = 0; i < arr.length; i++) {
    if(flag) {
        arr[i] = arr[i].toUpperCase();
    }
    else {
        arr[i] = arr[i].toLowerCase();
    }
}

I'm hoping I can do something like:

let func = flag  ? String.prototype.toUpperCase : String.prototype.toLowerCase;
arr = arr.map(x=>func(x));

While I can set the function, it looks like I'm not using it right, as I'm getting Uncaught TypeError: String.prototype.toLowerCase called on null or undefined. What am I missing here?

They're methods. You need to call them *on* `x`, not pass it as an argument. — Bergi, Aug 30 '17 at 17:10
Have a look at [this question](https://stackoverflow.com/q/21186398/1048572) for what you are trying to do. — Bergi, Aug 30 '17 at 17:11
FYI, *as* you were ticking the "accept" checkmark, I added to the middle of my answer. :-) — T.J. Crowder, Aug 30 '17 at 17:24
Thanks for letting me know @T.J.Crowder. I went with your first suggestion. Code already working :) — Traveling Tech Guy, Aug 30 '17 at 17:26

T.J. Crowder · Accepted Answer · 2017-08-30T17:22:06.897

You can do it that way, but you have to use .call (or .apply) so you set this correctly within the call to toUpperCase/toLowerCase, since they expect to see the string to use as this, not as a passed parameter:

let func = flag  ? String.prototype.toUpperCase : String.prototype.toLowerCase;
arr = arr.map(x=>func.call(x));
//-------------------^^^^^

(I also dropped the let from in front of arr on the second line, as otherwise arr on the right-hand side of the = would be undefined. [Or, depending on where/how arr was previously declared, it would be an error.])

Example:

let arr = ["one", "TWO", "three", "FOUR"];
const flag = Math.random() < 0.5;
console.log("Flag is: " + flag);
let func = flag  ? String.prototype.toUpperCase : String.prototype.toLowerCase;
arr = arr.map(x=>func.call(x));
console.log(arr);

Another option is to give yourself a wrapper function, which you can then call the way you wanted to call it:

let func = flag ? s => s.toUpperCase() : s => s.toLowerCase();
arr = arr.map(x=>func(x));

Example:

let arr = ["one", "TWO", "three", "FOUR"];
const flag = Math.random() < 0.5;
console.log("Flag is: " + flag);
let func = flag ? s => s.toUpperCase() : s => s.toLowerCase();
arr = arr.map(x=>func(x));
console.log(arr);

But the easier thing in this specific case is to just use brackets notation and a string function name:

let funcName = flag  ? "toUpperCase" : "toLowerCase";
arr = arr.map(x=>x[funcName]());

Example:

let arr = ["one", "TWO", "three", "FOUR"];
const flag = Math.random() < 0.5;
console.log("Flag is: " + flag);
let funcName = flag  ? "toUpperCase" : "toLowerCase";
arr = arr.map(x=>x[funcName]());
console.log(arr);

score 2 · Answer 2 · answered Aug 30 '17 at 17:11

2

You can call the function using func.call(x) - see demo below:

let func = true  ? String.prototype.toUpperCase : String.prototype.toLowerCase;
let arr = ['test', 'TEST', "Test"].map(x=>func.call(x));
console.log(arr);

answered Aug 30 '17 at 17:11

kukkuz

41,512
6
59
95

1

Thanks Thanks t I will hav – Ravi Shankar Bharti Aug 30 '17 at 20:25

Binding a Javascript function to a variable

2 Answers2