JavaScript es un lenguaje de programación muy complejo y extenso que nos permite ejecutar todo tipo de acciones. Algunas de estas acciones las facilitan métodos nativos de este lenguaje. Sin embargo, puede que no siempre conozcamos estos métodos.
Por ello, es bueno reconocer otras formas de ejecutar toda acción. En este post, te enseñaremos cómo reemplazar el método every en JavaScript para que reconozcas otra manera de generar su lógica.
Antes de conocer el método every en JavaScript
En nuestro post sobre habilitar botón al rellenar formulario en JavaScript, hemos utilizado el método every para comprobar si todos los elementos de un array de inputs tienen valor.
Esto nos ha permitido definir que, solo si todos los input están llenos, se habilita el botón. Esta lógica se evidencia en las siguientes líneas de código:
suscribeToEvents ( ) {
const inputElements = Array.from ( this.formElement.querySelector ('all');
);
inputElements.forEach (inputElement) => {
inputElement.addEventListener ("input", ( ) => {
inputElements.every ((inputElement => inputElement.value);
});
});
}
}Ahora, esta misma lógica la podemos programar sin utilizar este método every, pues finalmente existen muchas maneras de ejecutar una sola acción en todo lenguaje de programación. A continuación, te enseñamos cómo reemplazar el método every en JavaScript para que reconozcas las distintas maneras que tenemos de solucionar o programar un comportamiento.
Si quieres conocer el funcionamiento de este método antes de aprender a reemplazarlo, te recomendamos nuestro post sobre métodos some y every en JavaScript. También puedes leer el artículo array.prototype.every en la página oficial de Mozilla Developer Network (MDN).
¿Cómo reemplazar el método every en JavaScript?
Para reemplazar el método every en JavaScript, podríamos programar una lógica usando el método filter en JavaScript. Para ello, podríamos hacer un filtro del array que queremos recorrer y determinar como condición de retorno eso que queríamos comprobar usando every.
Entonces, siguiendo nuestro ejemplo anterior, podríamos hacer un filtro del array inputElements y determinar como condición de retorno el hecho de que el elemento tenga valor. A continuación, te mostramos como escribiríamos este filtro, guardando el proceso en una constante filledInputs:
const filledInputs = inputElements.filter (inputElement => InputElement.value)
Ahora, esta línea solo nos hace el filtro del array y nos devuelve un nuevo array con los elementos que cumplan la condición de retorno. Es decir, no nos está diciendo si todos los elementos la cumplen, simplemente nos dice cuáles. Entonces, para reemplazar el método every en JavaScript, deberemos comparar la longitud del arrray devuelto por filter con la longitud del array original. Así, cuando la longitud sea la misma, estaremos concluyendo que todos los elementos del array original cumplen la condición.
Para ejecutar esta segunda parte de la lógica, podemos utilizar el condicional if…else. Por ahora, definiremos como resultado de esta lógica un simple console.log de los valores booleanos true y false. Sin embargo, podríamos ejecutar acciones más concretas, como habilitar o deshabilitar un botón.
A continuación, te mostramos cómo quedaría nuestro método original surpriseToEvents con este cambio de método:
suscribeToEvents ( ) {
const inputElements = Array.from (
this.formElement.querySelectorAll ("input"
);
inputElements.forEach (inputElement) => {
inputElement.addEventListener ("input", ( ) => {
const filledInputs = inputElements.filter (
(inputElement) = inputElements.filter (
(inputElement) => inputElement.value
);
if (filledInputs.length === inputElements.length) {
console.log (true);
} else {
console.log (false);
}
});
});
}Como puedes ver, con algunas líneas de código “caseras”, hemos logrado reemplazar el método every en JavaScript y obtener exactamente el mismo resultado. Puede que estas líneas tengan una forma más fácil y eficiente de ser ejecutadas. Sin embargo, no hay ningún aspecto bueno o malo en este reemplazo.
Finalmente, desde KeepCoding te motivamos a usar la cabeza y encontrar modos de solucionar problemas. Llegar al resultado con uno u otro bloque de código es igualmente válido. De hecho, reemplazar un método every en JavaScript de esta manera es una fuente de orgullo, pues no es nada sencillo para un principiante.
Ahora que sabes cómo reemplazar el método every en JavaScript, seguro que quieres seguir aprendiendo sobre este poderoso lenguaje de programación.
Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás en profundidad a dominar herramientas y lenguajes fundamentales para la web, como pueden ser HTML, CSS y JavaScript. ¿A qué esperas para dar el siguiente paso en tu aprendizaje y convertirte en todo un profesional? ¡Solicita más información ya mismo y descubre como cambiar tu vida en pocos meses!
