Filtering out falsy values in Javascript #developers #programming #webdevelopment #javascript

Posted by

En JavaScript, a menudo necesitamos filtrar una lista de elementos basándonos en ciertas condiciones. Una de esas condiciones comunes es filtrar por valores "falsy", es decir, aquellos valores que se evalúan como falsos en una expresión booleana. En este tutorial, te mostraré cómo filtrar por valores "falsy" en JavaScript utilizando funciones de filtro y Array.

Primero, crearemos una lista de elementos con algunos valores "falsy" y otros valores "truthy". Por ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filtrar por Falsy Values en JavaScript</title>
</head>
<body>
<script>
const list = [0, false, '', null, undefined, NaN, 42, 'foo', true];
</script>
</body>
</html>

En este caso, los valores "falsy" son 0, false, ”, null, undefined y NaN, mientras que los valores "truthy" son 42, ‘foo’ y true.

Ahora, crearemos una función en JavaScript que filtre por valores "falsy" en la lista que acabamos de crear:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filtrar por Falsy Values en JavaScript</title>
</head>
<body>
<script>
const list = [0, false, '', null, undefined, NaN, 42, 'foo', true];

const falsyValues = list.filter((element) => !element);

console.log(falsyValues);
</script>
</body>
</html>

En este código, utilizamos la función de filtro de JavaScript para recorrer la lista y filtrar los elementos que se evalúan como falsos en la expresión booleana (!element). El resultado se almacenará en la variable falsyValues.

Finalmente, podemos mostrar los valores "falsy" filtrados en la consola con console.log(falsyValues). En este caso, el resultado será [0, false, ”, null, undefined, NaN].

¡Y eso es todo! Ahora sabes cómo filtrar por valores "falsy" en JavaScript utilizando la función de filtro y Array. ¡Espero que este tutorial haya sido útil para ti como desarrollador web! ¡Happy coding!

0 0 votes
Article Rating
11 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@stivenbr1990
2 months ago

Podemos utilizar "??"
arr.filter(item => item ?? false)

@sebastianestrada1311
2 months ago

Puedes hacerle typeof item==="number" con ese obtenes todos los números.

@RuanoProductions
2 months ago

Bro tienes la misma voz que @jscuber

@namelast8908
2 months ago

Años de desarrollo y nunca he visto arreglos de ese tipo 😂

@historyepicvids
2 months ago

const arr = [1, 2, 0, 4, null, undefined, false];

const arrayFiltrado = arr.reduce((acumulador, valorActual) => {

if (valorActual) {

acumulador.push(valorActual);

}

return acumulador;

}, []);

console.log(arrayFiltrado);

@historyepicvids
2 months ago

const arr = [1, 2, 0, 4, null, undefined, false];

const arrayFiltrado = [];

for (let i = 0; i < arr.length; i++) {

if (arr[i]) {

arrayFiltrado[arrayFiltrado.length] = arr[i];

}

}

console.log(arrayFiltrado);

@historyepicvids
2 months ago

const arr = [1, 2, 0, 4, null, undefined, false];

const arrayFiltrado = [];

arr.forEach(function (valor) {

if (valor) {

arrayFiltrado.push(valor);

}

});

console.log(arrayFiltrado);

@fdorantesm
2 months ago

Creo que esa es la más sencilla, lo demás ya es agregarle más condiciones al predicado.

@vegetaneitor
2 months ago

Necesito el nombre de la extensión 🥺.

Por cierto, algo bastante común es que se piensa que el arreglo vacío es un falsy value, pero realmente no lo es (no estrictamente). Así que si quisiera filtrarlo, evaluaría entonces su tamaño.

@imfromperu7944
2 months ago

Que extensión usas para que te muestre el resultado luego del return ?

@jorgegomez-tn3gh
2 months ago

Que extensión usa para el return en el vs?