Arrow Function Not Working In Ternary Operator

Question

My arrow function does not work inside a ternary operator and also it gives me no error in the console

Below Is My Code

The Objects in the Holders Array Are Html Elements

const Holders =
    [
        {
            name: accountHolder,
            target: accountHelper
        },
        {
            name: helpHolder,
            target: helpContainer
        }
    ]
const holderbg = 'rgba(128,128,128,.1)'
document.querySelector('html').onclick = (event) => {
    Holders.map(holder => {
        holder.name.getAttribute('role') == event.target.getAttribute('role') ?
            // The Arrow Function Does Not Work But The Code Runs When It is not in the function
            // replacing ()=>{} with just holder.name.style.backgroundColor = holderbg works 
            () => {
                holder.name.style.backgroundColor = holderbg
                holder.target.classList.remove('hide')
            }

            :
            // The Arrow Function Does Not Work But The Code Runs When It is not in the function
            // replacing ()=>{} with just holder.name.style.backgroundColor = 'initial' works 
            () => {
                holder.name.style.backgroundColor = 'initial'
                holder.target.classList.add('hide')
            }


    })

}

Answer 1

You have to execute the function you declared:

(() => {
            holder.name.style.backgroundColor = holderbg
            holder.target.classList.remove('hide')
        })()

Answer 2

This is due to the fact that you are just declaring the arrow functions here, they are not being called anywhere.

To call them, you can store the returned function in variable then call it.

document.querySelector('html').onclick = (event) => {
    Holders.map(holder => {
        const func = holder.name.getAttribute('role') == event.target.getAttribute('role') ?
            () => {
                holder.name.style.backgroundColor = holderbg
                holder.target.classList.remove('hide')
            }

            :
            () => {
                holder.name.style.backgroundColor = 'initial'
                holder.target.classList.add('hide')
            }

        func() // called here


    })

}

In the above code, the references to the functions will be created in every event call. So better way is to save the function in variables like this

const show = () => {
    holder.name.style.backgroundColor = holderbg
    holder.target.classList.remove('hide')
}

const hide = () => {
    holder.name.style.backgroundColor = 'initial'
    holder.target.classList.add('hide')
}

document.querySelector('html').onclick = (event) => {
    Holders.map(holder => {
        holder.name.getAttribute('role') == event.target.getAttribute('role')
            ? show()
            : hide()

    })

}

Side note - the map function used in the code is not being used as its application because map returns a transformed array according to the function passed. In this code, the function is returning undefined and also the result is not being stored. Consirder replacing it with forEach