[Duda] Consulta sobre el orden de las líneas de código

¿Por qué las líneas de código en JavaScript que afectan al resalte de los botones se escribieron al inicio de la función cambiarContexto? Según mi entendimiento y lógica, respetando el orden de los elementos en HTML , esta línea de código debería ir inclusive después del switch. Solamente necesito aclarar la duda.

function cambiarContexto(contexto){

botones.forEach(function(contexto){
    contexto.classList.remove('active')
})

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

switch (contexto) {
    case "enfoque":
        titulo.innerHTML = `
        Optimiza tu productividad,<br>
            <strong class="app__title-strong">sumérgete en lo que importa.</strong>
        `
        break;
    case "descanso-corto":
        titulo.innerHTML = `
        ¿Qué tal tomar un respiro?
            <strong class="app__title-strong"> ¡Haz una pausa corta!</strong>
        `
        break;
    case "descanso-largo":
        titulo.innerHTML = `
        Hora de volver a la superficie
            <strong class="app__title-strong"> Haz una pausa larga.</strong>
        `
        break;
    default:
        break;
}

}