DEV Community: Franco Cuarterolo

Entendiendo Destructuring (Objetos y parametros)

Franco Cuarterolo — Sun, 12 Sep 2021 22:06:53 +0000

Desestructurar un objeto o un array es una práctica habitual traída por ECMAScript. Es posible que lo hayas visto en tu trabajo, en tutoriales o en código open source, pero, ¿te paraste a entender qué resuelve y cómo aprovechar esta funcionalidad?

Desestructurar un objeto o un array significa elegir un pedacito del mismo y asignarlo a una variable

Empecemos con un objeto que describe a una de mis perras:

const mascotaDeCuarte = {
 nombre: "Gina",
 edad: 3,
 raza: "Schnauzer",
 pelaje: "Sal y pimienta"
 hermanos: ["Maggie", "Ragnar", "Mara", "Clarita", "Milo", "Tinta"]
};

El problema es que en la veterinaria me pidieron nombre y raza, para eso vamos a escribir una función que lo escriba por nosotros

function nombreYRaza(mascota) {
  return mascota.nombre + ', ' + mascota.raza;
}

nombreYRaza(mascotaDeCuarte) // => Gina, Schnauzer

En programación, tenemos un principio llamado "Don't Repeat Yourself (No te repitas)", y en este caso estamos repitiendo la palabra "mascota" tres veces de una forma totalmente innecesaria.

Ahora es donde podemos empezar a aplicar destructuring. Sabemos que "mascotaDeCuarte" cuenta con dos propiedades: "nombre" y "raza". Desestructurar nos permite tomar estos valores y asignarlos a variables de igual nombre:

function nombreYRaza(mascota) {
  const {nombre, raza} = mascota
  return nombre + ', ' + raza;
}

nombreYRaza(mascotaDeCuarte) // => Gina, Schnauzer

Ya aprendimos a desestructurar un objeto, pero hay algo más que te quiero contar: podemos desestructurar tambien el parametro de la función.

Como sabemos, el parametro "mascota" es un objeto. Le podemos indicar a la función que el objeto que llega en el parámetro tendrá dos propiedades de nuestro interés: "nombre" y raza".

function nombreYRaza({nombre, raza}) {
  return nombre + ', ' + raza;
}

nombreYRaza(mascotaDeCuarte) // => Gina, Schnauzer

Desestructurar nuestra función y sus parametros nos permitió tener una función mucho más limpia y más facil de leer.

Hoy hablamos sobre cómo desestructurar un objeto y el parametro de una función, pero todavía nos quedan temas por ver como Arrays y Desestructuración de valores anidados. Si queres seguir investigando por tu cuenta, podes visitar la MDN

Gracias por leer, hasta la próxima!

Función al curry

Franco Cuarterolo — Fri, 06 Aug 2021 01:31:00 +0000

Sí, ya sé, cuando te nombraron lo que llamamos Curry function
(o funciones currificadas) te hizo ruido el estómago. Pero lamentablemente, nada tienen que ver con ese condimento. ¿Y por qué lleva el mismo nombre? Por Haskell Curry, matemático estadounidense. Según Wikipedia fue propuesto el nombre Schönfinkelisation pero no creo que tenga tanto marketing.

¿Qué significa que una función sea currificada?

Una función currificada es aquella que está compuesta por dos o más funciones, ejecutadas de forma secuencial. Estas funciones comparten los mismos argumentos ya que componen un mismo closure.

¿Cómo se ve una función curry?

//Función cotidiana
const suma = (valor1, valor2) => {
    return(valor1 + valor2);
};
suma(1, 2); // 3

//Función Curry
const sumaCurry = (valor1) => {
    return (valor2) => {
        return(valor1 + valor2);
    };
};
sumaCurry(4)(2); // 6

¿Qué notamos de diferente?

En el snippet de código, podemos ver que la función curry recibe un parámetro (valor1), luego retorna una función que recibe el segundo parámetro (valor2) y esa función retorna la suma de ambos parámetros. Son dos funciones que comparten un mismo scope
y los mismos parámetros.

En el momento de ejecución de la función, tenemos que ejecutarla dos veces: una vez por cada función anidada hasta llegar al resultado. Esto nos permite desacoplar partes de la función y guardarlas en variables

¿En qué nos beneficia?

Una característica que a mí me encanta de las funciones curry es que nos permiten reutilizar funciones por partes. Por ejemplo, digamos que nuestra función sumaCurry siempre la usamos para sumar de a 20. Podemos ejecutar la primera parte de la función, y guardar la segunda para más tarde

const sumaVeinte = sumaCurry(20)

const sumaVeinte(10) // 30

Si nos fijamos en la consola con console .log qué tiene dentro sumaVeinte`, nos mostrará esto:

Pero si utilizamos el método console .dir y nos dirigimos a donde dice [[[Scopes ]]] podremos ver dentro del closure nuestro valor 20 guardado.

Conclusión

La idea de este articulo era mostrarte la existencia de este tipo de funciones y puedas reconocerlas. Tienen muchos usos y se encuentran en muchos lenguajes de programación funcional. Te invito a que explores el concepto y lo pongas en práctica!

Renovando git: bye bye, checkout

Franco Cuarterolo — Tue, 03 Aug 2021 23:09:58 +0000

Renovando git: bye bye, checkout

Hay una serie de comandos de git que nos sabemos de memoria, pero existe uno en particular que tiene múltiples usos: git checkout.

Ah pero que tenga múltiples uso significa que es más practico. Si, y más probable que te equivoques

git checkout es un comando que podemos usar para crear y borrar branches, navegar entre ellas y eliminar cambios que no están en estado de stage.

Ahora, la gente de git se despabiló y se dio cuenta de que sería mejor tener comandos más verbosos para las distintas acciones que hacemos con nuestro controlador de versiones.

Cada uno de los siguientes comandos que te voy a mostrar realizan la misma acción que hacíamos antes con git checkout pero escrito de una forma más amigable

Creando ramas: git branch

Cuando queremos crear una rama, es normal que nos encontremos usando el comando git checkout mi-rama. Para hacerlo más entendible, lo vamos a cambiar por git branch mi-rama

Navegando entre ramas: git switch

Es normal cambiar a una rama de un colega para revisar sus cambios o querer volver a develop para tener los últimos cambios. Yo siempre usé para esto git checkout rama-de-mi-colega. hasta que descubrí que existe un comando que es mucho más claro: git switch rama-de-mi-colega

Borrando cambios: git restore

Cuando ya separé cuales son los cambios que van en el commit, lo demás se descarta, y para descartar recurrimos al git checkout -- .. Hoy en día git te recomienda utilizar git restore .

Conclusión

Utilizar el mismo comando para todo puede ser super practico, pero si recién estas empezando, puede que te provoque un par de USB (USB? ABC? ACV!). Nuestros comandos y nuestros procesos deben dejar claras nuestras intenciones, de esta manera podemos compartir un paso a paso y ser lo más claros posibles en nuestra comunicación técnica.

Fuentes:

git branch
git switch
git retore

El primo del Array: ¿Que es un Set?

Franco Cuarterolo — Sun, 25 Jul 2021 23:53:20 +0000

Un set es un tipo de objeto incluido en ES2015 que tiene semejanzas con un array:

Contiene una lista de datos de cualquier tipo
Es iterable
Permite el uso del operador spread

Pero también diferencias:

Sus datos no se repiten
No cuenta con los métodos de Array (map, some, filter)
Es un poco más performante

¿Cómo crear un Set?

Un Set es un tipo de objeto, por lo que su sintaxis es la misma que la de un constructor:

const unSetVacío = new Set();

Si queremos inicializar nuestro Set con valores, deberemos pasar como argumento un array

const redesSociales = new Set(["Facebook", "Twitter", "Fotolog"]);

¿Qué métodos tiene un Set?

El objeto Set tiene metodos propios para agregar, borrar y comprobar datos

Agregar datos a un Set

Para agregar datos a un Set, contamos con el método .add()

redesSociales.add("Instagram");
redesSociales.add("MySpace");
console.log(redesSociales); // Set ['Facebook', 'Twitter', 'Fotolog', 'Instagram', 'MySpace']

¿Qué pasa si por error duplicamos un dato? ¡Absolutamente nada! Los Set solo permiten valores únicos

redesSociales.add("Facebook");
console.log(redesSociales); // Set ['Facebook', 'Twitter', 'Fotolog', 'Instagram', 'MySpace']

Eliminar datos de un Set

Para eliminar datos de un Set, contamos con el método .delete(). Si retornamos o hacemos console.log al usar este metodo, nos retornará un valor booleano para avisarnos de que pudo borrar el dato que le dijimos

// RIP Fotolog y MySpace
redesSociales.delete("Fotolog"); // true
redesSociales.delete("MySpace"); // true
console.log(redesSociales); // Set ['Facebook', 'Twitter', 'Instagram']

//Intentemos borrarlos otra vez, nos retornará false ya que no existen más
redesSociales.delete("Fotolog"); // false
redesSociales.delete("MySpace"); // false

Comprobar si un Set contiene un dato

Para comprobar si existe un dato dentro de un Set, usaremos el método .has() que nos retornará un valor booleano

redesSociales.has("Instagram"); // true
redesSociales.has("Fotolog"); // false
redesSociales.has("LinkedIn"); // false

Comprobar el tamaño de un Set

Para saber qué tamaño tiene un Set, contamos con la propiedad .size (¡¿Por qué no le pusieron .length como a los Arrays?!)

redesSociales.size; // 3

¿Cómo iterar un Set?

Un Set puede ser iterable casi como cualquier objeto, por ejemplo, con un for..of

for (let redSocial of redesSociales) {
    console.log(redSocial);
}

También podemos hacer uso de los métodos .values() o .keys() que retornan un nuevo objeto iterable con los datos del Set (Sí, ambos métodos hacen lo mismo).

¡¿Cómo vuelvo al modo Array?!

Si tenes necesidad de transformar tu Set en un Array, podemos usar dos métodos:

Usar el metodo .from() del objeto Array

const redesSocialesArray = Array.from(redesSociales);

La vieja confiable: el spread operator

const redesSocialesSpread = [...redesSociales];

Conclusión

Hoy aprendimos qué es un Set, cómo modificarlo y cómo convertirlo en Array. Hay más métodos que no te conté para no hacerla muy larga. Al final te voy a dejar la documentación que utilicé para poder escribir esto. Te invito a que la leas, investigues, juegues y practiques.

¡Gracias por llegar hasta acá!

Fuentes:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
https://javascript.info/map-set

¿Componentes de clase o funcionales?

Franco Cuarterolo — Sun, 25 Apr 2021 17:14:02 +0000

A partir de React v16 con la implementación de los hooks, los componentes de tipo clase quedaron anticuados. Quienes empiezan a estudiar React ven cursos donde usan componentes funcionales, otros usan clases y en unos pocos aparecen ambos. Pero, ¿cuál usamos cuando trabajamos?

TL;DR: Siempre que se pueda, usá componentes funcionales. Son más legibles y son acordes a las tendencias de programación funcional.

¿Qué es un componente de clase?

Un componente de clase es una clase de javascript que extiende la clase Component de React.

class Biology extends React.Component

Este nos permite guardar su estado y controlar lo que ocurre durante su ciclo de vida, exponiéndonos métodos como componentDidMount o componentWillUnmount.

¿Cómo se ve un componente de clase?

class Biology extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            professor: "Franco Cuarterolo"
            students: props.numberOfStudents
        }
    }

    componentDidMount(){
        this.startAssignment()
    }

    componentWillUnmount(){
        this.finishAssignment()
    }

    render(){
        return(
        <div> Biology, Professor: {this.state.professor} </div>
        )
    }

}

¿Qué es un componente funcional?

Un componente funcional es una función que recibe el objeto Props y retorna un ReactNode (un ReactNode puede ser un elemento html, un string, un booleano, entre otros tipos de datos.).

const Biology = (props) => { return(<ReactNode />) }

Estas funciones solo reciben y retornan, por eso tienen que utilizar React Hooks (useState para el estado, useEffect para los ciclos de vida) para imitar las cualidades de un componente de clase.

¿Cómo se ve un componente funcional?

const Biology = (props) => {
    const [professor, setProfessor] = React.useState("Franco Cuarterolo");
    const [students, setStudents] = React.useState(props.numberOfStudents);

    React.useEffect(()=>{
            startAssignment()
            return () => {
                finishAssignment()
            }
        })

    return <div> Biology, Professor: {professor} </div>
}

¿Por qué usar funciones por encima de clases?

El frontend está experimentando una fuerte influencia de los lenguajes de programación funcionales, y esto nos lleva a integrar practicas del paradigma funcional en nuestro día a día.
Ayuda a unificar criterios, donde todos los componentes tienen la misma estructura.
Nos ahorra entender un concepto que está en camino al desuso en Javascript (Clases), aligerando la curva de aprendizaje
Hacer testing de un componente funcional suele ser más sencillo.
Suelen requerir menos lineas de código haciendolo más facil de entender.

¿Alguna vez voy a tener que usar clases?

Sí, existe un caso que todavía no está resuelto con Hooks que son los ErrorBoundaries. Este cuenta con un método de ciclo de vida para atrapar errores (componentDidCatch) que no puede reproducirse con hooks.