Duvida

A diferença entre as duas abordagens está no que você está tentando acessar e manipular dentro do seu código.

Explicando a Primeira Função:

function alterarStatus(id) {
    let jogoClicado = document.getElementById(`game-${id}`);
    let imagem = jogoClicado.querySelector('.dashboard__item__img');
    let nomeJogo = jogoClicado.querySelector('.dashboard__item__name');
    let botao = jogoClicado.querySelector('.dashboard__item__button');

    if (jogoClicado.classList.contains('Alugar')) {
        jogoClicado.classList.remove('Alugar');
        jogoClicado.classList.add('Devolver');
    } else {
        jogoClicado.classList.add('Alugar');
        jogoClicado.classList.remove('Devolver');
    }
}

O que acontece aqui?

• Você está usando jogoClicado (que é o elemento com o id game-${id}) para verificar se ele possui a classe Alugar ou Devolver. Isso indica o status do jogo, ou seja, se ele está disponível para aluguel ou já foi alugado.
• A manipulação é feita na classe do próprio jogoClicado, e não em um elemento específico dentro dele (como a imagem, botão ou nome).
• A variável imagem é selecionada, mas não é utilizada dentro da lógica de condição, apenas dentro do escopo do código.

Explicando a Segunda Função:

function alterarStatus(id) {
    let jogoClicado = document.getElementById(`game-${id}`);
    let imagem = jogoClicado.querySelector('.dashboard__item__img');
    let nomeJogo = jogoClicado.querySelector('.dashboard__item__name');
    let botao = jogoClicado.querySelector('.dashboard__item__button');

    if (imagem.classList.contains('dashboard__item__img--rented')) {
        imagem.classList.remove('dashboard__item__img--rented');
        imagem.classList.remove('dashboard__item__button--return');
        botao.textContent = 'Alugar';
    } else {
        imagem.classList.add('dashboard__item__img--rented');
        botao.classList.add('dashboard__item__button--return');
        botao.textContent = 'Devolver';
    }
}

O que acontece aqui?

• Nesta função, a lógica está sendo aplicada à imagem do jogo, especificamente verificando se ela tem a classe dashboard__item__img--rented (que indica que o jogo foi alugado).
• A manipulação é feita na classe da imagem e no botão. Se a imagem já tiver a classe de alugado, você a remove, além de alterar o texto e a classe do botão.
• Aqui, o estado da imagem (alugado ou não) é diretamente manipulado com base na classe, e não o estado geral do jogoClicado.

A Diferença Principal:

• Primeira Função: A verificação e manipulação de classes é feita no elemento principal (o jogoClicado), representando o estado geral do jogo (se está para alugar ou devolver).
• Segunda Função: A verificação é feita em um elemento específico (a imagem), e as ações dependem da classe desse elemento (se a imagem está com a classe que indica que o jogo foi alugado ou não).

Por que não poderia usar jogoClicado no segundo caso?

No segundo exemplo, você está tentando alterar o comportamento da imagem e do botão com base no estado da imagem (se o jogo foi alugado ou não). Se usasse jogoClicado em vez de imagem, a lógica não faria sentido, porque jogoClicado é o contêiner geral do jogo, e você estaria tentando verificar e manipular a classe de um contêiner que não reflete diretamente o estado do jogo, mas sim de sua imagem ou botão. A manipulação correta é feita nos elementos que representam o status visual do jogo, como a imagem e o botão.

Em resumo, no segundo exemplo, a lógica está mais focada nos detalhes visuais e específicos (a imagem e o botão), enquanto no primeiro exemplo, a lógica está mais focada no estado geral do jogo como um todo.