Práctica de arreglos

Este es el repositorio de acompañamiento de este stream. Si querés saber más sobre arreglos podes visitar la MDN en su artículo de primeros pasos

Instrucciones para correr la aplicación

Podés correr la app desde codesandbox sin necesidad de instalar nada entrando a este link

Si querés correr este repositorio localmente podes clonarlo y luego correr:

npm install
npm run dev

Tareas

Implementá todos los métodos que tengan un @TODO

Intro a arreglos

Los arreglo sirven para almacenar listas.

const articulos = ['cámara', 'celular', 'reloj']

Esas listas pueden almacenar cualquier tipo de dato y no todos los elementos tienen por que ser del mismo tipo.

const articulosMezclados = ['cámara', 2, 'reloj']

Cualquier tipo, incluyendo otros arreglos.

const articulosSuperMezclados = ['cámara', 2, 'reloj', [], ['por', 'que', '?']]

Podemos acceder a sus elementos por índice, los arreglos inician desde el índice 0.

const arregloDeNumeros = ['cero', 'uno', 'dos']

arregloDeNumeros[1] // => 'uno'

Podemos modificar los elementos por índice también

arregloDeNumeros[1] = 'one'

arregloDeNumeros // => [ 'cero', 'one', 'dos' ]

Los arreglos poseen numerosas propiedades y métodos que podemos usar para interactuar con ellos.

const arregloDeNumeros = ['cero', 'uno', 'dos']

arregloDeNumeros.length // 3
arregloDeNumeros.forEach(num => console.log(`número: ${num}`))

// 'número: cero'
// 'número: uno'
// 'número: dos'

Algunos de estos métodos suelen usarse para modificar u obtener copias del arreglo, los métodos que modifican el arreglo original se los llaman métodos mutables.

const arregloMutable = [1, 2, 3]

// Agregar un elemento al final
arregloMutable.push(4)

// Eliminar el primer elemento
arregloMutable.shift()

arregloMutable // [2, 3, 4]

Los métodos que devuelven una copia modificada sin modificar el arreglo original, se los llama métodos inmutables.

const arregloInmutable = [1, 2, 3]

// Agregar un elemento al final
const arregloConcatenado = arregloInmutable.concat(4)

// Eliminar el primer elemento
const arregloCortado = arregloInmutable.slice(1)

arregloInmutable // [1, 2, 3]
arregloConcatenado // [1, 2, 3, 4]
arregloCortado // [2, 3]

El método map crea un nuevo arreglo con los resultados de llamar a una función, aplicada a cada uno de sus elementos.

const arregloInmutable = [1, 2, 3]

// Multiplicar los números por 2
const arregloMultiplicado = arregloInmutable.map(numero => numero * 2)

arregloInmutable // [1, 2, 3]
arregloMultiplicado // [2, 4, 6]

El método filter crea un nuevo arreglo con los que cumplan una condición dada.

const arregloInmutable = [1, 2, 3]

// Filtrar solo los elementos pares
const arregloPar = arregloInmutable.filter(numero => numero % 2 === 0)

arregloInmutable // [1, 2, 3]
arregloPar // [2]

El método reduce ejecuta una función reductora sobre cada elemento, devolviendo como resultado un único valor. Por lo que podríamos no solo filtrar o modificar los valores, sino que podríamos hacer ambos al mismo tiempo.

const arregloInmutable = [1, 2, 3]

// Filtrar solo los elementos pares
const arregloImparMultiplicado = arregloInmutable.reduce(
  (numeros, numero) => numero % 2 !== 0 ? numeros.concat(numero * 2) : numeros,
  []
)

arregloInmutable // [1, 2, 3]
arregloImparMultiplicado // [2, 6]

También hay métodos de arreglos que no devuelven un arreglo. Métodos como some o every verifican una condición a cumplir en los elementos del arreglo.

const arregloInmutable = [1, 2, 3]

// Multiplicar los números por 2
const hayPares = arregloInmutable.some(numero => numero % 2 === 0)
const sonTodosPares = arregloInmutable.every(numero => numero % 2 === 0)

arregloInmutable // [1, 2, 3]
hayPares // true
sonTodosPares // false

La decisión de que métodos usar está en cada uno y en las necesidades que tengamos a la hora de manipular nuestros datos. En este ejercicio vamos a estar haciendo cambios a una aplicación React, donde se aconseja no debemos mutar los estados ya que esto puede interferir con el resultado esperado, por ende vamos a centrarnos en algunos de los métodos inmutables como .concat, .filter, .map, .reduce o .some.

---

Si te gusta mi contenido, seguime en Twitter, Twitch, YouTube, convertite en GitHub sponsor, votame para Github Star o doname un Cafecito ✨