Can't use functions inside a switch? JS

Question

I have this categorie's menu so i use a switch for any possibility.

switch (id) {

    case "btn-todas":
    for(let i = 0; i < bares.length; i++){
        tarjetas[i].style.display="flex";
    }
    break;


    case "btn-bares":
        console.log("HOLA BARES")
        //recorrer(bar) //tampoco funciona con "bar"
        for(let i = 0; i < bares.length; i++){
            bares[i].categorias?.bar ? tarjetas[i].style.display="flex" : tarjetas[i].style.display="none";
    }

        break;

    case "btn-cervecerias":
        console.log("HOLA CERVEZA")
        for(let i = 0; i < bares.length; i++){
            bares[i].categorias?.cerveceria ? tarjetas[i].style.display="flex" : tarjetas[i].style.display="none";
    }

        break;
        
    case "btn-centroCultural":
        console.log("HOLA CENTRO CULTURAL")
        for(let i = 0; i < bares.length; i++){
            bares[i].categorias?.centroCultural ? tarjetas[i].style.display="flex" : tarjetas[i].style.display="none";
    }

And the list continues. So I thought maybe i could use a function so DRY. But it doesn't work. It just give me an error which says "bar is not defined" (or whatever categories would be).

This is the function

function recorrer(prop){

    for(let i=0; i < bares.length; i++){
    bares[i].categorias?.prop ? tarjetas[i].style.display="flex" : tarjetas[i].style.display="none";
    }
}

The way i tried to implement this function was inside any switch like this:

case "btn-bares":
        recorrer(bar) 
        // i tried also with "bar" and even doesnt worked
        break;

The categories are in differents objects inside the bares array. Thanks, any other informetion needed just ask me!