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

Ayúdame a seguir creando contenido 😍

Tienes varias jugosas alternativas:

1. Suscríbete al canal de Youtube (es gratis) click aquí
2. Si estás viendo un video no olvides regalar un 👍 like y comentario 🙏🏼
3. También puedes ser miembro del canal de Youtube click aquí
4. Puedes adquirir cursos premium en Udemy 👇🏼👇🏼👇🏼
   • Curso de HTML + CSS + Bootstrap 5 + Git y más UDEMY
   • Curso de React + Firebase UDEMY
   • Curso Vue.js + Firebase UDEMY

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".

DANGER

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:

• que es paradigma
• pensemosweb
• wikipedia
• ichi.pro
• cosasdigitales
• declarative and imperative

¿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).

• Video recomendado
• curso recomendado EDteam

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

map

• map: 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: 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: 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

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

some

• some: 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: 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: 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: 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: 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: 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()

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: 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

• Cachipún
• pricin interactive
• TODO