ijavascript. function call as condition in ternary operator. strange behavior

Question

I can't figure out what is wrong..

const toggleKls = ()=> isKls() ? ls.setItem(kls, "false") : ls.setItem(kls, "true");

toggleKls() doesn't work as intended, I've even tried to switch places of exprIfTrue and exprIfFalse , but window.localStorage.getItem(kls) remains the same, as initiated

isKls() also doesn't work, it always evaluates to true for some reason..

When I test this expression like this

testo = (r)=>r
testo(true) ? false : true
//false
testo(false) ? false : true
//true

It works just fine, and it looks like I'm doing the same thing below, but apparently not, and I cant understand why..

//<FOR DEVELOPMENT
const ls = window.localStorage;
const kls = "keyListenSwitch";
const isKls = ()=> ls.getItem(kls);

console.warn(`kls: ${isKls()} test: ${ls.getItem("test")} kls by hand: ${window.localStorage.getItem(kls)}`)
const toggleKls = ()=> isKls() ? ls.setItem(kls, "false") : ls.setItem(kls, "true");

//get any key if switch is on
document.body.addEventListener(
    'keydown',
    gHandler( 
        e=> isKls(),
        e=> console.log(`event: ctrl:${e.ctrlKey} alt:${e.altKey} shift:${e.shiftKey} key:${e.keyCode}\nkls: ${isKls()}`),
        500),
    false);

//toggle switch to get any key
document.body.addEventListener(
    'keydown',
    gHandler( 
        e=> e.ctrlKey && e.altKey && e.keyCode == 76,//l
        ()=>{ 
            toggleKls();
            console.warn(`TOGGLE Dev:\nListen To Any Key Switch is: ${ isKls() ? "ON" : "OFF"}`);
        },
        500),
    false);

//>for development
//>bindings

CONSOLE OUTPUT:

const ls = window.localStorage;
const kls = "keyListenSwitch";
const isKls = ()=> ls.getItem(kls);
const toggleKls = ()=> isKls() ? ls.setItem(kls, "false") : ls.setItem(kls, "true");
isKls()
"false"
//it's false and should toggle to true in that case, but it's not
ls.setItem(kls, true)
undefined
isKls()
"true"
throwByKey.js:334 event: ctrl:true alt:false shift:false key:17
kls: true
throwByKey.js:334 event: ctrl:true alt:true shift:false key:18
kls: true
throwByKey.js:345 TOGGLE Dev:
Listen To Any Key Switch is: ON
(anonymous) @ throwByKey.js:345
(anonymous) @ throwByKey.js:260
throwByKey.js:334 event: ctrl:false alt:true shift:false key:18
kls: false
throwByKey.js:345 TOGGLE Dev:
Listen To Any Key Switch is: ON
(anonymous) @ throwByKey.js:345
(anonymous) @ throwByKey.js:260
throwByKey.js:334 event: ctrl:true alt:true shift:false key:76
kls: false
throwByKey.js:345 TOGGLE Dev:
Listen To Any Key Switch is: ON
(anonymous) @ throwByKey.js:345
(anonymous) @ throwByKey.js:260
throwByKey.js:334 event: ctrl:true alt:false shift:false key:17
kls: false
throwByKey.js:334 event: ctrl:false alt:true shift:false key:18
kls: false

This function actually declared above anything else, but I'm placing it here just to be more clear

//TOOLS
function gHandler (ruler,action,cd){//cool down
    let lcd = 0;
    let iscd = ()=>{ 
        let t = new Date().getTime();
        let tmp = t - lcd; 
        return lcd = t, tmp >= cd}

    return function (e) {
        if (ruler(e) && iscd()) {
            action(e);
        }
    }
}
//tools

*toggleKls() doesn't work as intended,* <-- What ***is*** the intended behavior? What exactly is wrong? — Scott Marcus, Dec 19 '20 at 15:53
Please try to scale this down to a runnable [mcve] that demonstrates your issue — charlietfl, Dec 19 '20 at 15:54
Perhaps the problem is that you don't know that all of your function calls will execute, regardless of the conditional outcome. The functions run first and then the condition executes with the return values from those function calls. — Scott Marcus, Dec 19 '20 at 15:55

score 1 · Accepted Answer · answered Dec 19 '20 at 15:54

1

This line seems a bit suspicious.

const isKls = ()=> ls.getItem(kls);

The thing is localStorage.getItem(key) returns string value. "true" === true will result in false. You'd have to eval that thing or change condition. The same thing with "false"

answered Dec 19 '20 at 15:54

Józef Podlecki

10,453
5
24
50

If `getItem(kls)` returns a function that, itself has a return value, then the line is fine. – Scott Marcus Dec 19 '20 at 15:56

ijavascript. function call as condition in ternary operator. strange behavior

1 Answers1