# 1 JavaScript - Nuevas Pantallas
---
# Javascript
---
## Javascript
- [ECMAScript2015 (_ES6_)](http://es6-features.org/) - Implementación de Javascript usada por [React](https://reactjs.org/)
- [Typescript](https://www.typescriptlang.org/) - Capa sobre Javascript que permite usar tipos complejos necesarios para programación orientada a objetos, usada por [React](https://reactjs.org/)
----
## Javascript
- [NodeJS](https://nodejs.org/en/) - Runtime para ejecutar Javascript
- [React](https://reactjs.org/) - Framework para desarrollo de aplicaciones tipo [SPA](https://en.wikipedia.org/wiki/Single-page_application) centrado en _componentes_ que _reaccionan_ a los cambios en los datos que los construyen
----
## Herramientas
- [npm](https://www.npmjs.com/) - _NodeJS Package Manager_ es a la vez una plataforma de gestión de librerías de NodeJS y un compilador
- [VS Code](https://code.visualstudio.com/) - IDE especializado en desarrollo web, se usará para el desarrollo de la parte _front_
----
## Herramientas
- [Intellij IDEA](https://www.jetbrains.com/idea/) - IDE general, se usará para el desarrollo de la parte _back_
- [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools) o [Chrome Developer Tools](https://developers.google.com/web/tools/chrome-devtools) - Herramientas integradas a dichos navegadores, se usan para depurar HTML, Javascript y estilos CSS
---
## Javascript _moderno_ y _funcional_
- Javascript incluye funcionalidad que está en **desuso** o está siendo activamente **sustituida por mejores formas** de hacerlo, en su gran mayoría son gracias a _ES6_, para ganar estabilidad y solidez en el código
- Aun así hereda muchas de las propiedades con las que hay que seguir teniendo cuidado, o directamente lidiar con ellas en casos concretos
----
## Tipos basicos
- Javascript no es un lenguaje tipado, el tipo del dato se determina dinámicamente en ejecución
```javascript=
const numero = 3;
const decimal = 4.5;
const cadena = "hola mundo";
const lista = [1, "hola", numero, 14.4];
```
----
## Variables e inmutables
- `const` implica que el contenido es **inmutable** y siempre hay que utilizarlo a menos que sea estrictamente necesario, es decir, realmente haya que hacer cambios a una variable
- Por la forma en que se trabaja con React, el uso de variables que cambian suele ser señal de que estás haciendo algo mal. Si realmente hace falta una variable capaz de cambiar, se debe usar `var`
----
## Valores especiales
- `undefined` es el valor que se obtiene al intentar acceder a una variable que no existe o cuyo valor nunca ha sido inicializado
- `null` es un valor sin tipo, usado para indicar que no hay nada, pero tiene que ser explicitamente asignado
---
## Comparación de valores
- Javascript convierte a _string_ antes de comparar valores, a menos que se le fuerce a hacer lo contrario
```javascript=
2 == 2; // true
2 == "2"; // true
2 === "2"; // false
3 != "3"; // false
3 !== "3"; // true
```
- Conclusión: a menos que sepas muy bien lo que haces, usa siempre `===` y `!==`
----
## False?
- En Javascript se usan los operadores booleanos para trabajar con la _existencia_ de los valores, por tanto los valores que representan su ausencia se tratan como _false_
```javascript=
undefined ? true : false; // false
null ? true : false; // false
'' ? true : false; // false
```
- Pero también hereda de C/C++ que 0 es `false`
```javascript=
0 ? true : false; // false
```
---
## Objetos
- Los objetos en Javascript son equivalentes a hablar de [JSON](https://www.json.org/json-en.html)
```javascript=
const objeto = {
"usuario": "Pepe",
"edad": 30,
"aficiones": ["futbol", "youtube"]
}
console.log(objeto.usuario); // Pepe
console.log(objeto.aficiones[0]); // futbol
console.log(objeto['edad']); // 30
```
----
## Objetos y clases
- No confundir estos objetos con las [clases introducidas en _ES6_](https://www.w3schools.com/js/js_classes.asp) que implementan programación orientada a objetos al estilo _Java_. Las cuales incluyen constructores, herencia, interfaces, métodos estáticos, etc...
----
## Clases en desuso
- A pesar de que React utiliza clases para crear componentes, están siendo deprecadas en favor de **componentes funcionales** y solo se mantienen por retrocompatibilidad
- Es posible trabajar con librerias y frameworks que usan clases sin crear nuevas clases. El objetivo es crear **código puramente funcional**
---
## Funciones
- Las funciones tienen múltiples propiedades que, a primera vista, asustan a cualquier programador:
1. Las funciones pueden devolver **cualquier** cosa
2. Las funciones pueden ser llamadas con **cualquier** cantidad de argumentos
3. Las funciones pueden ser variables o constantes
----
## Funciones en ES6
- La forma moderna de escribir funciones son las [_arrow functions_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions):
```javascript=
const funcionSuma = (a, b) => a + b;
const funcionSumaSegura = (a, b) => {
if (typeof a === "number" && typeof b === "number")
return a + b;
else
return null;
};
funcionSuma(2,3); // 5
funcionSuma(2,"patata"); // 2patata
funcionSumaSegura(2,"patata"); // null
funcionSumaSegura(2,3); // 5
funcionSuma(1,2,1000); // 3
funcionSuma(1); // NaN
funcionSuma("hola"); // holaundefined
```
----
## Funciones anónimas
- La programación funcional usada en React está plagado de funciones anónimas declaradas _inline_ y son pasadas como valores de otras funciones, es por eso que se inventó la sintaxis de las _arrow functions_
```javascript=
(a => a * 2)(4); // 8
((f1, f2, n) => f1(f2(n)))(n => n+1, n => n*2, 2); // 5
```
---
## Deconstrucción y composición
- _ES6_ incluye mecanismos de deconstrucción y composición para extraer fácilmente datos de objetos y listas, y también combinarlos de forma sencilla, a menudo en una sola línea
- El operador `...` como prefijo se encarga de **expandir** o **extraer** el contenido de un objeto o lista
----
## Deconstrucción de objetos
- Se pueden extraer campos por su nombre entre llaves `{}` a la izquierda del `=`
```javascript=
const obj = {"a": 1, "b": 2, "c": 3, "d": 4};
const { a, d } = obj;
const objNuevo = {
"a": a*10,
...objeto,
"d": d*10,
"e": 5*10
};
console.log(objNuevo);
// objNuevo = { a: 1, b: 2, c: 3, d: 40, e: 50 }
```
----
## Deconstrucción de listas
- Se pueden extraer elementos por su orden usando `[]`, asignándoles un nombre
- Se usa `_` para ignorar (no asignar) un valor
```javascript=
const lista = ["uno", 2, "tres", 4];
const [ uno, _ , tres ] = lista;
const listaNueva = [uno, "dos", tres, "cuatro"];
console.log(listaNueva);
// listaNueva = [ "uno", "dos", "tres", "cuatro" ]
const otraLista = ["cero", ...listaNueva, "cinco"];
console.log(otraLista);
// otraLista=["cero","uno","dos","tres","cuatro","cinco"]
```
----
## Deconstrucción en funciones
- La deconstrucción de objetos puede ser usada en los parámetros
```javascript=
const logIn = ({user, pass}) => back.post(user, pass);
const datosLogin = {"user": "foo", "pass": "bar"};
logIn(datosLogin);
```
---
## Operando sobre listas
- Las listas (_Array_) tienen [métodos](https://www.w3schools.com/js/js_array_methods.asp) propios, algunos ejemplos:
```javascript=
const lista = [1,2,3];
lista.map(n => 2*n); // [2,4,6]
lista.filter(n => n%2); // [1,3]
lista.length; // 3
lista.forEach((val, pos, lista) => {
console.log("["+pos+"] = "+val+" en "+lista);
});
// [0] = 1 en 1,2,3
// [1] = 2 en 1,2,3
// [2] = 3 en 1,2,3
```
----
## Operando sobre objetos
- Los objetos (_Object_) tienen [métodos](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects) propios, algunos ejemplos:
```javascript=
const objeto = {"a": 1, "b": 2, "c": 3};
Object.keys(objeto); // ["a", "b", "c"]
objeto['a']; // 1
const claveC = 'c';
objeto[claveC]; // 3
for (const propiedad in objeto) {
console.log(propiedad + ": " + objeto[propiedad]);
}
// a: 1
// b: 2
// c: 3
```
---
## Typescript
- Mediante [_interfaces_](https://www.tutorialsteacher.com/typescript/typescript-interface) de Typescript se puede convertir a Javascript en un lenguaje tipado en los casos que se necesite
```javascript=
interface Persona {
nombre: string;
edad: number;
adulto: (edad: number) => boolean;
}
const americano: Persona = {
nombre: "Alan",
edad: 20,
adulto: n => n >= 21
};
console.log(americano.adulto(americano.edad)); // false
```
{"metaMigratedAt":"2023-06-15T02:24:45.489Z","metaMigratedFrom":"Content","title":"1 JavaScript - Nuevas Pantallas","breaks":true,"contributors":"[{\"id\":\"884a1953-b49e-46b0-9a4a-ee6741fc2d40\",\"add\":29329,\"del\":7566},{\"id\":\"eb46e95d-847b-46ed-a8cd-6ce9f5c14045\",\"add\":4115,\"del\":17396}]"}