# Curso Básico de JavaScript

#Platzi/javascript_basico

## ¿Que es javascript?
*¿Qué es JavaScript?*
JavaScript es un lenguaje de programación dinámico que tiene la capacidad de ser
utilizado en muchos dispositivos diferentes. Puede usarse en ordenadores personales,
servidores web y teléfonos inteligentes. Es un lenguaje interpretado, orientado a objetos,
débilmente tipado y dinámico.
JavaScript se emplea comúnmente para el desarrollo web front-end y más recientemente
para algunos desarrollos back-end a través de frameworks como Node.Js. o Next.Js. Tiene
características como la programación orientada a objetos, funciones y herencia basada en
prototipos.
*¿Cómo nace Javascript?*
Nace con la necesidad de generar dinamismo en las páginas web y que a su vez los
usuarios y las empresas pudieran interactuar unos con otros. Fue creado por Brendan Eich
en 1995 y se convirtió en un estándar oficial del World Wide Web Consortium (W3C) en
1997.
*¿Por qué decimos que Javascript es un lenguaje dinámico?*
Corre directamente en la etapa de Runtime, sin una etapa de compilación previa. Esto
permite probar nuestro código inmediatamente; pero también es lo que hace que los
errores no se muestren sino hasta que se ejecuta el programa. Lo que se ve a primera
vista, cuando se analiza el código, es muy probable que no sea lo que se va a obtener
cuando el programa se ejecute.
JavaScript permite declarar (por ejemplo) variables cuyo valor (y tipo) solo se conocerá al
momento de su ejecución en función de las condiciones dadas al momento de correrlo en
un entorno real. En cambio, los lenguajes estáticos no compilarán en código ejecutable a
menos que todos los valores (o tipos de valores) se conozcan por adelantado.
*¿Por qué es débilmente tipado?*
Porque los tipos de datos no están bien definidos en el lenguaje y permite, por ejemplo,
operaciones entre numerosos y letras. Esto sucede porque el lenguaje asume tipos de
datos que no necesariamente fueron los que se querían representar. Se pueden hacer
operaciones entre tipos distintos de datos (enteros con strings, booleanos con enteros,
etc.). Ejemplo:
```javascript
4 + “7”; // 47
4 * “7”; // 28
2 + true; // 3
false - 3; // -3
```
*¿Realmente es Javascript un lenguaje interpretado?*
Sí, y la razón es que el navegador lee línea por línea nuestro código, el cual le indica lo que
tiene que ir haciendo, sin la necesidad de compilar. Todo esto es controlado por el motor
de Javascript V8 del navegador.
Just in Time Compiler, traduce nuestro código en código máquina que puede entender la
computadora. (Byte Code)

*Qué significa que Javascript es Backwards Compatible*

Todas las funciones nuevas que salen para Javascript no dañarán el trabajo ya hecho
previamente, pero no se podrá utilizar en nuestro entorno de trabajo inmediatamente.
Para solucionar esto está [Babel](https://platzi.com/blog/que-es-babel/) , que permite
usar las nuevas características del lenguaje, pero lo transforma a una versión que el
navegador pueda entender.

## 2. ¿Porque JavaScript?
A final del 2019 la W3C subió como lenguaje de programación a Web Assembly que sirve
para hacer productos web.

1. Si solo estuvieras interesado en trabajar aplicaciones web tienes muchos frameworks y

librerías construidas en JavaScript que te van a ayudar a hacer proyectos de forma mucho
mas rápida, eficiente y robusta (Angular, View, React,entre otros)
2. Si no quieres trabajar solo en aplicaciones Web puedes utilizar JavaScript con un
framework que se llama React Native para poder construir aplicaciones nativas como
Android y IOS.
3. Puedes construir aplicaciones de escritorio con JavaScript, usando un framework
llamado Electron, pueden correr en Mac o Windows.
4. También puedes trabajar en la parte del Back-end o **IOT **(Internet Od Things) es un
concepto que se refiere a una interconexion digital de objetos cotidianos con Internet.
Esto con un Framework llamado NodeJS, el cual es un entorno de ejecución de JavaScript
que corre directamente en el Back-end.

*Sitios web basados en:*

* Angular: [Forbes](https://www.forbes.com/)
* React: [Airbnb](https://www.airbnb.com/)
* Vue: [GitLab](https://about.gitlab.com/)
*Aplicaciones basadas en React Native:*
* [UberEats](https://www.ubereats.com/)
* [Discord](https://discord.com/)
* [Instagram](https://www.instagram.com/)
Fuente: [Enlace](https://reactnative.dev/showcase)
*Aplicaciones para Escritorio basados en Electron:*
* Visual Studio Code
* WhatsApp
* Twitch
[Ver más aplicaciones de Electron JS](https://www.electronjs.org/apps)
*Compañías que usan Node.JS para parte de su backend:*
* Netflix
* Linkedin
 * PayPal
Fuente: [Enlace](https://blog.techmagic.co/companies-that-use-node-js-for-backend-
how-do-big-players-benefit-from-it/)

## 5. Funciones en Javascript
Son un conjunto de sentencias que nosotros podemos utilizar para generar ciertas
acciones con los valores que ya guardamos antes en las variables.
Tenemos dos tipos de funciones
* Declarativas: va a inicializar un valor y lo guardamos en memoria.
* Expresión (también conocidas como funciones anónimas): vamos a crear una
variable donde guardamos la función en memoria.
Las funciones también necesitan parámetros que estoy esperando recibir como
valor para que la función pueda hacer algo.
* Parámetros de la función: nos ayudan a generar cálculos o resultados de la
función.

Cuando hablamos de funciones en JavaScript, tenemos dos tipos de funciones: Funciones

Declarativas (function declaration / function statement) y Expresiones de función
(function expression / funciones anónimas).
Funciones Declarativas:
En las funciones declarativas, utilizamos la palabra reservada function al inicio para poder
declarar la función:
``` javascript
function saludar(nombre) {
console.log(`Hola ${nombre}`);
}

saludar('Diego');
```

Expresión de función:
En la expresión de función, la declaración se inicia con la palabra reservada var, donde se
generará una variable que guardará una función anónima.
``` javascript
var nombre = function(nombre){
console.log(`Hola ${nombre}`)
}

nombre(‘Diego’);
```
En la expresión de función, la función podría o no llevar nombre, aunque es más común
que se hagan anónimas.
Diferencias:
A las funciones declarativas se les aplica hoisting, y a la expresión de función, no. Ya que el
hoisting solo se aplica en las palabras reservadas var y function.
Lo que quiere decir que con las funciones declarativas, podemos mandar llamar la función
antes de que ésta sea declarada, y con la expresión de función, no, tendríamos que
declararla primero, y después mandarla llamar.

Template storing o plantilla de cadena de texto ::Hola ${estudiante}::

## Scope
Hay 2 tipos:
* Global
* Local
* Block Scope
* Function Scope

## 8. Hoisting
El concepto de Hoisting fue pensado como una manera general de referirse a cómo
funcionan los contextos de ejecución en JavaScript (específicamente las fases de creación
y ejecución). Sin embargo, el concepto puede ser un poco confuso al principio.
Conceptualmente, por ejemplo, una estricta definición de hoisting sugiere que las
declaraciones de variables y funciones son físicamente movidas al comienzo del código,
pero esto no es lo que ocurre en realidad. Lo que sucede es que las declaraciones de
variables y funciones son asignadas en memoria durante la fase de _compilación,_ pero
quedan exactamente en dónde las has escrito en el código.

## 9. Coerción
Coerción es la forma en la que podemos cambiar un tipo de valor a otro, existen dos tipos
de coerción:
Coerción implícita = es cuando el lenguaje nos ayuda a cambiar el tipo de valor.
Coerción explicita = es cuando obligamos a que cambie el tipo de valor.

## 10. Valores: Truthy y Falsy

``` javascript
//Ejemplos en los que Boolean devuelve Falso:
Boolean(0); //false
Boolean(null); //false
Boolean(NaN); //false
Boolean(undefined); //false
Boolean(false); //false
Boolean(""); //false

//Ejemplos en los que Boolean devuelve verdadero:

Boolean(1); //true para 1 o cualquier número diferente de cero (0)
Boolean("a"); //true para cualquier caracter o espacio en blanco en el string
Boolean([]); //true aunque el array esté vacío
Boolean({}); //true aunque el objeto esté vacío
Boolean(function(){}); //Cualquier función es verdadera también

```

## 11. Operadores: Asignación, Comparación y Aritméticos

*Operador de asignacion*
= -> operador de asignacion
*Operadores de comparacion*
== -> igual que
=== -> estrictamente igual que
> or >= or >== -> mayor o mayor igual que
< or <= or <== -> menor o menor igual que
!= or !== ->diferente que
*Operadores aritmeticos*
(+) -> operador suma este se utiliza para concatener dos cadenas de texto.
(-) -> operador resta
(*) -> operador de multicacion
(/) -> operador de division
(%) -> operador de modulo
(**) -> operador de potenciacion
tambien se les conoce como operadores binarios. por que toman dos valores y generan un
resultado.
*Operadores logicos*
( ! ) -> NOT niega un valor
( && ) -> AND
( || ) -> OR

## 14. Arrays
Un Array es un tipo de estructura de datos, objeto. Puede guardar datos distintos dentro,
guarda los datos en forma de lista.
::.lenght:: devuelve la longitud del array.
::.push():: agrega elementos al final de array.
::.pop():: elimina un elemento del array.
::.unshift():: agrega un elemento al array, pero lo agrega en primer lugar.
::.shift():: elimina el elemento que está en el inicio del array.
::.indexOf():: devuelve la posición de un elemento del array.

## 15. Loops: For y For…of

Los bucles pueden ejecutar un bloque de código varias veces. JavaScript admite diferentes
tipos de bucles:
* for - recorre un bloque de código varias veces
 * for/in - recorre las propiedades de un objeto
* for/of - recorre los valores de un objeto iterable
* while - recorre un bloque de código mientras se cumple una condición específica
* do/while - también recorre un bloque de código mientras se cumple una
condición específica

```javascript
var estudiantes = ["Maria", "Sergio", "Rosa", "Daniel"];

function saludarEstudiantes(alumno) {
console.log(`Hola, ${alumno}`);
}
for(var alumno of estudiantes) {
saludarEstudiantes(alumno);
}

//SALIDA
Hola, Maria
Hola, Sergio
Hola, Rosa
Hola, Daniel

```

## 16. Loops: While

```javascript
var estudiantes = ["Maria", "Sergio", "Rosa", "Daniel"];

function saludarEstudiante(estudiante) {
console.log(`Hola ${estudiante}`);
}

var i = 0;

//do-while
do {
saludarEstudiante(estudiantes[i]);
i++;
} while (i < estudiantes.length)

//while
while (estudiantes.length > 0) {
var estudiante = estudiantes.shift();
saludarEstudiante(estudiante);
}
```

## 17. Objects
```javascript
var miAuto = {
marca: "Toyota",
modelo: "Corolla",
año: 2020,
detallesDelAuto: function () {
console.log(`Auto ${this.modelo} ${this.año}`);
}
```

## 18. Objects: Función constructora

``` javascript
//RETO

//Paso 1: Creamos una lista vacía de autos

var listaAutos = [];

//Paso 2: Creamos la función constructora

function auto(marca, modelo, anio){
this.marca = marca;
this.modelo = modelo;
this.anio = anio;
};

//Paso 3: Creamos una función que agregue un auto nuevo a la lista

function agregarAuto(marca, modelo, anio){
var nuevoAuto = new auto(marca, modelo, anio);
listaAutos.push(nuevoAuto);
};

//Paso 4: Creamos una función para que el usuario agregue un nuevo carro con sus
parámetros
function registrarAutoNuevo(){
var marca = prompt("Ingresa la marca: ");
var modelo = prompt("Ingresa el modelo: ");
var anio = prompt("Ingresa el año: ");
agregarAuto(marca, modelo, anio);
console.log("¡Agregaste tu nuevo carro con éxito!");
};
//Paso 5: Mostramos el arreglo actualizado
listaAutos;
```

## 19. Métodos de recorridos de Arrays

``` javascript
var articulos = [
{ nombre: '📱', precio: 1000 },
{ nombre: '💻', precio: 1500 },
{ nombre: '🖥', precio: 2000 },
{ nombre: '⌨', precio: 100 },
{ nombre: '🖱', precio: 70 },
{ nombre: '🚗', precio: 30000 },
];

// Método Filter
var articulosFiltrados = articulos.filter(function(articulo) {
return articulo.precio <= 500;
});

// Método Map
var nombreArticulos = articulos.map(function(articulo) {
return articulo.nombre;
});

articulosFiltrados;
// (2) [{…}, {…}]
// 0: {nombre: "⌨", precio: 100}
// 1: {nombre: "🖱", precio: 70}

nombreArticulos; // (5) ["📱", "💻", "🖥", "⌨", "🚗"]

```

## 20. Recorriendo Arrays con .find(), .forEach() y .some()

A modo de recopilación:
* find() : Devuelve _el primer elemento_ del array que cumpla con la condición dada
* foreach() : Ejecuta lo que le definamos una vez por cada elemento de nuestro array
* some() : Comprueba si al menos un elemento del array cumple con la condición que le
damos
* filter() : Devuelve _todos los elementos_ del array que cumplan con la condición dada
Acá te dejo la documentación de cada uno:
[find()](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_global
es/Array/find) -
[foreach()](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_gl
obales/Array/forEach) -
[some()](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_glob
ales/Array/some) -
[filter()](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globa
les/Array/filter)

```javascript
var articulos = [
{ nombre: "Bici", costo: 3000 },
{ nombre: "TV", costo: 2500 },
{ nombre: "Libro", costo: 320 },
{ nombre: "Celular", costo: 10000 },
{ nombre: "Laptop", costo: 20000 },
{ nombre: "Teclado", costo: 500 },
{ nombre: "Audifonos", costo: 1700 },
];

//filter Genera un nuevo array

var articulosFiltrados = articulos.filter(function(articulo){
return articulo.costo <= 500; //articulos con precio menor a 500 pesos
});

//map Ayuda a mapear ciertos elementos de los articulos, es necesario generar nuevo
array
var nombreArticulos = articulos.map(function(articulo){
return articulo.nombre;
});

//find Ayuda a encontrar algo dentro del array articulos

var encuentraArticulo = articulos.find(function(articulo){
return articulo.nombre === "Laptop";
});

//forEach No es necesario generar nuevo array, se utiliza para realizar un recorrido de un

array principal
articulos.forEach(function(articulo){
console.log(articulo.nombre);
});

//some Se genera nuevo array, regresa un condición en Boolean

var articulosBaratos = articulos.some(function(articulo){
 return articulo.costo <= 700;
});
```