El Javascript necesario para React - Parte 2

Funciones

Actualmente, JavaScript posee dos formas de poder declarar funciones. La primera se le conoce como Funciones tradicionales y se caracterizan por utilizar la palabra reservada function. Por otra parte, tenemos las Funciones flecha o Arrow functions las cuales se pueden distinguir por utilizar los paréntesis, el signo igual acompañado de un mayor que y paréntesis (por lo general).

Funciones tradicionales

A continuación veremos un ejemplo de como crear una función anónima. Esta es la manera simple de crear una función, pero tiene un inconveniente, y es que no se puede volver a utilizar, ya que no posee un nombre al cual hacer referencia. 😅

function (a, b) {
  const catetos = Math.pow(a, 2) + Math.pow(b, 2);
  return Math.sqrt(catetos);
}

Ahora bien, existen dos maneras de escribir una función y que esta tenga un nombre para así poder llamarla en cualquier otra parte de nuestro código y las vamos a aprender con los siguientes ejemplos. Cabe mencionar que esto promueve una buena práctica, ya que escribiremos nuestra función una única vez y la llamaremos cada vez que la necesitemos, evitando así la repetición de código. 💛

function pitagoras(a, b) {
  const catetos = Math.pow(a, 2) + Math.pow(b, 2);
  return Math.sqrt(catetos);
}

console.log(pitagoras(3, 4)); // Output: 5

const pitagoras = function (a, b) {
  const catetos = Math.pow(a, 2) + Math.pow(b, 2);
  return Math.sqrt(catetos);
};

console.log(pitagoras(3, 4)); // Output: 5

¡Wow! Si nos damos cuenta, las dos formas son muy similares. La primera es asignando un nombre directamente a la función y la segunda es creando una variable (como lo vimos en la El JavaScript necesario para React - Parte 1 y asignarle una función anónima… Entonces ¿Cuál utilizamos? Y la respuesta es: La que quieras 😁, ya que no hay una diferencia sustancial entre una y la otra. Aun que con lo que vamos a ver ahora, vas a querer utilizar las arrow functions siempre 😮.

Funciones flechas

Esta nueva manera de escribir funciones nace con la nueva implementación de ECMAScript 6, la cual hace que las funciones sea más expresivas e incluso podremos escribir menos código (¡yeeeey!). La sintaxis de las funciones flechas es la siguiente: Paréntesis seguido de un signo igual que que es acompañado de un signo mayor que y finalizamos con llaves (aun que veremos que podremos obviar las llaves). A continuación transformaremos el primer ejemplo que vimos de las funciones tradicionales, ahora escrita con flecha.

(a, b) => {
  const catetos = Math.pow(a, 2) + Math.pow(b, 2);
  return Math.sqrt(catetos);
};

Si bien ya sabemos cuál es la estructura de una función flecha, ¿Cómo podemos declarar una función con nombre? Y bueno, acá solo tenemos una opción:

const pitagoras = (a, b) => {
  const catetos = Math.pow(a, 2) + Math.pow(b, 2);
  return Math.sqrt(catetos);
};

console.log(pitagoras(3, 4)); // Output: 5

Es en este punto donde la cosa se vuelve interesante 🤩, ya que veremos distintas maneras de escribir una arrow function dependiendo de que es lo que se necesite hacer con la misma.

Return implicito 😎

Esta característica es una de las que más me gusta, ya que si el resultado depende solo del atributo que se le pasa a la función (sin que tengamos que hacer más cosas dentro del cuerpo), este se puede escribir sin que tengamos que anteponer la palabra reservada return y sin las llaves.

const saludo = (nombre) => "Hola 👋 mi nombre es: " + nombre;

console.log(saludo("Logan")); // Output: Hola 👋 mi nombre es: Logan

Fuera paréntesis 😮

Cuando tengamos una función que recibe solo un parámetro, podemos escribir la función flecha sin los paréntesis, dejando solo el parámetro y la flecha. (👀 esto solo aplica si la función recibe únicamente un parámetro, fuera de eso, ya es obligación colocar los paréntesis como siempre lo hemos hecho).

const saludo = (nombre) => `Hola 👋 mi nombre es ${nombre}`;

console.log(saludo("Logan")); // Output: Hola 👋 mi nombre es Logan

Para que quede un poco más claro, vamos a revisar un ejemplo donde iremos trasnformando una función tradicional a una escrita con Arrow function.

// funcion tradicional
const sumarCien = function (numero) {
  return numero + 100;
};

// funcion flecha
const sumarCien = (numero) => {
  return numero + 100;
};

// eliminamos la palabra return y con esto, las llaves
const sumarCien = (numero) => numero + 100;

// eliminamos los parentesis
const sumarCien = (numero) => numero + 100;

Nunca olvidar 👀

A pesar de que la nueva sintaxis de las arrow functions elimina (bajo ciertas reglas) tanto paréntesis, como returns y llaves, nunca olvidemos estos puntos los cuales nos van a ayudar mucho para peinarnos con las flechitas.

• Si nuestra función requiere únicamente de un argumento, no necesitamos los paréntesis.
• Si nuestra función requiere dos o más argumentos, estos se deben encontrar dentro de los paréntesis.
• Si nuestra función requiere devolver inmediatamente lo que debe retornar, sin agregar más lógica, se puede eliminar el return y las llaves.
• Si nuestra función requiere más lógica para su funcionamiento, debemos agregar el return y las llaves.

Como ya hemos aprendido, la diferencia que existe entre Funciones Tradicionales y Funciones Flechas, en su sintaxis por lo menos, es muy notable, pero… ¿Esa es toda la diferencia? Y la verdad es que no 😐, ya que ambas manejan de manera distinta la palabra reservada this. Veamos este comportamiento con el siguiente ejemplo: Vamos a crear un objeto donde dentro de sus propiedades tendremos una función tradicional (encender) y otra con función flecha (apagar).

const celular = {
  marca: "Peraphone",
  modelo: "Galactico 20",
  encender: function () {
    console.log(
      "Encendiendo el mejor celular.. el " + this.marca + " - " + this.modelo
    );
  },
  apagar: () => {
    console.log("El " + this.modelo + " se irá a dormir");
  },
};

• En la función encender(), el this hace referencia al contexto/scope/ámbito en el cual se definió la función, dicho de otra manera, el this puede obtener toda la información que existe dentro del objeto que declaró la función.
• Por otra parte, la función apagar() no hace referencia al objeto celular, sino que hace referencia al contexto/scope/ámbito donde está definido el objeto celular, es decir, el contexto padre del objeto, que para efectos de este ejemplo, es el contexto Window. (Si quieres saber más sobre this, te recomiendo leer el siguiente artículo de Mozilla.org

¿Y ahora que? ¿Cuándo es una buena opción utilizar la flechita o la tradicional? Y la respuesta que te puedo recomendar es que para la mayoría de las funciones utilices arrow functions y para los casos donde tenemos que leer propiedades dentro de un mismo objeto, usar las tradicionales.

Default Parameters

Los default parameters o Parámetros predeterminados son una nueva característica que nos provee la llegada de ES6 para declarar atributos de una función que en caso de que su valor sea undefined, se inicie con el valor que le designemos.

const saludar = (nombre, origen = "por ahí") =>
  "Mi nombre es: " + nombre + " y vengo de " + origen;

console.log(saludar("Morty", "C132")); // Output: Mi nombre es Morty y vengo de C137
console.log(saludar("Evil Morty")); // Output: Mi nombre es Evil Morty y vengo de por ahí

Rest Parameters

Los Rest Parameters o Parametros Rest nos permite representar “un número indefinido” de argumentos de una función como un array. Veamos esto en un ejemplo.

const emojis = (a, b, ...otros) => {
  console.log(a);
  console.log(b);
  console.log(otros);
}

emojis(😎, 🤩, 😁, 😲, 😍, 😂, 🔥, 🙃, 😒);

/* Output:
* 😎
* 🤩
* [😁, 😲, 😍, 😂, 🔥, 🙃, 😒]
*/

Destructuring

Destructuring o Desestructuración nos permite “sacar” valores de arreglos o propiedades de un objeto y expresarlas en distintas variables. (Esta es una característica muy útil para entender como son los hooks de React 👀😬).

Ejemplos con Arrays

// Ejemplo básico
const [a, b] = [1, 2];
console.log(a, b); // Output: 1 2

// Evitamos valores
const [a, , c] = [1, 2, 3];
console.log(a, c); // Output 1 3

// Asignando un arreglo a una variable
const [a, ...b] = [1, 2, 3];
console.log(a, b); // Output: 1 [2, 3]

Ejemplos con Objetos

const superheroe = {
  nombre: "Ironman",
  poder: "Ser cool",
};

const { poder, nombre } = superheroe;
console.log(poder); // Output: Ser cool
console.log(nombre); // Output: Ironman

const superheroe = {
  nombre: "Ironman",
  poder: "Ser cool",
  usuario: {
    nombre_real: "Anthony",
    apellido_real: "Stark",
  },
};

const {
  nombre,
  usuario: { nombre_real },
} = superheroe;
console.log(nombre); // Output: Ironman
console.log(nombre_real); // Output: Anthony

Última parte

Hoy hemos aprendido bastante sobre funciones y esas características de ES6 que definitivamente nos ayudarán en nuestro día a día. No obstante esto no es todo, ya que aún falta revisar Templates Literal, Asincronía y Operaciones con Arrays (las que encuentro imprescindible) pero todo esto lo veremos en la Tercera parte y final de El JavaScript que necesitas para React