# Javascript (Array methods)

Sigamos descubriendo métodos de los array, muy pero muuuuuuuy útiles 🤙.
Estos métodos no mutan el array original, sino que nos devuelven uno nuevo.
functional programming (opens new window)

¿Quieres apoyar los directos? 😍

Tienes varias jugosas alternativas:

Suscríbete al canal de Youtube (es gratis) click aquí (opens new window)
Si estás viendo un video no olvides regalar un 👍 like y comentario 🙏🏼
También puedes ser miembro del canal de Youtube click aquí (opens new window)
Puedes adquirir cursos premium en Udemy 👇🏼👇🏼👇🏼 ¿Quiéres apoyar los directos?

Hoy vamos a conocer:

map
find
filter
reduce

TIP

La programación funcional es otro enfoque común en el desarrollo de software (paradigma de programación). En programación funcional, el código está organizado en funciones más pequeñas y básicas que se pueden combinar para construir programas de mayor complejidad.

Pero antes... ¿qué es un paradigma de programación?

# Paradigmas de programación JS

JavaScript es un lenguaje de "múltiples paradigmas".

WARNING

La guía no es técnica, por ende se trataré de simplificar las definiciones, guiándome de artículos y mi bla bla bla.

# Fuentes:

# ¿Qué es un paradigma de programación?

Un paradigma de programación no es más que una forma de ver y crear código de programación. Para resolver problemas.
Existen diferentes formas de diseñar un lenguaje de programación y varios modos de trabajar para obtener los resultados que necesitan los programadores.
Los lenguajes de programación adoptan uno o varios paradigmas en función del tipo de órdenes que permiten implementar como, por ejemplo, Python o JavaScript, que son multiparadigmas.

Los paradigmas de programación comunes incluyen:

Imperativo: (Emperador) en el que el programador instruye a la máquina cómo cambiar su estado.
- procedimental que agrupa las instrucciones en procedimientos.
- orientado a objetos (OPP o POO) que agrupa las instrucciones con la parte del estado en el que operan.
Declarativo: en el que el programador simplemente declara las propiedades del resultado deseado, pero no cómo calcularlo.
- funcional en el que el resultado deseado se declara como el valor de una serie de aplicaciones de función.
- lógico en la que el resultado deseado se declara como la respuesta a una pregunta sobre un sistema de hechos y reglas.
- matemático en el que el resultado deseado se declara como la solución de un problema de optimización.
- reactivo en el que se declara el resultado deseado con flujos de datos y la propagación del cambio.

# Imperativa vs Declarativa

Programación imperativa: Nosotros dictamos el camino a seguir a través del control de flujo: variables, funciones, if, else, switch, loops ( while, for, for of, for in), try catch, async await. Por lo tanto siempre utilizas programación imperativa en Javascript.
Programación declarativa: Declaras lo que quieres que suceda, no cómo se hace. La programación funcional básicamente significa escribir código que hace algo (declara lo que se hace) pero no es específico sobre cómo hacerlo (imperativo).

TIP

Javascript permite un estilo de desarrollo tanto declarativo como imperativo, atendiendo asi a qué objetivo se busca alcanzar (declarativo) o extendiéndose sobre cómo se debe alcanzar un objetivo (imperativo).
Si bien las últimas incorporaciones del lenguaje muestran una tendencia hacia un paradigma claramente declarativo (funcional), ambos estilos coexisten en la industria actual y suponen diferencias a efectos de optimización, rendimiento, legibilidad o mantenibilidad de nuestras aplicaciones, entre otros.
Ambos enfoques pueden lograr los mismos objetivos, y no tenemos que elegir solo uno al programar porque JavaScript es un lenguaje de "múltiples paradigmas"

# POO

La programación orientada a objetos es una forma de programación imperativa puesto que al programar se describe la secuencia que debe seguir el programa para resolver un problema dado.
Hace uso de estructuras de datos llamadas objetos que aglutinan propiedades y métodos conjuntamente con sus interacciones.
La programación orientada a objetos se basa también en conceptos como la abstracción de datos, la encapsulación, los eventos, la modularidad, la herencia y el polimorfismo.
Se viene una sección dedicada a POO (paciencia 🙏)

# Funcional

La programación funcional básicamente significa escribir código que hace algo (declara lo que se hace) pero no es específico sobre cómo hacerlo (imperativo).

# Conclusiones

Con js podemos utilizar múltiples paradigmas, por ende, conoceremos algunos métodos que nos facilitan la vida para la programación declarativa (funcional) pero seguiremos mezclando nuestra escritura con programación imperativa.

# Array methods

Sigamos descubriendo métodos de los array muy pero muuuuuuuy útiles!
Estos métodos no mutan el array original, sino que nos devuelven uno nuevo.
functional programming (opens new window)

# map

map (opens new window): El método map iterará sobre cada elemento de un arreglo y devuelve un nuevo arreglo que contiene los resultados de llamar a la función callback en cada elemento. Esto lo hace sin mutar el arreglo original.

TIP

Una función de callback es una función que se pasa a otra función como un argumento, que luego se invoca dentro de la función externa para completar algún tipo de rutina o acción.

Chiste repetido: Sección especial más adelante con callback 🤙

Cuando se utiliza la función callback, se pasan tres argumentos. El primer argumento es el elemento actual que se está procesando. El segundo es el índice de ese elemento y el tercero es el arreglo al que se llamó el método map.

const frutas = ["🍌", "🍏", "🍓"];

const nuevoArray = frutas.map((item) => {
    return item;
});

console.log(nuevoArray);

Reduciendo el código:

const frutas = ["🍌", "🍏", "🍓"];
const nuevoArray = frutas.map((item) => item);
console.log(nuevoArray);

¿Pero no es lo mismo que esto?

const frutas = ["🍌", "🍏", "🍓"];
// por referencia (revisar videos anteriores)
const arrayReferencia = frutas; 
frutas.push("🍉");
console.log(arrayReferencia);

// construye un nuevo array con los resultados
// esto lo hace sin mutar el arreglo original
const nuevoArray = frutas.map((item) => item);
frutas.push("🍉");
console.log(nuevoArray);

Devolver solo el name en un nuevo array

const users = [
    { name: "John", age: 34 },
    { name: "Amy", age: 20 },
    { name: "camperCat", age: 10 },
];

const names = users.map((user) => user.name);
console.log(names);

Devolver nuevo array con numeros * 2

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const numerosPorDos = numeros.map((item) => item * 2);

console.log(numerosPorDos);

# filter

filter (opens new window): El método filter() crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada.

const users = [
    { uid: 1, name: "John", age: 34 },
    { uid: 2, name: "Amy", age: 20 },
    { uid: 3, name: "camperCat", age: 10 },
];

const mayor = users.filter((user) => user.age > 30);
console.log(mayor);

Eliminar un usuario por uid

const users = [
    { uid: 1, name: "John", age: 34 },
    { uid: 2, name: "Amy", age: 20 },
    { uid: 3, name: "camperCat", age: 10 },
];

const userFiltrado = users.filter((user) => user.uid !== 2);

console.log(userFiltrado);

# find

find (opens new window): El método find() devuelve el valor del primer elemento del array que cumple la función de prueba proporcionada.

Buscar usuario por uid:

const users = [
    { uid: 1, name: "John", age: 34 },
    { uid: 2, name: "Amy", age: 20 },
    { uid: 3, name: "camperCat", age: 10 },
];

const amy = users.find((user) => user.uid === 2);
console.log(amy);

Utilizando destructuring (opens new window)

const { age } = users.find((user) => user.uid === 2);
console.log(age);

# some

some (opens new window): El método some() comprueba si al menos un elemento del array cumple con la condición implementada por la función proporcionada.

const users = [
    { uid: 1, name: "John", age: 34 },
    { uid: 2, name: "Amy", age: 20 },
    { uid: 3, name: "camperCat", age: 10 },
];

const existe = users.some((user) => user.uid === 2);
console.log(existe);

# findIndex

findIndex (opens new window): El método findIndex() devuelve el índice del primer elemento de un array que cumpla con la función de prueba proporcionada. En caso contrario devuelve -1.

const users = [
    { uid: 1, name: "John", age: 34 },
    { uid: 2, name: "Amy", age: 20 },
    { uid: 3, name: "camperCat", age: 10 },
];

const existe = users.findIndex((user) => user.uid === 4);
console.log(existe);

# slice

slice (opens new window): El método slice() devuelve una copia de una parte del array dentro de un nuevo array empezando por inicio hasta fin (fin no incluido). El array original no se modificará.

const arr = ["Cat", "Dog", "Tiger", "Zebra"];
//             0     [1      2]        3
const newArray = arr.slice(1, 3);

console.log(newArray);

# concat

concat (opens new window): El método concat() se usa para unir dos o más arrays. Este método no cambia los arrays existentes, sino que devuelve un nuevo array.

const array1 = ["a", "b", "c"];
const array2 = ["d", "e", "f"];
const array3 = array1.concat(array2);

console.log(array3);

Spread syntax (opens new window): permite a un elemento iterable tal como un arreglo o cadena ser expandido en lugares donde son esperados.

const array1 = ["a", "b", "c"];
const array2 = ["d", "e", "f"];
const array3 = [...array1, ...array2];

console.log(array3);

# reduce

reduce (opens new window): El método reduce() ejecuta una función reductora sobre cada elemento de un array, devolviendo como resultado un único valor.

Sumar todos los números:

const numeros = [1, 2, 3, 4, 5];

const sumaTodos = numeros.reduce((acc, valorActual) => acc + valorActual);

console.log(sumaTodos);

Aplanar matrices anidadas #01:

const arrayNumeros = [
    [0, 1],
    [2, 3],
    [4, 5],
];

const soloNumeros = arrayNumeros.reduce(
    (acc, current) => acc.concat(current)
);

console.log(soloNumeros);

Aplanar matrices anidadas #02:

const flatSingle = [].concat(...arrayNumeros);
console.log(flatSingle);

Aplanar matrices anidadas #03: flat() (opens new window)

const flatSingle = arrayNumeros.flat();
console.log(flatSingle);

const arrayNumeros = [1, 2, [3, 4, [5, 6]]];

const arrayPlano = arrayNumeros.flat(2);
console.log(arrayPlano);

# split

split: El método split() divide un objeto de tipo String en un array, mediante un separador.

const cadenaMeses = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec";

const arrayMeses = cadenaMeses.split(",");
console.log(arrayMeses);

# join

join (opens new window): el método join() une todos los elementos de una matriz (o un objeto similar a una matriz) en una cadena y devuelve esta cadena.

const cadenaMeses = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec";

const arrayMeses = cadenaMeses.split(",");
console.log(arrayMeses);

const nuevamenteString = arrayMeses.join(",");
console.log(nuevamenteString);

Separador: Es una cadena usada para separar cada uno de los elementos del arreglo. El separador es convertido a una cadena si es necesario. Si este se omite, los elementos del arreglo son separados con una coma (",").

# Práctica #01:

const carrito = document.querySelector("#carrito");
const template = document.querySelector("#template");
const fragment = document.createDocumentFragment();
const agregar = document.querySelectorAll(".card button");

const carritoArray = [];

const agregarCarrito = (e) => {
    const producto = {
        titulo: e.target.dataset.fruta,
        id: e.target.dataset.fruta,
        cantidad: 1,
    };

    // buscamos el indice
    const index = carritoArray.findIndex((item) => item.id === producto.id);

    // si no existe empujamos el nuevo elemento
    if (index === -1) {
        carritoArray.push(producto);
    } else {
        // en caso contrario aumentamos su cantidad
        carritoArray[index].cantidad++;
    }

    console.log(carritoArray);

    pintarCarrito();
};

agregar.forEach((boton) => boton.addEventListener("click", agregarCarrito));

const pintarCarrito = () => {
    carrito.textContent = "";

    // recorremos el carrito y pintamos elementos:
    carritoArray.forEach((item) => {
        const clone = template.content.cloneNode(true);
        clone.querySelector(".lead").textContent = item.titulo;
        clone.querySelector(".rounded-pill").textContent = item.cantidad;
        fragment.appendChild(clone);
    });
    carrito.appendChild(fragment);
};

# FrontendMentor

← Javascript (DOM #01) Javascript (DOM #02) →