[Duda] Duda a la hora de optimizar un poco más el código

Estuve buscando una manera de optimizar la función de limpiarCaja(); ya que esta seleccionando un elemento que ya ha sido seleccionado anteriormente, entonces me parecía innecesario tener que volver a seleccionarlo e intenté simplemente cambiarle el valor. Sin embargo, esto no funciona.

Explico de manera más fiel qué fue lo que hice. Este es el código que tengo escrito actualmente, funciona igual que al del instructor a pesar de que tenga alguna que otra cosa diferente por simple preferencia. Por ejemplo hago el incremento de la variable "intento" antes del if porque la tengo inicializada en 0 y no en 1. Pero sí, funciona todo igual:

function verificarIntento() {
    let numeroUsuario = parseInt(document.getElementById('valorUsuario').value);
    intento++;

    if (numeroSecreto === numeroUsuario) {
        asignarTextoElemento('p', `Acertaste! El número es: ${numeroSecreto}. Lo lograste en ${intento} ${intento == 1 ? 'intento' : 'intentos'}`);
        document.getElementById('reiniciar').removeAttribute('disabled');
    } else {
        asignarTextoElemento('p', `El número secreto es ${numeroSecreto > numeroUsuario ? 'mayor' : 'menor'}`);
    }

    limpiarCaja();
}

function limpiarCaja() {
    document.querySelector('#valorUsuario').value = '';
}

Bueno, básicamente lo que yo quería optimizar es en la función de limpiarCaja() precisamente, ya que esta seleccionando el mismo elemento que ya se selecciona en "numeroUsuario". Primero intenté declarar numeroUsuario con var en vez de let, para que pudiera ser utilizada fuera de esa función, luego de eso realicé la función de limpiar caja así:

function limpiarCaja() {
    numeroUsuario = '';
}

Bueno, no funcionó y el número dentro del input no desaparecía. Luego vi incluso innecesario hacer todo lo anterior y decidí, dentro de la misma función de verificarIntento(), cambiar el valor de la variable así:

function verificarIntento() {
    let numeroUsuario = parseInt(document.getElementById('valorUsuario').value);
    intento++;

    if (numeroSecreto === numeroUsuario) {
        asignarTextoElemento('p', `Acertaste! El número es: ${numeroSecreto}. Lo lograste en ${intento} ${intento == 1 ? 'intento' : 'intentos'}`);
        document.getElementById('reiniciar').removeAttribute('disabled');
    } else {
        asignarTextoElemento('p', `El número secreto es ${numeroSecreto > numeroUsuario ? 'mayor' : 'menor'}`);
    }

    numeroUsuario = '';
}

Esto es algo que me parece bastante lógico desde un principio. Yo ya estoy seleccionando el valor que hay dentro del elemento (en este caso, el input correspondiente al id valorUsuario) y lo estoy almacenando en una variable. Una vez que fue comparado y operado dentro de la función, quiero que ese valor se convierta en algo "nulo" cuando la vuelvo a definir. Pero no entiendo por qué razón simplemente no cambia el valor cuando utilizo una variable que ya almacena lo que necesito modificar, pero cuando almaceno exactamente lo mismo en una variable diferente ahora sí me deja modificar la otra variable (que sería valorCaja como en el video de la clase, por ejemplo).

Es que inclusive si yo hago la función así:

function limpiarCaja() {
    valorCaja = document.getElementById('valorUsuario').value = '';
}

Me está funcionando y me esta limpiando el campo como si nada. No entiendo entonces por qué si esa variable esta almacenando exactamente lo mismo que numeroUsuario, con una sí cambia el valor y con la otra no... Según la lógica que he llevado hasta ahora, este cógido debería funcionar:

function verificarIntento() {
    let numeroUsuario = parseInt(document.getElementById('valorUsuario').value);
    intento++;

    if (numeroSecreto === numeroUsuario) {
        asignarTextoElemento('p', `Acertaste! El número es: ${numeroSecreto}. Lo lograste en ${intento} ${intento == 1 ? 'intento' : 'intentos'}`);
        document.getElementById('reiniciar').removeAttribute('disabled');
    } else {
        asignarTextoElemento('p', `El número secreto es ${numeroSecreto > numeroUsuario ? 'mayor' : 'menor'}`);
    }

    numeroUsuario = '';
}

Básicamente porque numeroUsuario tiene almacenado el valor del input correspondiente al id "valorUsuario", exactamente igual a la variable valorCaja o a la función limpiarCaja() en sí como el primer código que adjunté:

function limpiarCaja() {
    document.querySelector('#valorUsuario').value = '';
}

No sé entonces por qué con una variable sí deja cambiar el valor del elemento y con la otra no.

Mil gracias al profesor que me resuelva esta duda porque llevo rato echandole cabeza y no le encuentro la lógica. Perdón si me extendí mucho, pero realmente quiero asegurarme de que me hago entender, y espero que sí me haya hecho entender porque mi objetivo es conseguir una respuesta y una explicación precisa. Muchas gracias de antemano por cualquier respuesta. Éxitos!