Filtrado y reducción con filter( ) y reduce( )

Proceso de `reduce`: 1. **Inicio:** El `accumulator` es `{}`. 2. **Primera iteración:** * `currentValue` es `'apple'`. * `accumulator['apple']` no existe, así que se establece `accumulator['apple'] = 1`. * `accumulator` ahora es `{'apple': 1}`. 3. **Segunda iteración:** * `currentValue` es `'banana'`. * `accumulator['banana']` no existe, así que se establece `accumulator['banana'] = 1`. * `accumulator` ahora es `{'apple': 1, 'banana': 1}`. 4. **Tercera iteración:** * `currentValue` es `'hello'`. * `accumulator['hello']` no existe, así que se establece `accumulator['hello'] = 1`. * `accumulator` ahora es `{'apple': 1, 'banana': 1, 'hello': 1}`. 5. **Cuarta iteración:** * `currentValue` es `'bye'`. * `accumulator['bye']` no existe, así que se establece `accumulator['bye'] = 1`. * `accumulator` ahora es `{'apple': 1, 'banana': 1, 'hello': 1, 'bye': 1}`. 6. **Quinta iteración:** * `currentValue` es `'banana'`. * `accumulator['banana']` existe, así que se incrementa `accumulator['banana']` en 1. * `accumulator` ahora es `{'apple': 1, 'banana': 2, 'hello': 1, 'bye': 1}`. 7. **Sexta iteración:** * `currentValue` es `'bye'`. * `accumulator['bye']` existe, así que se incrementa `accumulator['bye']` en 1. * `accumulator` ahora es `{'apple': 1, 'banana': 2, 'hello': 1, 'bye': 2}`. 8. **Séptima iteración:** * `currentValue` es `'bye'`. * `accumulator['bye']` existe, así que se incrementa `accumulator['bye']` en 1. * `accumulator` ahora es `{'apple': 1, 'banana': 2, 'hello': 1, 'bye': 3}`.

Shortcut de `console.log` en VisualStudioCode: **-> clg** \*\* Solo funciona habiendo instalado previamente la extensión `JavaScript (ES6) code snippets`

Tanto \*\*`filter()`\*\* como \*\*`reduce()`\*\* son métodos poderosos en JavaScript que permiten manipular arrays de manera efectiva, pero tienen propósitos muy distintos. \### \*\*1. `filter()`\*\* El método \*\*`filter()`\*\* se utiliza para \*\*filtrar los elementos de un array\*\* que cumplen con una condición específica. Devuelve un \*\*nuevo array\*\* con los elementos que pasen el filtro (es decir, aquellos para los que la función de filtro devuelva `true`). \*\*Ejemplo:\*\* ```javascript let numbers = \[1, 2, 3, 4, 5, 6]; // Filtrar los números pares let evenNumbers = numbers.filter(function(number) { return number % 2 === 0; }); console.log(evenNumbers); ``` \*\*Salida:\*\* ``` \[2, 4, 6] ``` \*\*Características de `filter()`\*\*: \- Devuelve un \*\*nuevo array\*\* con los elementos que cumplen la condición. \- No modifica el array original. \- Si ningún elemento cumple la condición, devuelve un array vacío. \### \*\*2. `reduce()`\*\* El método \*\*`reduce()`\*\* se utiliza para \*\*reducir\*\* un array a un solo valor, como la suma de sus elementos, un producto, o incluso un objeto o array. Funciona aplicando una función acumulativa a los elementos del array, lo que permite obtener un resultado único basado en todos los elementos. \*\*Ejemplo:\*\* ```javascript let numbers = \[1, 2, 3, 4, 5]; // Sumar todos los números del array let sum = numbers.reduce(function(accumulator, currentValue) { return accumulator + currentValue; }, 0); console.log(sum); ``` \*\*Salida:\*\* ``` 15 ``` \*\*Características de `reduce()`\*\*: \- Devuelve un \*\*único valor\*\* (puede ser un número, string, objeto, array, etc.). \- Tiene un \*\*acumulador\*\* que almacena el resultado de cada iteración. \- Requiere un \*\*valor inicial\*\* (en este caso `0`), que es el valor inicial del acumulador. \- Puede ser más complejo, pero es extremadamente útil para realizar operaciones como sumar, concatenar, combinar elementos, o incluso construir objetos a partir de un array. \### \*\*Diferencias clave entre `filter()` y `reduce()`\*\*: \- \*\*Propósito\*\*: \- `filter()` se utiliza para \*\*filtrar\*\* elementos de un array y devolver un nuevo array que solo contiene los elementos que cumplen la condición. \- `reduce()` se utiliza para \*\*reducir\*\* el array a un único valor acumulado (como una suma, producto o cualquier otra operación agregada). \- \*\*Resultado\*\*: \- `filter()` devuelve un \*\*nuevo array\*\* con los elementos que cumplen la condición. \- `reduce()` devuelve \*\*un solo valor\*\* que es el resultado de aplicar la función de acumulación. \### Ejemplo comparativo: \*\*`filter()` para filtrar números mayores a 2:\*\* ```javascript let numbers = \[1, 2, 3, 4, 5]; let filteredNumbers = numbers.filter(function(number) { return number > 2; }); console.log(filteredNumbers); // \[3, 4, 5] ``` \*\*`reduce()` para sumar todos los números:\*\* ```javascript let numbers = \[1, 2, 3, 4, 5]; let sum = numbers.reduce(function(accumulator, number) { return accumulator + number; }, 0); console.log(sum); // 15 ``` \### \*\*Usos típicos:\*\* \- \*\*`filter()`\*\*: \- Para extraer elementos que cumplen ciertas condiciones. \- Ejemplo: Filtrar productos con un precio mayor a cierto valor, o filtrar estudiantes con notas superiores a un umbral. \- \*\*`reduce()`\*\*: \- Para obtener un solo valor a partir de un array. \- Ejemplo: Sumar todos los valores de un array, calcular el total de ventas, o construir un objeto a partir de un array de datos. \### Ejemplo más avanzado de `reduce()`: \*\*Convertir un array de objetos en un objeto con `reduce()`:\*\* ```javascript let people = \[ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 35 } ]; // Crear un objeto donde los nombres son claves y las edades son valores let peopleObject = people.reduce(function(acc, person) { acc\[person.name] = person.age; return acc; }, {}); console.log(peopleObject); ``` \*\*Salida:\*\* ``` { Alice: 25, Bob: 30, Charlie: 35 } ``` \### Conclusión: \- Usa \*\*`filter()`\*\* cuando necesites \*\*extraer\*\* elementos específicos de un array. \- Usa \*\*`reduce()`\*\* cuando necesites \*\*agregar o combinar\*\* todos los elementos del array en un solo valor o resultado.

No termino de entender bien como funciona **reduce()**. Estoy buscando un sitio donde lo expliquen de mejor manera

Excelente explicación y buena onda 😎

Quiero compartir con ustedes un ejercicio "avanzado" para el uso de reduce que se me ocurrió mientras veía esta clase. ```js /* El siguiente ejemplo será avanzado, tendremos un array de personas con los atributos nombre, edad y sexo (representados por las letras F y M), y aplicaremos el método reduce() para contar la cantidad de personas del sexo femenino, del sexo masculino y los menores de 16 años. Note el valor inicial del acumulador, se trata de un objeto con tantos atributos para cada contador. */ const people = [ { name: 'John', age: 32, gender: 'M', }, { name: 'Charlie', age: 15, gender: 'F', }, { name: 'Susan', age: 10, gender: 'F', }, { name: 'Max', age: 42, gender: 'M', }, { name: 'Louis', age: 13, gender: 'F', }, { name: 'Erika', age: 18, gender: 'F', }, { name: 'Richard', age: 60, gender: 'M', }, { name: 'Lucas', age: 12, gender: 'M', }, { name: 'Maria', age: 23, gender: 'F', }, { name: 'Angel', age: 19, gender: 'M', }, { name: 'Miriam', age: 39, gender: 'F', }, { name: 'Lina', age: 48, gender: 'F', }, ] const peopleCounterByConditions = people.reduce((counter, currentPeople) => { if (currentPeople.gender === "F") counter.females+= 1 if (currentPeople.gender === "M") counter.males+= 1 if (currentPeople.age < 16) counter.underAge += 1 return counter }, { males: 0, females: 0, underAge: 0, }) console.log(people); console.log(peopleCounterByConditions); ```/\* El siguiente ejemplo será avanzado, tendremos un array de personas con los atributos nombre, edad y sexo (representados por las letras F y M), y aplicaremos el método reduce() para contar la cantidad de personas del sexo femenino, del sexo masculino y los menores de 16 años. Note el valor inicial del acumulador, se trata de un objeto con tantos atributos para cada contador.\*/ *const* people = \[ { name: 'John', age: 32, gender: 'M', }, { name: 'Charlie', age: 15, gender: 'F', }, { name: 'Susan', age: 10, gender: 'F', }, { name: 'Max', age: 42, gender: 'M', }, { name: 'Louis', age: 13, gender: 'F', }, { name: 'Erika', age: 18, gender: 'F', }, { name: 'Richard', age: 60, gender: 'M', }, { name: 'Lucas', age: 12, gender: 'M', }, { name: 'Maria', age: 23, gender: 'F', }, { name: 'Angel', age: 19, gender: 'M', }, { name: 'Miriam', age: 39, gender: 'F', }, { name: 'Lina', age: 48, gender: 'F', },] *const* peopleCounterByConditions = people.reduce((*counter*, *currentPeople*) *=>* { if (*currentPeople*.gender === "F") *counter*.females+= 1 if (*currentPeople*.gender === "M") *counter*.males+= 1 if (*currentPeople*.age < 16) *counter*.underAge += 1 return *counter*}, { males: 0, females: 0, underAge: 0,}) console.log(people);console.log(peopleCounterByConditions);


Hola! Puedes aprender más sobre estos dos métodos consultando su documentación: * 📃 [.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) * 📃 [.reduce()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) Aquí te dejo mi versión de apuntes de esta clase! 

## Métodos de Arrays en JavaScript: Filter y Reduce ### Filter * El método `Filter` en JavaScript se utiliza para crear un nuevo array con todos los elementos que pasan una prueba (condición) implementada por una función proporcionada. * `Filter` no modifica el array original. ### Ejemplo de uso de Filter * Dado un array de números: `[2, 4, 8, 10, 12]`, queremos crear un nuevo array con números mayores a 5. * Implementación en código:const numbers = \[2, 3, 4, 5, 8, 9, 10]; const evenNumbers = numbers.filter(number => number % 2 === 0); console.log(evenNumbers); // \[2, 4, 8, 10] * En este ejemplo, `evenNumbers` contiene solo los números pares del array original. ### Concepto de módulo * El operador módulo `%` devuelve el residuo de una división. * Ejemplo: `4 % 2 = 0` (4 es divisible por 2, residuo 0), `5 % 2 = 1` (5 no es divisible por 2, residuo 1). * Utilizando este operador, podemos identificar números pares (módulo 0) y números impares (módulo distinto de 0). ### Reduce * El método `Reduce` en JavaScript se utiliza para ejecutar una función reductora sobre cada elemento de un array, resultando en un único valor. * `Reduce` no modifica el array original. ### Ejemplo de uso de Reduce * Dado un array de números: `[1, 2, 3, 4, 5]`, queremos obtener la suma de todos los elementos. * Implementación en código:const numbersReduce = \[1, 2, 3, 4, 5]; const sum = numbersReduce.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // 15 * En este ejemplo, `sum` es la suma de todos los números en el array original. ### Contar la frecuencia de palabras con Reduce * Dado un array de palabras: `["apple", "banana", "hello", "bye", "banana", "bye", "bye"]`, queremos contar la frecuencia de cada palabra. * Implementación en código:const words = \["apple", "banana", "hello", "bye", "banana", "bye", "bye"]; const wordFrequency = words.reduce((accumulator, currentValue) => { if (accumulator\[currentValue]) { accumulator\[currentValue]++; } else { accumulator\[currentValue] = 1; } return accumulator; }, {}); console.log(wordFrequency); // { apple: 1, banana: 2, hello: 1, bye: 3 } * En este ejemplo, `wordFrequency` es un objeto que muestra cuántas veces se repite cada palabra en el array original.

Ustedes sabian que el typeof(NaN) es number? Aqui dejo un ejemplo de como filtrar los numeros de un array mixto.

Alguien podría explicarme porque hasta de último coloca { } dos corchetes vacíos? Es lo único que no comprendo

Practicando me he encontrado con este ejercicio en cual nos pide que devuelva la suma de todos los múltiplos de 3 o 5 menores que el número pasado como argumento.Y utilizando esta funcion que utiliza los metodos de la clase reduce() y filter() se llega una logica muy simple `function solution(number`){ ` return number < 1 ? 0 : [...new Array(number).keys()].filter(n => n % 3 == 0 || n % 5 == 0).reduce((a, b) => a + b`); `}`

Para esta clase sobre el reduce() hay que entender como acceder a las propiedades de un objeto digamos que tienes un objeto con clave y valor de frutas: `const frutas = {` ` apple: 0,` ` banana: 0,` ` lemon: 0` `}` La forma de acceder al valor de apple normalmente es `` `frutas.apple // dara un 0 en este ejemplo,` `` pero no solo puedes acceder a traves de su propiedad sino con un string y en corchetes como si fuera el indice de un arreglo (obviamente no lo es) `` `frutas['apple'] // igualmente un cero` `` Etonces reduce lo que hizo es que: \* Primeramente no devuelve un valor como number o string, definimos que devuelve un valor si pero ese valor sera un objeto {} \* Lo que hace reduce es que leera `accumulator['apple']` pero no existe dentro del objeto entonces la primer condicion dice que si no existe lo acumula y le incrementa uno al valor de esa propiedad `accumulator[currentValue]++ `es como decir accumulator (recuerda que acumulator es un objeto porque asi lo definimos) `accumulator['apple'] = accumulator\['apple'] + 1 `entonces quedaria `{'apple' : 1} `, entonces si no existe le agregamos simplemente un uno a la propiedad apple y si existe de nuevo utilizamos el contador para sumar pero como ya existe simplemente incrementamos el valor de la propiedad \* En resumen creo que el ejemplo del reduce no se entendio bien, porque se esta trabajando tambien con objetos

Creo que el ejemplo del reducer no se entiende del todo porque se esta trabajando con objetos, hay que saber las formas en las que se llama a la propiedad de un objeto y con eso se entenderá mejor


abecés estoy escribiendo un código y de repente la linea de escribir se pone a parpadear y si quiero modificar una palabra la empieza a borrar, como quito eso? hay alguna configuración![]() de botones ![]()

Me parece interesente el ejercicio de la función reduce(), puesto que en mi trabajo me encontré con un problema similar, pero aproximación fue un poco diferente, usando un Map para hacer ese registro, Map\<string, number>, y este Map se llenaba en un forEach, por ejemplo, en word.forEach(...) para llenar el Map y luego otro un word.filter(...) usando el Map como condición.

Me confunde el parámetro *accumulator\[currentValue]* en el segundo ejemplo, a primera vista lo veo como el elemento de un array de nombre *accumulator*. Si alguien me ayuda a entender esa parte, lo agradecería un montón.

Reduce es una método para "reducir" arreglos (valga la redundancia) Donde la "reducción" típicamente se usa para llegar a un solo valor, pero no es necesariamente así: se puede usar un reduce para implementar un map o crear un objeto aún más "grande" reduce toma dos argumentos: - una función reductora - el valor inicial del acumulador La función reductora recibe dos valores: - el acumulador - el objeto actual. Sobre dicha función reductora: - Debe retornar el valor siguiente para el acumulador. - No importa el tipo de dato del acumulador, ni de los valores del arreglo, ni del valor que retorna; siempre y cuando sean coherentes con el funcionamiento interno de la función reductora, y con lo que consideremos que debe de obtenerse al final de la reducción

🟡 **No recomiendo utilizar 'reduce' para frecuencias** No lo recomiendo porque su sintaxis es confusa y puede ser muy complicada de leer en algunos problemas. Yo recomiendo utilizarlo únicamente para **reducir a un solo valor.** Es mejor realizar un `for...of` con un objeto inicial. ```js const wordFrecuency = {} for (let word of words){ if (!wordFrecuency[word]){ wordFrecuency[word] = 0 } wordFrecuency[word]++ } ``` Incluso si conoces el operador nullish el código puede reducirse a: ```js for (let word of words){ wordFrecuency[word] = (wordFrecuency[word] ?? 0) +1 } ``` O también utilizando operadores de asignación avanzados: ```js for (let word of words){ wordFrecuency[word] ??= 0 wordFrecuency[word]++ } ``` Como prefieras, lo importante es crear código que se pueda **leer fácilmente**. ¡Nunca pares de aprender! 💚

 

* Estructura del metodo inmutable 'reduce': ```js const result = arreglo.reduce( (acum, element) => { // Interaccion con mis 2 variables }, acumValInicial) ``` * El acumValInicial define el tipo de variable de acum y en redundancia, el valor inicial de acum. * Si no se asigna el valor de acumValInicial, este tomara el valor inicial del primer elemento del arreglo y la iteracion comenzara con el segundo elemento. * Este metodo reducer retorna el ultimo valor de acum.

**RESUMEN:**  

no entendi lo del objeto vacio :( y el return lo demas si

El módulo `%` estaría mejor si lo agregaran en la sección de `Introduccion de JavaScript` he conocido muchas personas que se les olvida el `%` (también me ha pasado jaja). Como se vio en la clase, ese signo nos puede quitar muchas condicionales cuando programamos algo.

Les presento mi ejemplo practico ![]()