Hoy continuaremos revisando esas características de JavaScript que no ayudarán al momento de estar desarrollando en  React. Revisaremos Funciones, Default Parameters, Rest Parameters y Destructuring. Aprendamos juntos lo que JavaScript tiene  para enseñarnos.

Funciones

Default Parameters

Rest Parameters

Destructuring

Última parte

El Javascript necesario para React - Parte 2


<h2 id="funciones">Funciones</h2>

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

<h3>Funciones tradicionales</h3>

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

```javascript
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. 💛

```javascript
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
```

```javascript
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
<a href="https://eduardoalvarez.dev/articulos/el-javascript-necesario-para-react-parte-1" target="_blank" rel="noopener noreferrer">
El JavaScript necesario para React - Parte 1</a>) 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 😮.

<h3>Funciones flechas</h3>

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.

```javascript
(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:

```javascript
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.

<h3>Return implicito 😎</h3>

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.

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

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

<h3>Fuera paréntesis 😮</h3>

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

```javascript
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.

```javascript
// 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).

```javascript
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
  <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/this" target="_blank" rel="noopener noreferrer">Mozilla.org</a>)

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

![Cracks usando flechas](https://media.giphy.com/media/3ornkbfsCdhrvJ6Iuc/giphy.gif)

<h2 id="default-parameters">Default Parameters</h2>

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.

```javascript
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í
```

<h2 id="rest-parameters">Rest Parameters</h2>

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.

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

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

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

<h2 id="destructuring">Destructuring</h2>

`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 👀😬).

<h3>Ejemplos con Arrays</h3>

```javascript
// 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

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

<h3>Ejemplos con Objetos</h3>

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

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

```javascript
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
```

![Tony Stark](https://media.giphy.com/media/YWjZrW9z2z4VW/giphy.gif)

<h2 id="ultima-parte">Última parte</h2>

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 `Literal String`, `Promesas` 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_**


React es una librería desarrollada por Facebook el cual fue creado utilizando el lenguaje de programación JavaScript, por este motivo, mientras más aprendamos del lenguaje, más cosas podremos hacer en React. Es por eso que hoy vamos a revisar algunos conceptos  y funciones que, según mi experiencia, son fundamentales para ser un buen desarrollador de React.

¿Qué es React?

ECMAScript

Variables

Segunda parte

El Javascript necesario para React - Parte 1


<h2 id="que-es-react">¿Qué es React?</h2>

**React** (o también conocido como **Reactjs**) es una
<a href="https://es.wikipedia.org/wiki/Biblioteca_(inform%C3%A1tica)#:~:text=En%20inform%C3%A1tica%2C%20una%20biblioteca%20o,la%20funcionalidad%20que%20se%20invoca" target="_blank" rel="noopener noreferrer">
librería</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
<a href="https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n" target="_blank" rel="noopener noreferrer">
DOM</a> (_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.

![Componentes como piezas de LEGO](https://media.giphy.com/media/l0JMrPWRQkTeg3jjO/giphy.gif)

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

<h2 id="ecmascript">ECMAScript</h2>

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.

![ECMAScript y JavaScript](/images/articles/el-javascript-necesario-para-react/parte-1/es-js.png)

<h2 id="variables">Variables</h2>

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

```javascript
// 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");
};
```

<h3>var</h3>

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:

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

```javascript
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 😁...

```javascript
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 <a href="https://developer.mozilla.org/es/docs/Glossary/Hoisting" target="_blank" rel="noopener noreferrer">Hoisting</a>
>
> - 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:

```javascript
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
```

<h3>let</h3>

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:

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

```javascript
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.

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

<h3>const</h3>

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:

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

```javascript
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](https://developer.mozilla.org/es/docs/Glossary/String),
[number](https://developer.mozilla.org/es/docs/Glossary/Numero), [bigint](https://developer.mozilla.org/es/docs/Glossary/bigint),
[boolean](https://developer.mozilla.org/es/docs/Glossary/Boolean), [undefined](https://developer.mozilla.org/es/docs/Glossary/undefined),
[symbol](https://developer.mozilla.org/es/docs/Glossary/Symbol) y [null](https://developer.mozilla.org/es/docs/Glossary/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](https://developer.mozilla.org/es/docs/Glossary/Objecto),
[array](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array) o
[function](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/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:

```javascript
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.

```javascript
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.

<h2 id="segunda-parte">Segunda parte</h2>

¡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
<a href="https://eduardoalvarez.dev/articulos/el-javascript-necesario-para-react-parte-2" target="_blank" rel="noopener noreferrer">
segunda parte</a> de este artículo

![Yeeey](https://media.giphy.com/media/IxKt9HOM1mI80/giphy.gif)


Si estás leyendo esto es por que te interesa o quieres aprender sobre desarrollo web. Este artículo te ayudará a clarificar todas tus dudas (espero), mostrando lo básico necesario que debes manejar, dando un recorrido por los tecnisismos, lenguajes/tecnologías necesarias, entre otros.

Términos utilizados

HTML

Javascript

Git y Github

¿Qué sigue?

Empezando en el desarrollo web


<h2 id="terminos-utilizados">Términos utilizados</h2>

Antes de aprender cualquier cosa, es muy necesario dar un recorrido por algúnos términos que nos encontraremos en toda esta travesía. Es por eso que esta sección aprenderemos esos conceptos que pueden parecer un poco difíciles en un comienzo, pero a medida que vayamos aprendiendo, nos iremos familiarizando cada vez mas.

_**FrontEnd:**_ El Frontend o _front_ (para los amigos) es todo lo visíble dentro de un sitio web. Con ésto nos referimos a textos, colores, botones, imágenes, formularios, etc.
Ejemplo de ésto son los títulos que ves dentro de este mismo artículo, el texto que estas leyendo, el índice que está arriba (si estás leyendo esto desde un celular) o en la parte izquierda de la pantalla (si estás en dispositivos mas grandes). Las técnologías necesarias para manejar el front son: **HTML**, **CSS** y **Javascript**.

_**Backend:**_ El Backend o _Back_, en su contraparte con el front, es la lógica que hay detrás de todo el sitio web. Es acá donde accedemos a la base de datos y manejamos todo el **core** (núcleo) que existe. Ejemplo de esto es la sección de _suscribirse_ que está en éste mismo artículo, donde luego de llenar un formulario muy pequeño (tu nombre y tu correo) y hacer click en el botón **Suscribirse**, te llegará un correo agradeciendote y con esto, quedas en un lista donde te llegará un mail avisandote cuando suba nuevo contenido en éste sitio. Algunos de los lenguajes que se utilizan en el Backend son: **Java**, **PHP**, **Javascript**, **Go**, **Python**, **Ruby**, por nombrar algunos.

![stacks](/images/articles/empezando-en-el-desarrollo-web/front-back.png)

_**API:**_ _**A**pplication **P**rogramming **I**nterface_ o en español **Interfaz de Programación de Aplicaciones** es un nexo, una interconección en la que dos aplicaciones o servicios se comunican mediante procesos. Una API es básicamente, en nuestro contexto, un conjunto de funciones que hacen operaciones repetitivas, así en vez de estar haciendo siempre lo mismo, lo hacemos solo una vez y luego lo exponemos para que otro sistema pueda utilizarlo.

_**EndPoint:**_ Este concepto va muy de la mano con el anterior ya que éste es el punto de entrada hacia una operación en específico de nuestra API. En simples palabras, un endpoint es una url donde dependiendo del verbo http que le pasemos, hará una acción. Ejemplo: Si queremos acceder a toda la información que tiene Belén en un sitio web cualqueira, tendríamos que hacerlo consultando al endpoint `http://misuperaplicacion.com/usuario/belen` con el verbo **GET**, de esta manera podríamos conocer su fecha de nacimiento, nombre completo y toda la información que Belén haya guardado en esa aplicación.

_**Verbos HTTP:**_ Son un conjunto de, como dice su nombre, verbos que nos permiten realizar acciones específicas a nuestra API ya que para un mismo Endpoint se pueden hacer distintas operaciones diferenciandolas mediante el protocolo o verbo. Los más conocidos (y los que probablemente más utilicemos en nuestro día a día) son **GET**, **POST**, **PUT**, **DELETE** (existen más), donde _GET_ lo utilizamos solo para obtener información, _POST_ siempre lo utilizaremos para la creación de nueva información, el método _PUT_ nos permite actualizar información (y en caso de que no exista, la crea) y _DELETE_ para eliminar: Ejemplo: Concideremos el mismo endpoint anterior `http://misuperaplicacion.com/usuario/belen`. Si quiero acceder a la información de Belén, lo hacemos con GET, pero si queremos modificar su información, lo tenemos que hacer con PUT. Así también en caso de que queramos eliminar su información, lo haremos utilizando el método DELETE, todo esto utilizando el mismo endpoint.

![stacks](/images/articles/empezando-en-el-desarrollo-web/api.png)

_**Local y Producción:**_ Otros términos que también vamos a encontrar en nuestro día a día, serán _**local**_ y _**producción**_ (pueden existir muchos más, estos van a depender del equipo con el que se trabaje) y hacen referencia al lugar donde está funcionando o donde está corriendo el sitio web o aplicación que estemos desarrollando. Si hablamos de _Local_ nos estamos refiriendo a nuestra propia máquina/equipo donde estaremos desarrollando la mayor parte del tiempo (digo mayor porque hoy en día existen alternativas donde podems escribir código directamente en el servidor donde tengamos nuestro sitio web o aplicaciión)

_**Cloud Computing:**_ O también llamado como Cloud solamente, es y de manera muy simple, una tecnología que permite el acceso remoto a software, almacenamiento de archivos y poder procesar datos utilizando internet, de esta manera podemos prescindir de su ejecución en un computado personal o servidor local. Algunos servicios Cloud son: <a href="https://aws.amazon.com/es/" target="_blank">Amazon Web Services</a> (AWS), <a href="https://cloud.google.com/?hl=es" target="_blank">GCP</a> (GCP) y <a href="https://azure.microsoft.com/es-es/" target="_blank">Azure</a>.

<h2 id="html">HTML</h2>

**H**yper**T**ext **M**arkup **L**anguage _(lenguaje de marcado de hipertexto)_ o simplemente **HTML** es el lenguaje que utilizamos para la creación de una página web, definiendo la estructura base mediante etiquetas y escribiendo el texto que posteriormente aparecerá en nuetro sitio. (te dejo un link para que puedas revisar más <a href="https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos" target="_blank">etiquetas de html</a>). También es importante mencionar que hoy en día existen pre-procesadores de html como: **Pug** (antes llamado **Jade**), **Slim**, **Haml**, entre otros.

A continuación veremos el mínimo código que necesitamos para tener una página web funcionando correctamente:

```html
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Nuevo documento</title>
  </head>
  <body>
    <p>Acá va todo el contenido de una página web</p>
  </body>
</html>
```

<h2 id="css">CSS</h2>

**C**ascading **S**tyle**S**heets _(Hojas de estilo en cascada)_ es el lenguaje que nos permite dar el diseño visual de nuestra página web, esto significa dar colores, tipos de fuentes, cambiar el formato del texto, cambiar el tamaño de la fuente, y mucha sotras cosas más. Cabe mencionar que esto no es un curso de lenguajes, si no que solo una guía de introducción al desarrollo web. En css tambien existen pre-procesadores que nos ayudan al momento de escribir nuestro código, alguno de ellos son: **SASS**, **Stylus**, **LESS** y **PostCSS**.

```css
.soy-una-clase {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #0a3f66;
  background-color: #247f86;
}
```

<h2 id="js">Javascript</h2>

Javascript, o solo **JS**, es un lenguaje de programación (a diferencia de los dos anteriores), el cual nos permite implementar funciones complejas a nuestra página, esto significa que cada que que el usuario quiera hacer alguna interacción con nuestro sitio, más allá de solo leer información, necesitaremos de su poder para llevarlos a cabo. Acá podemos pensar desde validaciones a formulario (cada vez que el usuario escriba algo en una página revisar que esté bien escrito o que cumpla con cierto criterio) como cosas mas complejas como animar graficos 2D o 3D. También es el encargado de hacer consultas a una o muchas APIs, ordenar la información obtenida y trabajar con ella pero en el front. A continuación veremos un trozo de código el cual obtiene lo que un usuario escribió en un input (concidere `Google` como referencia, donde tenemos una caja de texto con un ID _input_ y el botón _"Buscar en Google"_ con un ID _buscar_).

```js
const _boton = document.querySelector("#buscar");

boton.addEventListener("click", () => {
  const _texto = document.querySelector("#input").value;

  irABuscarInformacion(cajaDeTexto);
});
```

El ejemplo anterior describe lo siguiente:

- Hacemos una referencia del botón y lo llamamos **\_boton**
- Luego le decimos que cuando el usuario haga click en el botón, ejecute una función que hace lo siguiente:
- 1. Obtiene el valor de la caja de texto y lo guarda en una variable llamada **\_texto**
- 2. Llama una función llamada **irABuscarInformacion** la cual se encarga de ir a buscar lo que el usuario esta buscando, pasandole como argumento (lo que está entre parentesis) el texto que el usuario escribió previamente.

<h2 id="git-github">Git y Github</h2>

De manera resumida, <a href="https://git-scm.com/" target="_blank">Git</a> es una forma de poder llevar una versión del código que vamos desarrollando de forma distribuida. Si trabajamos solos, es un poco dificil ver el caso de uso de esta herramienta, pero cuando trabajamos colaborativamente con mas programadores (la cual debería ser en su mayoria), se vuelve una necesidad ya que podremos ir generando un historial del código que vamos creando, compartiendola con las personas con las que trabajemos.

Por otro lado, <a href="https://github.com/" target="_blank">Github</a> es un sitio web el cual nos permite guardar este código versionado tanto públicos como privados. Es acá donde distintos desarrolladores y desarrolladoras pueden observar nuestro código y contribur con el mismo si así lo quisieran. A pesar de que github es uno de los más importantes, no es el único, ya que existe <a href="https://about.gitlab.com/" target="_blank">Gitlab</a> y <a href="https://bitbucket.org/" target="_blank">Bitbucket</a>

![stacks](/images/articles/empezando-en-el-desarrollo-web/git-github.png)

<h2 id="que-sigue">¿Qué sigue?</h2>

A pesar de que hemos hablado de muchas cosas, aún no hemos aprendido nada. Lo que sigue es empezar a estudiar todo lo que hablamos anteriormente pero wait, no tiene que ser todo de una vez (ya que para comenzar es bastante), definamos primero que es lo que queremos hacer primero, si irnos por el camino de Front, o seguir el camino del Back, luego aprender los lenguajes con los que se trabajan dentro de esas dos ramas e ir poco a poco aprendiendo más y más.

Si te gustaría que hiciera un articulo hablando más en profundidad alguno de los puntos que mencioné anteriormente, me puedes dejar un mensaje en la sección de comentarios 😊. También puedes suscribirte, así te podré informar cada vez que publique un nuevo artículo 😎.


El JAM-Stack es una nueva arquitectura para la creación de aplicaciones web, la cual busca poder hacer proyectos mucho mas rápidos, con alta seguridad y que puedan escalar de una manera muy sencilla. JAM son las siglas de JavaScript, APIs y Markup y su principal características es que la lógica de la aplicación se encuentra en el cliente y no en el servidor.

¿Qué es un Stack?

¿Qué es JAM?

Buena idea

No tan buena idea

Consideraciones finales

Para seguir investigando

Introducción a JAMStack


<h2 id="que-es-un-stack">¿Qué es un Stack?</h2>

Un stack en programación a una colección de tecnologías configuradas para trabajar entre si. Creo y sin miedo a equivocarme que el stack más conocido es el de **LAMP**-Stack (Por sus siglas de **L**inux, **A**pache, **M**ySQL y **P**hp). Otro stack muy conocido es el **MEAN**-Stack que viene de las tecnologías **M**ongoDB, **E**xpress, **A**ngular y **N**odejs. Posteriormente, con la aparición de **React**, se crea un nuevo stack ques es básicamente el mismo que el anterior, pero esta vez, cambiamos Angular por React. quedando como **MERN**-Stack. Con la aparición de Vuejs, este último stack sufrió un último cambio, cambiando a React por Vue, y por un momento el stack se llamó **MEVN** hasta que la comunidad re-ordenó las siglas quedando con el nombre de **VEN**o**M**.

![stacks](/images/articles/introduccion-a-jamstack/stacks.png)

<h2 id="que-es-jam">¿Qué es JAM?</h2>

JAM es una palabra que está compuesta por tres palabras. La **J** viene de _JavaScript_, la **A** viene de _API_ y la **M** viene de _Markup compilado_.

Con **JavaScript** se busca que la lógica de la aplicación se ejecute en el **Frontend** y no en el **Backend** como tradicionalmente se trabaja en una aplicación web.

Las **APIs** se refieren a la o a las fuentes de datos que se utilizarán para la aplicación. Tradicionalmente utilizábamos las base de datos como fuentes de información, ahora, con esta forma de desarrollo, tendremos una o muchas APIs haciendo consultas a la información.

Cuando hablamos de **Markup compilado**, nos referimos a las vistas compiladas o generadas una sola vez, en vez de hacerlo con cada respuesta al momento de hacer la consulta al servidor (como tradicionalmente se hace).

![jamstack - siglas](/images/articles/introduccion-a-jamstack/jam.png)

<h2 id="buena-idea">Buena idea</h2>

Como en todas las arquitecturas de desarrollo, el JAM funcionará mejor en algunos proyectos que en otros. No por eso vamos a encasillar a que SOLO en estos tipos de proyectos JAM funcionará , pero si es una información a considerar.

Creo que el escenario más popular para implementar este stack son los **Blog**s o las **páginas web personales de presentación** ya que esta arquitectura va muy bien con aplicaciones que no se actualizan constantemente o páginas donde la actualización de la información corresponde a una nueva vista. También funciona bastante bien con aplicaciones de
ventas en linea, considerando que bajo esta estructura, el tiempo de respuesta al mostrar una vista en el navegador es mucho más rápida (ya que la vista está compilada/creada y el servidor solo tiene que encontrar el archivo y devolverlo al navegador). Otros escenarios donde el stack de JAM puede servir son las **landing pages** y los **sitios de documentación**

![ejemplos](/images/articles/introduccion-a-jamstack/paginas-de-ejemplo.png)

<h2 id="no-tan-buena-idea">No tan buena idea</h2>

A diferencia del punto anterior, este stack no está recomendado para sitio web donde tienen muchas páginas (muchas! - ejemplo **wikipedia**) o donde su información es actualizada constantemente, esto debido a que los proyectos realizados con JAM necesariamente deben pasar por un proceso de compilación lo cual puede ser un proceso que tome bastante tiempo y si son muchas, muchas, **muchas** páginas, mantenerlas puede ser un proceso muy complicado. Una consideración adicional es saber si es que la aplicación depende de variables que no se pueden compilar ya que se desconocen sus valores, ejemplo de estos son _Los datos del usuario que inició sesión_.

<h2 id="consideraciones-finales">Consideraciones finales</h2>

Recuerda que las tecnologías deben de ser tomadas con prudencia y que las "normas" no están escritas en piedra. El que hoy en día algo no sea recomendado, no significa que nunca lo será, ya que las tecnologías avanzan día a día a pasos agigantados. Lo que queda es poder investigar y utilizar las arquitecturas según los requerimientos del negocio.

<h2 id="para-seguir-investigando">Para seguir investigando</h2>

Si te interesó el nuevo stack y quieres seguir investigando por tu cuenta, te recomiendo los siguientes sitios de interés:

- [Sitio web JAMStack](https://jamstack.org/)
- [Netlify](https://www.netlify.com/)
- [Gatsby](https://www.gatsbyjs.org/)
- [NextJS](https://nextjs.org/)
- [Versel](https://vercel.com/)
- [Sitios que utilizan JAMStack](https://www.gatsbyjs.org/showcase/)


Artículos, Videos, Podcasts, Tutoriales y Recursos sobre Desarrollo Web, Frontend, HTML, CSS, Javascript, Typescript, React, Node y MongoDB