hand Inicio
hand JSBloqs
hand GutenBloqs
Qu茅?
noched铆a

DESARROLLO WEB con
REACT y WORDPRESS

Ap煤ntate a la newsletter (escribo algo de tanto en cuanto)

C贸mo funciona Array.reduce() en JavaScript

200 palabras
1 minutos
July 25, 2020
blogjavascript

Si controlamos el Array.map(), una manera de ver el .reduce() es verlo como un .superMap()

  1. C贸mo funciona

C贸mo funciona

El reduce, aparte del nombre, lo que hace es iterar un iterable al estilo forEach, map o filter

js
const myArr = [2, 2, 2, 2]
myArr.forEach(el => console.log(el))
myArr.map(el => console.log(el))
myArr.filter(el => console.log(el))
myArr.reduce(el => console.log(el))

Y todo esto de arriba da exactamente el mismo console.log

Bueno, no, todos excepto el reduce

js
const myArr = [2, 2, 2, 2]
myArr.forEach(el => console.log(el))
myArr.map(el => console.log(el))
myArr.filter(el => console.log(el))
myArr.reduce((acc, el) => console.log(el), '')

Ahora s铆, ahora ya dan todos igual

La nomeclatura del reduce es algo distinta, y esto es as铆 porque viene a ser como el padre de las otras 3 funciones

O en otras palabras, podemos utilizar reduce para emular el comportamiento de las dem谩s funciones

Y c贸mo funciona?

Reduce nos integra un acumulador, aunque el nombre puede confundir

Este acumulador en realidad es una variable que recibiremos en cada ciclo y que ser谩 persistente, y podremos hacer lo que queramos con ella

js
const myArr = ['hola', 'que tal', 'estamos', 'por aqu铆']
const resultado = myArr.reduce((acc, el) => {
return (acc += el + ' ... ')
}, '')
console.log(resultado) // "hola ... que tal ... estamos ... por aqu铆 ... "
Ver en CodeSandBox

Es decir, el valor que retornamos es el valor de acc que recibiremos en la pr贸xima iteraci贸n, hasta el final que devolveremos el 煤ltimo valor de acc

Pero el valor de acc es arbitrario

reduce recibe 2 variables, podemos ponerle nombres que nos ayuden un poco

js
const myArr = ['hola', 'que tal', 'estamos', 'por aqu铆']
const resultado = myArr.reduce((frase, parte) => {
return (frase = frase + parte + ' ... ')
}, '')
console.log(resultado) // "hola ... que tal ... estamos ... por aqu铆 ... "

Y podemos escribirlo de forma m谩s compacta

js
const myArr = ['hola', 'que tal', 'estamos', 'por aqu铆']
const resultado = myArr.reduce((frase, parte) => frase + parte + ' ... ', '')
console.log(resultado) // "hola ... que tal ... estamos ... por aqu铆 ... "
Ver en CodeSandBox

Por qu茅 le llaman acumulador? Pues por esto, porque es una variable que acumula

Y esta variable no tiene por qu茅 ser un string, puede ser cualquier cosa

js
const myArr = ['hola', 'que', 'tal', 'estamos', 'por', 'aqu铆']
const resultado = myArr.reduce(
(str, el) => {
str.frase += el + ' ... '
str.palabras.push(el)
return str
},
{ frase: '', palabras: [] }
)
console.log(resultado)
// {
// frase: "hola ... que ... tal ... estamos ... por ... aqu铆 ... ",
// palabras: ["hola", "que", "tal", "estamos", "por", "aqu铆"]
// }
Ver en CodeSandBox

Que el ejemplo no es de lo m谩s 煤til que podamos hacer, pero nos sirve para ver que realmente puedes hacer lo que quieras, tienes total libertad

Otro ejemplo igual de 煤til?

Por ejemplo, para contar elementos de una estructura

js
const posts = [
{ type: 'text', content: 'hey yo' },
{ type: 'text', content: 'hey yu' },
{ type: 'blog', content: 'this is a blog' },
{ type: 'blog', content: 'very interesting content' },
{ type: 'text', content: 'hey ya' },
]

Cu谩ntos elementos de tipo text y de tipo blog tenemos?

js
const posts = [
{ type: 'text', content: 'hey yo' },
{ type: 'text', content: 'hey yu' },
{ type: 'blog', content: 'this is a blog' },
{ type: 'blog', content: 'very interesting content' },
{ type: 'text', content: 'hey ya' },
]
const text_posts = posts.reduce((str, el) => (el.type === 'text' ? (str += 1) : str), 0)
const blog_posts = posts.reduce((str, el) => (el.type === 'blog' ? (str += 1) : str), 0)
console.log(text_posts) // 3
console.log(blog_posts) // 2
Ver en CodeSandBox

Muy sencillo, aunque estamos iterando dos veces el mismo array, no es lo m谩s eficiente

js
const posts = [
{ type: 'text', content: 'hey yo' },
{ type: 'text', content: 'hey yu' },
{ type: 'blog', content: 'this is a blog' },
{ type: 'blog', content: 'very interesting content' },
{ type: 'text', content: 'hey ya' },
]
const { text: text_posts, blog: blog_posts } = posts.reduce(
(str, el) => {
str[el.type] += 1
return str
},
{
text: 0,
blog: 0,
}
)
console.log(text_posts) // 3
console.log(blog_posts) // 2
Ver en CodeSandBox

Ahora es m谩s eficiente (pero definitivamente m谩s ofuscado que antes)

Usos m谩s sofisticados?

Lo podemos utilizar para piping (lo tienes en 茅sta entrada)

馃檵鈥嶁檪锔

Qu茅 tal la entrada?

馃憣 Bien 馃檶馃檶
馃憤 Bien, pero algunas cosas podr铆an explicarse mejor 馃槵
馃し鈥嶁檪锔 Da por sentadas demasiadas cosas 馃槖
馃し鈥嶁檪锔 A ver, hay poca chicha 馃槵
馃し鈥嶁檪锔 Los ejemplos no son muy claros 馃檱鈥嶁檪锔
馃し鈥嶁檪锔 No se entiende, est谩 mal escrito 馃憥
鉁嶏笍 Hay errores, rev铆salo en cuanto puedas 馃檹
Enviar Feedback 鉁嶏笍
El texto est谩 en blanco!
Gracias por enviarme tu opini贸n
馃憤

Si quieres explorar m谩s cursos y m谩s entradas en el blog, los tienes todos en la p谩gina principal, y si el contenido te ha ayudado si lo compartes me ayudas a dar difusi贸n 馃憤

Privacidad
by kuworking.com
[ 2020 >> kuworking ]