diferentes logicas dentro de uma unica função

Queria enteder porque as lógicas de trocar itens de lista, deletar itens e editar itens estão dentro da função mostrarItem:

let listaDeItens = [];
let itemAEditar;

const formulario = document.getElementById("form-itens");
const formularioImput = document.getElementById("receber-item");
const listaDeCompras = document.getElementById("lista-de-itens");
const listaItensComprados = document.getElementById("itens-comprados");

formulario.addEventListener("submit", evento => {

    evento.preventDefault();
    salvarItem();
    mostrarItem();
    formularioImput.focus();
})

function salvarItem() {

    const item = formularioImput.value;
    const checarDuplicado = listaDeItens.some(elemento => elemento.valor.toUpperCase() === item.toUpperCase())

    if(checarDuplicado) {

        alert("Item já existe");
    } else {

        listaDeItens.push({
            valor: item,
            checar: false
        })
    }

    formularioImput.value = "";
}

function mostrarItem() {

    listaDeCompras.innerHTML = "";
    listaItensComprados.innerHTML = "";
    listaDeItens.forEach((elemento, index) => {

        if(elemento.checar) {

            listaItensComprados.innerHTML += `
                <li class="item-compra is-flex is-justify-content-space-between" data-value="${index}">
                    <div>
                        <input type="checkbox" checked class="is-clickable" />
                        <span class="itens-comprados is-size-5">${elemento.valor}</span>
                    </div>
                    <div>
                        <i class="fa-solid fa-trash is-clickable deletar" data-deletar></i>
                    </div>
                </li>
            `

        } else {

            listaDeCompras.innerHTML += `
                <li class="item-compra is-flex is-justify-content-space-between" data-value="${index}">
                    <div>
                        <input type="checkbox" class="is-clickable" />
                        <input type="text" class="is-size-5" value="${elemento.valor}" ${index !== Number(itemAEditar) ? "disabled" : ""} data-item></input>
                    </div>
                    <div>
                        ${index == Number(itemAEditar) ? '<button onclick="salvarEdicao()"><i class="fa-regular fa-floppy-disk is-clickable"></i></button>' : '<i class="fa-regular is-clickable fa-pen-to-square editar" data-editar></i>'} <i class="fa-solid fa-trash is-clickable deletar" data-deletar></i>
                    </div>
                </li>
            `;
        }

    });
 
    const inputEdit = document.querySelector(`[data-value="${itemAEditar}"] input[type="text"]`);
            
    if (inputEdit) {
        
        inputEdit.removeAttribute('disabled');
        inputEdit.focus();
        inputEdit.addEventListener('keydown', event => {
                    
            if (event.key === 'Enter') {
                salvarEdicao();
            }
        })
    }

    const itemCheckbox = document.querySelectorAll('input[type="checkbox"]');

    itemCheckbox.forEach(i => {

        i.addEventListener("click", evento => {

            const itemIndex = evento.target.parentElement.parentElement.getAttribute("data-value");

            listaDeItens[itemIndex].checar = evento.target.checked;

            mostrarItem();
        })
    })

    const deletarItem = document.querySelectorAll("[data-deletar]");

    deletarItem.forEach(i => {

        i.addEventListener("click", evento => {

            const itemIndex = evento.target.parentElement.parentElement.getAttribute("data-value");

            listaDeItens.splice(itemIndex, 1);
            mostrarItem();
        })
    })

    const iconeEditar = document.querySelectorAll("[data-editar]");

    iconeEditar.forEach(i => {

        i.addEventListener("click", evento => {

            // const pai = evento.target.parentElement.parentElement;
            // const filho = pai.children[0];
            // const filhoDoFilho = filho.children[1];
            // console.log(pai);
            // console.log(filho);
            // console.log(filhoDoFilho);
            // filhoDoFilho.focus();
            // const itemInput = document.querySelector("[data-item]");
            // console.log(itemInput);
            // itemInput.focus();

            itemAEditar = evento.target.parentElement.parentElement.getAttribute("data-value");
            mostrarItem();
        })
    })
}