Sobre switch | JavaScript: manipulando elementos no DOM

Onde eu poderia encontrar conteudo extra sobre switch? Estou tentando entender a lógica dessa linha de código

function alterarContexto(contexto) {
    html.setAttribute('data-contexto', contexto)
    banner.setAttribute('src', `./imagens/${contexto}.png`)
    switch (contexto) {
        case "foco":
            titulo.innerHTML = `
            Otimize sua produtividade,<br>
            <strong class="app__title-strong">mergulhe no que importa.</strong>
            `
            break;
        case "descanso-curto":
            titulo.innerHTML = `
            Que tal dar uma respirada?<br> <strong class="app__title-strong">Faça uma pausa curta!</strong>
            `
            break;
        case "descanso-longo":
            titulo.innerHTML = `
            Hora de voltar à superfície.<br><strong class="app__title-strong">Faça uma pausa longa</strong>
            `
        default:
            break;
    }
}

Oi, Rebeca! Espero que esteja tudo bem com você :)

Parece que você está com dúvidas sobre a estrutura switch no JavaScript, certo? Vamos lá!

A estrutura switch é uma maneira de simplificar várias comparações if encadeadas. Ela é usada quando você quer comparar uma expressão com múltiplos valores possíveis e executar diferentes partes do código dependendo do resultado.

No código que você compartilhou, a função alterarContexto(contexto) recebe um argumento contexto, que é uma string. A estrutura switch é usada para comparar esse contexto com diferentes valores possíveis: "foco", "descanso-curto", e "descanso-longo". Dependendo do valor de contexto, um bloco de código diferente é executado.

Por exemplo, se contexto for igual a "foco", o código dentro do bloco case "foco": é executado. Se contexto for igual a "descanso-curto", o código dentro do bloco case "descanso-curto": é executado, e assim por diante. Se contexto não for igual a nenhum desses valores, o código dentro do bloco default: é executado.

A palavra-chave break é usada para "sair" da estrutura switch assim que encontramos o primeiro case que corresponde ao valor de contexto. Se esquecermos de incluir o break, o JavaScript continuará verificando os próximos case mesmo depois de encontrar uma correspondência, o que pode levar a comportamentos inesperados.

Para mais informações sobre a estrutura switch, você pode consultar a documentação oficial do Mozilla Developer Network (MDN), que é uma excelente fonte de referência para JavaScript e outras tecnologias web.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Mergulhe em programação