Duvida na funcionalidade do addEventListener

Olá, Wesley!

Vamos lá, o método addEventListener é uma função que você pode usar em qualquer objeto do Document Object Model (DOM). Ele espera dois argumentos: o tipo de evento a ser ouvido e a função a ser chamada quando esse evento ocorrer.

No caso do seu exemplo, o evento é 'DOMContentLoaded'. Este é um evento que é disparado assim que o documento HTML foi completamente carregado e analisado, sem esperar por estilosheets, imagens e subframes para terminar de carregar.

O código que você compartilhou está dizendo: "Quando o documento HTML estiver completamente carregado e pronto, execute a função que conta os jogos alugados e exibe o resultado".

Aqui está uma versão comentada do seu código para ajudar a entender:

// Adicione um ouvinte de evento ao objeto do documento.
document.addEventListener('DOMContentLoaded', function() {
    // Quando o evento DOMContentLoaded ocorrer, faça o seguinte:

    // Conte quantos elementos com a classe 'dashboard__item__img--rented' existem...
    jogosAlugados = document.querySelectorAll('.dashboard__item__img--rented').length;

    // ... e então chame a função contarEExibirJogosAlugados.
    contarEExibirJogosAlugados();
});

Espero ter ajudado e bons estudos!

Ajudou sim Vinicius muito obrigado por ter feito o código comentado, em relação ao DOMContentLoaded, pelos sites que visitei a explicação não foi tão clara e objetiva como a sua, novamente muito obrigado.

Olá, também a respeito desse desafio, eu o fiz apenas assim:

let jogosAlugados = document.querySelectorAll('.dashboard__item__img--rented').length;

function exibirJogosAlugados() { console.log(Total de jogos alugados: ${jogosAlugados}); }

e coloquei o jogosAlugados-- e ++ no If.

Dessa forma deu certo. Minha dúvida é pra que serveria então usar o eventlistener?