DEV Community: Javi Carrasco

js❤️ - Cierre

Javi Carrasco — Sun, 06 Feb 2022 07:26:28 +0000

Esta serie de artículos no representa todo lo que puede hacer JavaScript, nos hemos dejado fuera conceptos muy interesantes como async await, closures, parámetros por defecto, promises, template literals, módulos, clases, generators y un largo etcétera.

Espero que te sirva como referencia para entender los conceptos que sí hemos visto: spread operator, destructuring, funciones y los métodos para procesar arrays. Y cómo se pueden utilizar para conseguir inmutabilidad y a la vez escribir un código más conciso y expresivo.

Muchas gracias por llegar hasta aquí. Si quieres ponerte en contacto conmigo, soy jacarma en twitter

js❤️ - .map, .forEach, .find, .filter, .reduce

Javi Carrasco — Sat, 05 Feb 2022 11:17:46 +0000

.map, .forEach, .find, .filter, .reduce

La mayoría de estos métodos ya estaban antes de es6 pero creo que resulta muy útil hablar de ellos también.

map. Permite ejecutar una transformación a cada uno de los elementos de un array sin modificar la colección original

planets.map(({ name }) => name.toLowecase());
// [ "mercury", "venus", "earth", "mars", "jupiter", "saturn", "uranus", "neptune", "pluto"]

forEach. Permite ejecutar una función sobre cada elemento de la colección. Sin embargo no devuelve un nuevo array con los resultados como hace .map

planets.forEach((planet) =>
  fetch("/savePlanet", { method: "POST", body: JSON.stringify(planet) })
);

find. Permite encontrar el primer elemento que cumple la condición

roles.find(({id}) => id === 'admin')
// {id: "admin", name: "Administrator", ...}

filter. Obtiene el subconjunto de los elementos que cumplen la condición

const productsOutOfStock = products.filter((product) => !product.hasStock);

reduce. Devuelve un solo valor que resume el array. Sirve para hacer agregados como la suma, la media, la mediana, etc.

[1, 2, 3].reduce((acc, n) => acc + n, 0);
// 1 + 2 + 3 = 6

El formato le parece confuso a mucha gente. Pero en realidad es muy similar a cómo lo haríamos con un bucle for:

// con un bucle for
const nums = [1, 2, 3];
let VALOR_INICIAL = 0;
let ACUMULADO = VALOR_INICIAL;

for (let i = 0; i < nums.length; i++) {
    const num = nums[i];
    ACUMULADO = ACUMULADO + num;
}

Con reduce

[1, 2, 3].reduce((ACUMULADO, num) => ACUMULADO + num, 0 /* ← VALOR_INICIAL */);

En el segundo parámetro del reduce ponemos el VALOR_INICIAL.

La función que pasamos como primer parámetro siempre devuelve el nuevo valor ACUMULADO. Es equivalente al interior del bucle for anterior, pero en lugar de establecer el valor ACUMULADO lo devuelve.

Podemos convertir un array de propiedades a un objeto tipo diccionario mediante un reduce:

const properties = [
  { key: "color", value: "#FF00F0" },
  { key: "size", value: 4 },
];
const dictionary = properties.reduce(
  (acc, { key, value }) => ({ ...acc, [key]: value }),
  {} /* ← VALOR_INICIAL */
);
// dictionary = {color: '#FF00F0', size: 4}

Pero la potencia de estos métodos es su concatenación. Al concatenarlos podemos definir un pipeline de proceso de datos que va ajustando el array en pasos pequeños hasta obtener el valor deseado.

Por ejemplo podríamos obtener el total de un pedido de esta forma:

const total = order.products
  .filter((p) => !p.isFree) // remove promotional free items
  .map((p) => p.num * p.price) // multiply the price * num of items
  .reduce((acc, amount) => acc + amount); // sum all the amounts

¡A ponerlo en práctica!

El ejercicio final tiene que ver con inmutabilidad y React. Seguro que lo resuelves

Ejercicio 2 en CodeSandbox

ver solución
Solución Ejercicio 2 en CodeSandbox

Siguiente - Cierre →

js❤️ - Arrow functions y funciones de primera clase

Javi Carrasco — Sat, 05 Feb 2022 11:09:31 +0000

Arrow functions y funciones de primera clase

Las arrow functions nos permiten definir funciones de una forma más compacta.

// funciones normales
function sum(a, b) {
  return a + b;
}

// arrow function
const sum = (a, b) => a + b;

Lo que facilita definir funciones y pasarlas como argumentos en un solo paso

const nums = [1, 2, 3];
const squares = nums.map((n) => n * n);

Para que una arrow function devuelva un objeto debemos ponerlo entre paréntesis

const merge = (obj1, obj2) => ({ ...obj1, ...obj2 });

Cuidado porque podemos crear funciones nuevas cuando no lo deseamos.
En el siguiente ejemplo el componente Screen pasa una nueva función a Button cada vez que Screen se re-renderiza.
Y esto provoca que cada vez que el usuario escribe una letra en Input se re-renderice Button

function Screen() {
  const [value, setValue] = useState("");
  const [loading, setLoading] = useState(false);
  return (
    <div>
      <Input value={value} onChange={setValue} />
      <Button onclick={() => setLoading(true)} /> {/* ⛔️ */}
    </div>
  );
}

React nos permite solucionarlo con el hook useCallback que mantiene la función siempre igual para esta instancia del componente Screen.

function Screen() {
  const [value, setValue] = useState("");
  const [loading, setLoading] = useState(false);
  const activateLoading = useCallback(() => setLoading(true), [setLoading]);
  return (
    <div>
      <Input value={value} onChange={setValue} />
      <Button onclick={activateLoading} />
    </div>
  );
}

Además JavaScript tiene first-class functions. Eso significa que las funciones se tratan como una variable, pueden ser pasadas como argumento y devueltas en otras funciones.
Esto da lugar a algunos patrones interesantes:

Funciones que devuelven otras funciones (atención a la closure)

const logger = (module) => (msg) => console.log(`${module}: ${msg}`);

const log = logger("BeneficiaryApi");

log("Requested Beneficiaries");
// "BeneficiaryApi: Requested Beneficiaries

log("Beneficiaries request successful");
// "BeneficiaryApi: Beneficiaries request successful

Podemos ahorrarnos crear funciones intermedias

const Wrapper = ({ value, onChange }) => (
  <div>
    <Input value={value} onChange={(val) => onChange(val)} /> {/* ⛔️ */}
  </div>
);

Puede ser escrita como

const Wrapper = ({ value, onChange }) => (
  <div>
    <Input value={value} onChange={onChange} />
  </div>
);

O mejor incluso, ya que las props son las mismas

const Wrapper = (props) => (
  <div>
    <Input {...props} />
  </div>
);

Currying

Consiste en utilizar closures para generar funciones que llaman a otras funciones con algunos parámetros fijos. Por ejemplo:

const User = ({userId, name, address}) => (
  const update = (attr, value) => updateUser(userId, attr, value);
  <Input 
    label="Name" 
    value={name} 
    onChange={val => update("name", val)}
  />
  <Input 
    label="Address" 
    value={address} 
    onChange={val => update("address", val)}
  />
)

Siguiente - map, reduce, forEach, find y filter →

js❤️ - Destructuring + Spread Los restantes

Javi Carrasco — Sat, 05 Feb 2022 11:08:30 +0000

Destructuring + Spread → Los restantes

Al hacer destructuring podemos utilizar también el operador spread para almacenar en una variable un grupo de elementos. Por ejemplo:

Almacenar en un array "el resto de argumentos" de una función

function printLn(prefix, suffix, ...rest) {
  console.log(prefix, rest.join(" | "), suffix);
}
printLn("<line>", "</line>", "one", "two", "three");
// <line>one | two | three</line>

Guardar el primer elemento (o los primeros) y los restantes

const [first, second, ...rest] = [4, 7, 2, 5];
// first = 4, second = 7, rest = [2, 5]

Guardar el último elemento (o los últimos) y los restantes

const [ ...rest, prev, last ] = [9, 4, 7, 2];
// rest = [9, 4], prev = 7, last = 2

Y también con objetos:

Guardar un atributo (o varios) y los restantes

const error = { level: "log", method: "fetch", error: 404 };
const { level, ...details } = error;
console[level](details);
// { method: "fetch", error: 404 }

¡A ponerlo en práctica!

Ahora te propongo un pequeño ejercicio para practicar lo que hemos aprendido.

Ejercicio 1 en CodeSandbox

ver solución
Solución Ejercicio 1 en CodeSandbox

Siguiente - Funciones →

js❤️ - Destructuring

Javi Carrasco — Sat, 05 Feb 2022 10:34:39 +0000

Destructuring

Destructuring nos permite extraer elementos concretos de un array o de un objeto.

Por ejemplo con arrays:

Guardar los elementos de un array en variables

const [year, month, day] = [2022, 1, 3];
// year = 2022, month = 1, day = 3

Incluso ignorando algunos valores

const [year, , day] = [2022, 1, 3];
// year = 2022, day = 3

Guardar el primer elemento de un array

const [first] = [4, 7, 2];
// first = 4

Guardar la respuesta de una función

const [name, setName] = useContext("Javi");
// name = "Javi", setName = function

Extraer variables de un parámetro array

const a = { name: "Javi", num: 1 };
// Object.entries(a) = [
//   ["name", "Javi"],
//   ["num", 1],
// ];
Object.entries(a).forEach(([key, value]) => {
  // key = "name", value = "Javi"
  // key = "num", value = 1
});

Intercambiar el valor de dos variables

[screen, backgroundBuffer] = [backgroundBuffer, screen];

Y también con objetos:

const { a, c } = { a: 1, b: 2, c: 3, d: 4 };
// a = 1, c = 3

Incluso a varios niveles

const response = { error: { message: "failed" } };
const {
  error: { message },
} = response;
// message = "failed"

Cambiándole el nombre a la variable (alias)

const response = { error: { message: "failed" } };
const {
  error: { message: errMsg },
} = response;
// errMsg = "failed"

Y combinando objetos y arrays

const errors = [{ message: "field required" }, { message: "invalid date" }];
const [{ message }] = errors;
// message = "field required"

Extraer parámetros:

function logUser({ name, role }) {
  console.log(name, role);
}
const user = {
  name: "Katie",
  surname: "Mitchell",
  age: 18,
  role: "World saver",
  // ...
};
logUser(user); // Katie World saver

Extraer props de un componente de React:

function ReactComponent({ label, value }) {
  // ...
}
<ReactComponent label="name" value="Javi" />;

Nombres de propiedad computados

Veamos el siguiente código

const createRandomUser = (attributeName, value) => {
  const user = {
    name: randomName(),
    age: randomAge(),
  }
  user[attributeName] = value;
  return user;
}

Para establecer attributeName a value hemos tenido que añadir una nueva asignación después de la inicialización del objeto.

Ahora sin embargo podemos usar nombres de propiedad computados utilizando corchetes [], veamos:

const createRandomUser = (attributeName, value) => ({
  name: randomName(),
  age: randomAge(),
  [attributeName]: value
})

Además ahora cuando queremos establecer un atributo en un objeto que ya tenemos almacenado en una variable con el mismo valor podemos ahorrarnos los dos puntos y la parte derecha.

Por ejemplo:

const name = "Katie";
const age = 18;
const user = {
  name: name, // ⛔️
  age: age // ⛔️
}

Puede escribirse como:

const name = "Katie";
const age = 18;
const user = {
  name,
  age
}

Siguiente - js❤️ - Destructuring + Spread → Los restantes →

js❤️ - Spread Operator

Javi Carrasco — Sat, 05 Feb 2022 10:33:42 +0000

Spread Operator

Este operador permite "extender" los elementos de una colección en varios elementos o parámetros. Veamos algunos usos:

Añadir un elemento a un array sin modificar el original

const a = [1, 2];
const b = [...a, 5]; // [1, 2, 5]
const c = [9, ...a]; // [9, 1, 2]

Concatenar arrays sin modificar los originales

const a = [1, 2];
const b = [5, 9, 10];
const c = [...a, ...b]; // [1, 2, 5, 9, 10]

Clonar un objeto (solo el primer nivel)

const a = { name: "Javi", num: 1 };
const b = { ...a }; // { name: "Javi", num: 1 }
const eq = (a === b); // false

Cambiar un atributo de un objeto sin modificar el original

const a = { name: "Javi", num: 1 };
const b = { ...a, num: 2 }; // { name: "Javi", num: 2 }

Combinar objetos

const a = { name: "Javi", num: 1 };
const jetpack = { altitude: 2000, speed: 850, num: 4 };
const b = { ...a, ...jetpack };
// { name: "Javi", num: 4, altitude: 2000, speed: 850 }

Pasar un array como una lista de argumentos

const tokens = [2022, 1, 3];
const date = new Date(...tokens); // Thu Feb 03 2022...

Siguiente - Destructuring →

js❤️ - Introducción

Javi Carrasco — Sat, 05 Feb 2022 10:20:26 +0000

JavaScript tiene sus peculiaridades y nos hemos divertido mucho con ellas (ver WTFJS) pero lo cierto es que desde que en 2015 se estandarizó es6 el lenguaje ha evolucionado mucho y ahora es un lenguaje potente y productivo.

En esta serie de artículos vamos a repasar algunas de sus posibilidades y cómo se pueden utilizar para escribir un código más conciso y expresivo.

Clases

Sí, JavaScript ya soporta definir classes sin hacer hacks.

Pero, en los últimos años la comunidad de programadoras de JavaScript ha ido alejándose más y más de la programación orientada a objetos y acercándose hacia la programación funcional (más o menos).

Por eso no vamos a hablar de clases en este artículo, en su lugar puedes echar un vistazo a algún artículo sobre programación funcional en js, por ejemplo Pragmatic Functional Programming in JavaScript

De lo que sí vamos a hablar es de inmutabilidad.

Inmutabilidad

Inmutabilidad es un concepto de programación funcional que indica que no cambiamos el valor de las variables.

Necesitamos abrazar este concepto si utilizamos React (o la mayoría de frameworks actuales). React nos permite definir un árbol de componentes que representa nuestra UI. Los componentes reciben props de sus padres y a veces tienen estado.

Cuando el componente que está en la raíz del árbol cambia su estado, todo el árbol debe renderizarse. Esto de normal ocurre muchas veces, incluso varias veces por segundo, por eso es importante que la renderización del árbol sea rápida.

Para ahorrar tiempo de renderizado, antes de pintar cada componente React comprueba si este tiene cambios o si por el contrario puede utilizar el estado anterior del componente. Y para eso comprueba si sus props han cambiado o si su estado ha cambiado, más o menos de esta forma:

// para cada prop
if (prop !== oldProp) changed = true; // strict equality comparison
...

Por eso el siguiente código es erróneo:

const [users, setUsers] = useState([]);

return (
    <UserList onAdd={(user) => setUsers(users.push(user))}/> {/* ⛔️ */}
)

El método push modifica el array original. En el setUsers estamos volviendo a asignar el mismo objeto al estado y cuando React compruebe si users === oldUsers pensará que no hay cambios y no renderizará este componente.

En su lugar necesitamos buscar estrategias para generar nuevos valores sin modificar el objeto original. Muchas de las estrategias comunes las veremos en estos artículos, para otras más especiales te recomiendo echar un vistazo a immer.

El ejemplo anterior podría arreglarse así:

const [users, setUsers] = useState([]);

return <UserList onAdd={(user) => setUsers([...users, user])} />;

Gracias al uso de spread operator, del que hablaremos en el siguiente artículo.

Siguiente - Spread Operator →