DÚVIDA SOBRE AS CONSTANTES

Olá, Nathaly!

Essas constantes representam os diferentes estados ou contextos que sua aplicação pode ter. Elas são usadas para alterar o conteúdo da página dinamicamente.

Vamos analisar a função:

function alterarContexto(contexto) {
    html.setAttribute('data-contexto', contexto)
    banner.setAttribute('src', `/imagens/${contexto}.png`)
}

A função, recebe um parâmetro contexto, certo? Que será uma dessas constantes (foco, descanso-curto, descanso-longo). Dentro da função, esse contexto é usado para alterar atributos no HTML.

Depois chamamos a função com os eventos addEventListener():

   focoBt.addEventListener('click', () => {
       alterarContexto('foco')
   })
   curtoBt.addEventListener('click', () => {
       alterarContexto('descanso-curto')
   })
   longoBt.addEventListener('click', () => {
       alterarContexto('descanso-longo')
   })

Ao clicar em cada botão, a função alterarContexto() é chamada com a constante correspondente. Isso significa que a cada clique, o contexto passado para a função muda, alterando assim os atributos no HTML conforme necessário.

Portanto, as constantes são essenciais para definir quais contextos serão passados para a função alterarContexto(). Elas não são descartadas após a definição da função, sendo elas usadas repetidamente sempre que a função é chamada quando trocamos de foco, por exemplo.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!