[Sugestão] Solução utilizando data-attribute

Acredito que seja uma boa prática utilizar as classes somente no CSS e para o JavaScript utilizar o ID ou Data-Attribute, no meu código utilizei um data-categoria para cada botão: HTML:

<button class="btn btn-front" href="#" id="btnFiltrarLivrosFront" data-categoria="front-end">
<button class="btn btn-back" href="#" id="btnFiltrarLivrosBack" data-categoria="back-end">
<button class="btn btn-dados" href="#" id="btnFiltrarLivrosDados" data-categoria="dados">

JS:

const btnFiltrar = document.querySelectorAll("[data-categoria]")

btnFiltrar.forEach(btn => btn.addEventListener('click', () => filtrarLivros(btn.dataset.categoria) ))

function filtrarLivros(categoria){
    let livrosFiltrados = livros.filter(livro => livro.categoria == categoria)
    criaLivros(livrosFiltrados)
}