El JavaScript necesario para React - Parte 1

¿Qué es React?

React (o también conocido como Reactjs) es una librería de código abierto (open source) desarrollada por un equipo dentro de Facebook para crear interfaces de usuario de forma rápida y con buen rendimiento, ya que para ese entonces era precisamente el problema que estaban teniendo, dicho de otra manera, estaba leento. Es por eso que se le pidió a un equipo interno que mejorara este problema y por lo visto lo pudieron hacer 😁.

Ahora bien, que es lo que lo hizo ser más eficiente que otras alternativas de ese entonces (como jQuery por ejemplo)?. Y Es que React mantiene una representación del DOM (Document Object Model) de la página en memoria llamándolo Virtual DOM y esto no es más que un algoritmo que está pendiente a algún cambio dentro de sus componentes, lo compara con el DOM original y si es distinto solo aplicaran los cambios para ese componente, con esto evitamos estar renderizando cosas que no cambiaron y solo nos enfocamos en las que sí. Otro gran beneficio de utilizar React es que la forma de trabajar es componiendo pequeños trozos de código (llamados componentes) y son estos los que vamos uniendo a otras piezas, como lo haríamos utilizando piezas de LEGO.

Hoy en día el código de React es mantenido por el equipo de Facebook y de Instagram y sobre eso, agreguémosle la inmensa comunidad que hay detrás de personas y empresas que contribuyen para mejorar la librería día a día. También cabe mencionar algunas empresas de nivel mundial que utilizan React en sus productos como por ejemplo: Netflix, Airbnb, Atlassian, Uber, Dropbox solo por nombrar algunas.

Ya que vimos que es React, quienes mantienen la librería y que empresas la utilizan, ahora es tiempo de hablar del lenguaje de programación en el cual está construido y cuáles son las “cositas” que, según mi opinión, debemos manejar para desarrollar aplicaciones sin miedo alguno. Y para ello partamos entendiendo que es ECMAScript y que tiene que ver con JS.

ECMAScript

En simples palabras, ECMAScript o ECMA solamente, es el encargado de dar el estándar rigiendo como sebe ser interpretado y como debe funcionar el lenguaje JavaScript. De hecho, para que JavaScript funcione como debe ser en los navegadores o en Nodejs (por ejemplo), estos deben encargarse de interpretar el código tal como lo dicta el estándar.

El 2015 fue una fecha muy importante para el estándar de JavaScript, ya que desde 1999 que no se hacía una nueva revisión a su sintaxis (acá cabe mencionar que en estricto rigor si hubo revisiones del lenguaje, ya que en 2009 sale ECMAScript 5 y posteriormente, en 2011, se le agregan pequeños cambios) dando así el nacimiento de ECMAScript 6 o ES6 (para los amigos). Pero ¿Por qué fue tan importante esta nueva versión del lenguaje? Es porque se agregaron una serie de mejoras a su sintaxis, haciendo que fuese mucho más simple programar en JavaScript. Desde entonces hasta la fecha, han salido mejoras al estándar anualmente. A continuación veremos las que, según mi experiencia, debemos conocer como mínimo para no tener problemas al momento de hacer un proyecto.

Variables

Antes de ES6, nosotros teníamos una única forma de crear variables y era utilizando la palabra reservada var pero con la nueva estandarización del lenguaje, hoy aparte de utilizar el ya mencionado, podemos utilizar dos más: let y const.

// Antes de ES6
var texto = "Soy un texto";
var numero = 1999;
var funcion = function () {
  console.log("Holi");
};

// A partir de ES6
let otroTexto = "Soy otro texto";
const otroNumero = 2015;
const otraFuncion = function () {
  console.log("Otro Holi");
};

var

Ahora viendo esto, nos damos cuando que a simple vista, solo han Agregado dos nuevas palabras para hacer exactamente lo mismo, pero la verdad es que es solo eso 😮. La diferencia entre var y las dos nuevas let y const radica en el como se utilizan, te explico: El problema con var, es que su valor puede ser modificado sin mayor problema y te lo explico con el siguiente ejemplo:

function explicandoVar() {
  var a = 5;
  console.log(a); // Output: 5

  if (true) {
    var a = 10;
    console.log(a); // Output: 10
  }

  console.log(a); // Output: 10
}

Espera… ¿Qué fue lo que pasó?. Nos dimos cuenta de que la variable a la cual fue declarada e inicializada con un valor 5 dentro del sope de la función explicandoVar cambió su valor al final de la ejecución de la misma. Este es el problema con var, ya que si tenemos una función en la cual declaramos una variable y después, dentro de su misma función, creamos otra variable con el mismo nombre, se pisará el valor del principio por el nuevo valor asignado. Por si aún no queda claro, vamos con otro ejemplo:

var numero = 100;
(function explicandoVar() {
  for (var numero = 0; numero < 5; numero++) {
    console.log(numero); // Output: 0, 1, 2, 3, 4
  }
})();
console.log("Despues del for: ", numero); // Output: 100

Pero espera… me habías dicho que una variable declarada con var se puede modificar su valor si se vuelve a declarar, pero acá no sucede eso. La diferencia es que ahora la función explicandoVar está dentro de un IIFE (Immediately Invoked Function Expression), lo cual hace que exista otro scope dentro de la función distinta a la de la variable con valor 100, por lo cual, la variable declarada dentro del for que a su vez está dentro de nuestro IIFE vivirá solo dentro de este scope, pero os falta ver un ejemplo más 😁…

var numero = 100;
(function explicandoVar() {
  for (numero = 0; numero < 5; numero++) {
    console.log(numero); // Output: 0, 1, 2, 3, 4
  }
})();
console.log("Despues del for: ", numero); // Output: 5

¿En serio? Volvemos a tener ese comportamiento raro… pero si lo único que hicimos fue no declarar la variable dentro del for… ¿Qué es lo que pasa entonces?

No te preocupes que te lo explico ahora 😃. Como no declaramos la variable numero dentro del for, Javascript la creó de forma global (fuera de la función) pero nosotros ya teniamos una variable numero fuera de la función, y como ya vimos, cuando uno vuelve a declarar una variable con el mismo nombre, JavaScript reemplaza el valor de este con el nuevo valor.

Hoisting 👀

JavaScript es un lenguaje de interpretado, lo que significa que el navegador, cuando está leyendo nuestro código, busca las declaraciones (variables o funciones) y las deja al principio de su scope. A esto de le conoce como Hoisting

• Las funciones siempre se mueven arriba del scope. Por lo tanto, podemos elegir donde declararlas y usarlas.
• La declaración de las variables se mueven arriba del scope, pero solo la declaración. Antes de usar una variable, habrá que crearla y asignarla.

Por lo tanto nuestro código queda de la siguiente manera:

var numero;
numero = 100; // Output: 100

(function () {
  for (numero = 0; numero < 5; numero++) {
    console.log(numero); // Output: 0, 1, 2, 3, 4
  }
})();

console.log(numero); // Output: 5

let

Ok, ya sabemos cuál es el error que podíamos tener con var, pero ¿Cómo funciona let entonces?, bueno, veámoslo en un ejemplo:

var numero = 100;
(function explicandoVarPeroAhoraConLet() {
  for (let numero = 0; numero < 5; numero++) {
    console.log(numero); // Output: 0, 1, 2, 3, 4
  }
})();
console.log(numero); // Output: 100

Yeeeey!! Esta vez si funciona como esperábamos!! 😍 y todo esto es gracias al Block Scope (ámbito de bloque), ya que las variables declaradas con let solo podrán ser accesible dentro del scope donde se declaró, en este caso, dentro del for. Ahora veamos otro ejemplo y comparémoslo con los ejemplos anteriores con var:

function explicandoLet() {
  let numero = 10;
  let numero = 20;
  console.log(a); // Uncaught SyntaxError: Identifier 'numero' has already been declared
}

Cuando estudiamos var, nos dimos cuenta de que nosotros podíamos volver a declarar una variable con el mismo nombre… Pero ahora con let no se puede 😲 y es más, el mismo intérprete nos dice que el identificador "a" ya fue declarado. ¡Esto es perfecto! Ya que de esta manera podemos evitar estar sobreescribiendo una variable en caso de que no recordemos si es que ya habíamos utilizado ese identificador o no. Ahora cabe mencionar de que a pesar de que no podemos declarar una variable con el mismo nombre de otra variable ya declarada, si podemos cambiar el valor de la misma.

function explicandoLet() {
  let numero = 10;
  console.log(numero); // Output: 10
  numero = 20;
  console.log(a); // Output: 20
}

const

Ahora ya estamos listos para hablar sobre const 😍 y a pesar de que const es muy parecido a let, tiene una pequeña y minúscula diferencia (¡¡mentira!! Gran gran diferencia 💛) y es que no se puede cambiar el valor asignado (1000 puntos para Gryffindor const). Veamos esto con unos ejemplos:

function explicandoConst() {
  const numero = 10;
  console.log(numero); // Output: 10
  numero = 20; // Uncaught TypeError: Assignment to constant variable
}

function explicandoConst() {
  const usuario = {
    nombre: "Eduardo",
    edad: "todos",
  };
  console.log(usuario); /* Output: {nombre: 'Eduardo', edad: 'todos'} */
  usuario.edad = 27;
  console.log(usuario); /* Output: {nombre: 'Eduardo', edad: 27} */
}

Espera un momento… en el segundo ejemplo vemos que cambiaste la edad y no hubo error. ¡¡Nos mentiste!! 😤. Y la verdad es que no les mentí, pasa que en JavaScript tenemos dos maneras de asignar valores a las variables y estas son por valor y por referencia. Y te lo explico ahora 😎.

Cuando asignamos un valor primitivo (string, number, bigint, boolean, undefined, symbol y null) a una variable, realmente estamos asignando una copia del valor en sí a la variable. A esto le llamamos que es una asignación por valor. En su contraparte, cuando asignamos un valor No Primitivo (object, array o function), lo que significa que no se hace una copia del valor mismo, si no más bien se guarda una referencia mediante la cual accedemos a su valor. Veamos esto en unos ejemplos:

function explicandoValorYReferencia() {
  let a = "Se JavaScript";
  const b = a;

  a = "¡" + a + "!";

  console.log(a); // Output: "¡Se JavaScript!"
  console.log(b); // Output: "Se JavaScript"
}

En el primer ejemplo, podemos ver que a la variable b se le asigna lo que tenga la variable a, pero a pesar de eso, se mantienen independientes, es por este motivo que cuando modificamos el valor de a, b ni se entera. Esto es porque cada variable guarda su propio valor.

function explicandoValorYReferencia() {
  const usuario = {
    nombre: "Pedro",
    pais: "Chile",
  };

  const otroUsuario = usuario;

  usuario.nombre = "Peter";
  otroUsuario.nombre = "Australia";

  console.log(usuario); /* Output: {nombre: 'Peter', pais: 'Australia'} */
  console.log(otroUsuario); /* Output: {nombre: 'Peter', pais: 'Australia'} */
}

En este otro ejemplo, vemos que al asignarle a la variable otroUsuario lo que tiene asignado la variable usuario, realmente lo que estamos haciendo es asignarle una referencia de lo que contiene usuario no su valor, dicho de otra manera, no estamos copiando el valor que tiene en ese momento. Es por eso que cuando modificamos cualquier de las dos variables, las dos se ven afectadas.

Segunda parte

¡Wow! Cuanto hemos aprendido hoy, pero esto no termina acá, ya que aún nos falta revisar sobre Funciones, Destructuring, Literal Strings, Default parameters, Rest parameters, Promesas y Operaciones con Array. Pero todo esto lo podremos aprender en la

segunda parte de este artículo