msb-public
/
30-Days-Of-JavaScript
mirror of https://github.com/Asabeneh/30-Days-Of-JavaScript
1
0
Code Issues Projects Releases Wiki Activity

Merge branch 'Asabeneh:master' into master

Browse Source
pull/593/head
hoangdev72 3 years ago committed by GitHub
parent d6bda7d7a2 270b352403
commit 89b04ac5ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 5522 additions and 406 deletions
Show Stats Download Patch File Download Diff File

781
Spanish/dia_02_tipos_de_datos.md
View File

File diff suppressed because it is too large Load Diff

632
Spanish/dia_03_Booleanos_Operadores_Date/dia_03_Boleanos_Operadores_Date.md
Unescape View File

@ -0,0 +1,632 @@
<div align="center">
<h1> 30 Días De JavaScript: Booleanos, Operadores, Date</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Autor:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> Enero, 2020</small>
</sub>
</div>
[<< Day 2](../dia_02_tipos_de_datos.md) | [Day 4 >>](../dia_04_Condicionales/dia_04_Condicionales.md)
![Thirty Days Of JavaScript](../images/banners/day_1_3.png)
- [📔 Día 3](#-day-3)
- [Booleanos](#booleanos)
- [Valores verdaderos](#valores-verdaderos)
- [Valores falsos](#valores-falsos)
- [Undefined](#undefined)
- [Null](#null)
- [Operadores](#operadores)
- [Operadores de Asignación](#operadores-de-asignación)
- [Operadores Aritméticos](#operadores-aritméticos)
- [Operadores de Comparación](#operadores-de-comparación)
- [Operadores Lógicos](#operadores-lógicos)
- [Operadores de Incremento](#operadores-de-incremento)
- [Operadores de Decremento](#operadores-de-decremento)
- [Operadores Ternarios](#operadores-ternarios)
- [Precedencia de Operadores](#precedencia-de-operadores)
- [Métodos Window](#métodos-window)
- [Método Window alert()](#método-window-alert)
- [Método Window prompt() ](#método-window-prompt)
- [Método Window confirm() ](#método-window-confirm)
- [Objeto Date](#objeto-date)
- [Crear un objeto de tiempo](#crear-un-objeto-de-tiempo)
- [Obtener el año completo](#obtener-el-año-completo)
- [Obtener mes](#obtener-mes)
- [Obtener fecha](#obtener-fecha)
- [Obtener día](#obtener-día)
- [Obtener horas](#obtener-horas)
- [Obtener minutos](#obtener-minutos)
- [Obtener segundos](#obtener-segundos)
- [Obtener tiempo](#obtener-tiempo)
- [💻 Día 3: Ejercicios](#💻-día-3-ejercicios)
- [Ejercicios: Nivel 1](#ejercicios-nivel-1)
- [Ejercicios: Nivel 2](#ejercicios-nivel-2)
- [Ejercicios: Nivel 3](#ejercicios-nivel-3)
# 📔 Day 3
## Booleanos
Un tipo de dato booleano representa uno de los dos valores: _true_ o _false_. El valor booleano es true (verdadero) o false (falso) El uso de estos tipos de datos quedará claro cuando veas operadores de comparación. Cualquier comparación devuelve un valor booleano que es true o false.
**Ejemplos: Valores Booleanos**
```js
let isLightOn = true;
let isRaining = false;
let isHungry = false;
let isMarried = true;
let truValue = 4 > 3; // true
let falseValue = 4 < 3; // false
```
Acordamos que los valores booleanos son true o false.
### Valores verdaderos
- Todos los números (positivos y negativos) son verdaderos excepto cero
- Todos las string (cadenas) son verdaderos excepto un string vacío ('')
- El booleano true
### Valores falsos
- 0
- 0n
- null
- undefined
- NaN
- El booleano false
- '', "", ``, string vacío
Es bueno recordar esos valores verdaderos y falsos. En una sección posterior, los usaremos con condiciones para tomar decisiones.
## Undefined
Si declaramos una variable y no le asignamos un valor, el valor será undefined (indefinido). Además de esto, si una función no devuelve el valor, será undefined.
```js
let firstName;
console.log(firstName); //no definido, porque aún no está asignado un valor
```
## Null
```js
let empty = null;
console.log(empty); // -> null (nulo) , significa que no tiene valor
```
## Operadores
### Operadores de Asignación
Un signo igual en JavaScript es un operador de asignación. Se utiliza para asignar una variable.
```js
let firstName = "Asabeneh";
let country = "Finland";
```
Operadores de asignación
![Assignment operators](../images/assignment_operators.png)
### Operadores Aritméticos
Los operadores aritméticos son operadores matemáticos.
- Suma(+): a + b
- Resta(-): a - b
- Multiplicación(_): a _ b
- División(/): a / b
- Módulo(%): a % b
- Exponencial(**): a ** b
```js
let numOne = 4;
let numTwo = 3;
let sum = numOne + numTwo;
let diff = numOne - numTwo;
let mult = numOne * numTwo;
let div = numOne / numTwo;
let remainder = numOne % numTwo;
let powerOf = numOne ** numTwo;
console.log(sum, diff, mult, div, remainder, powerOf); // 7,1,12,1.33,1, 64
```
```js
const PI = 3.14;
let radius = 100; // longitud en metros
//Calculemos el área de un circulo
const areaOfCircle = PI * radius * radius;
console.log(areaOfCircle); // 314 m
const gravity = 9.81; // en m/s2
let mass = 72; // en Kilogram
// Calculemos el peso de un objeto.
const weight = mass * gravity;
console.log(weight); // 706.32 N(Newton)
const boilingPoint = 100; // temperatura en °C, punto de ebullición del agua
const bodyTemp = 37; // temperatura corporal en °C
// Concatenación de string con números usando interpolación de strings
/*
El punto de ebullición del agua es de 100 °C.
La temperatura del cuerpo humano es de 37 oC.
La gravedad de la tierra es de 9.81 m/s2.
*/
console.log(
`El punto de ebullición del agua es de ${boilingPoint} °C.\nLa temperatura del cuerpo humano es de ${bodyTemp} °C.\nLa gravedad de la tierra es de ${gravity} m / s2.`
);
```
### Operadores de Comparación
En programación comparamos valores, usamos operadores de comparación para comparar dos valores. Comprobamos si un valor es mayor, menor o igual a otro valor.
![Operadores de Comparación](../images/comparison_operators.png)
**Ejemplos: Operadores de Comparación**
```js
console.log(3 > 2); // true, porque 3 es mayor que 2
console.log(3 >= 2); // true, porque 3 es mayor que 2
console.log(3 < 2); // false, porque 3 es mayor que 2
console.log(2 < 3); // true, porque 2 es menor que 3
console.log(2 <= 3); // true, porque 2 es menor que 3
console.log(3 == 2); // false, porque 3 no es igual a 2
console.log(3 != 2); // true, porque 3 no es igual a 2
console.log(3 == "3"); // true, compara solamente el valor
console.log(3 === "3"); // false, compara tanto el valor como el tipo de dato
console.log(3 !== "3"); // true, compara tanto el valor como el tipo de dato
console.log(3 != 3); // false, compara solo valor
console.log(3 !== 3); // false, compara tanto el valor como el tipo de dato
console.log(0 == false); // true, equivalente
console.log(0 === false); // false, No exactamente igual
console.log(0 == ""); // true, equivalente
console.log(0 == " "); // true, equivalente
console.log(0 === ""); // false, No exactamente igual
console.log(1 == true); // true, equivalente
console.log(1 === true); // false, No exactamente igual
console.log(undefined == null); // true
console.log(undefined === null); // false
console.log(NaN == NaN); // false, diferente
console.log(NaN === NaN); // false
console.log(typeof NaN); // tipo número
console.log("mango".length == "avocado".length); // false
console.log("mango".length != "avocado".length); // true
console.log("mango".length < "avocado".length); // true
console.log("milk".length == "meat".length); // true
console.log("milk".length != "meat".length); // false
console.log("tomato".length == "potato".length); // true
console.log("python".length > "dragon".length); // false
```
Trate de entender las comparaciones anteriores con algo de lógica. Recuerde que ninguna lógica puede ser difícil.
JavaScript es de alguna manera un lenguaje extraño de programación. El código JavaScript se ejecuta y le da un resultado, pero a menos que sea bueno en él, puede que no sea el resultado deseado.
Como regla general, si un valor no es verdadero con == no será igual con ===. Usar === es más seguro que usar ==. El siguiente [link](https://dorey.github.io/JavaScript-Equality-Table/) tiene una lista exhaustiva de comparaciones de tipos de datos.
### Operadores Lógicos
Los siguientes símbolos son los operadores lógicos más comunes:
&&(ampersand) , ||(pipe) and !(negation).
El operador && se vuelve verdadero sólo si los dos operandos son verdaderos.
El operador || se vuelve verdadero cualquiera de los operandos es verdadero.
El operador ! niega true a false y false a true.
```js
// && ejemplo de operador ampersand
const check = 4 > 3 && 10 > 5; // true && true -> true
const check = 4 > 3 && 10 < 5; // true && false -> false
const check = 4 < 3 && 10 < 5; // false && false -> false
// || ejemplo de operador pipe
const check = 4 > 3 || 10 > 5; // true || true -> true
const check = 4 > 3 || 10 < 5; // true || false -> true
const check = 4 < 3 || 10 < 5; // false || false -> false
//! ejemplos de negación
let check = 4 > 3; // true
let check = !(4 > 3); // false
let isLightOn = true;
let isLightOff = !isLightOn; // false
let isMarried = !false; // true
```
### Operadores de Incremento
En JavaScript usamos el operador de incremento para aumentar un valor almacenado en una variable. El incremento podría ser antes o después del incremento. Veamos cada uno de ellos:
1. Pre-incremento
```js
let count = 0;
console.log(++count); // 1
console.log(count); // 1
```
1. Post-incremento
```js
let count = 0;
console.log(count++); // 0
console.log(count); // 1
```
Usamos la mayor parte del tiempo post-incremento. Pero debes recordar cómo usar el operador de incremento posterior.
### Operadores de Decremento
En JavaScript usamos el operador de decremento para disminuir un valor almacenado en una variable. El decremento puede ser previo o posterior al decremento. Veamos cada uno de ellos:
1. Pre-decremento
```js
let count = 0;
console.log(--count); // -1
console.log(count); // -1
```
2. Post-decremento
```js
let count = 0;
console.log(count--); // 0
console.log(count); // -1
```
### Operadores Ternarios
El operador ternario permite escribir una condición.
Otra forma de escribir condicionales es usando operadores ternarios. Mira los siguientes ejemplos:
```js
let isRaining = true;
isRaining
? console.log("Necesitas un impermeable.")
: console.log("No necesitas un impermeable.");
isRaining = false;
isRaining
? console.log("Necesitas un impermeable.")
: console.log("No necesitas un impermeable.");
```
```sh
Necesitas un impermeable.
No necesitas un impermeable.
```
```js
let number = 5;
number > 0
? console.log(`${number} is a positive number`)
: console.log(`${number} is a negative number`);
number = -5;
number > 0
? console.log(`${number} is a positive number`)
: console.log(`${number} is a negative number`);
```
```sh
5 es un número positivo
-5 es un número negativo
```
### Precedencia de Operadores
Me gustaría recomendarle que lea sobre la precedencia de operadores en el siguiente [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)
## Métodos Window
### Método Window alert()
Cómo ha visto al principio, el método alert() muestra un cuadro de alerta con un mensaje específico y un botón Aceptar. Es un método incorporado y toma un argumento.
```js
alert(message);
```
```js
alert("Bienvenido a 30DaysOfJavaScript");
```
No uses demasiada alert (alertas) porque molesta, úsala solo para probar.
### Método Window prompt()
Los métodos window prompt (entrada) muestran un cuadro de solicitud con una entrada en su navegador para tomar valores de entrada y los datos de entrada se pueden almacenar en una variable. El método prompt() toma dos argumentos. El segundo argumento es opcional.
```js
prompt("texto requerido", "texto opcional");
```
```js
let number = prompt("Ingrese un número", "El número va aquí");
console.log(number);
```
### Método Window confirm()
El método confirm() muestra un cuadro de diálogo con un mensaje específico, junto con un botón Aceptar y Cancelar. Un cuadro de confirmación se usa a menudo para pedir permiso a un usuario para ejecutar algo. Window confirm() toma una cadena como argumento. Al hacer clic en Aceptar se obtiene un valor true, mientras que al hacer clic en el botón Cancelar se obtiene un valor false.
```js
const agree = confirm("¿Estás seguro de que quieres eliminar? ");
console.log(agree); // el resultado será true o false según el click en el cuadro de diálogo
```
Estos no son todos los métodos de window, tendremos una sección separada para profundizar en los métodos de window.
## Objeto Date
El tiempo es una cosa importante. Nos gusta saber la hora de una determinada actividad o evento. En JavaScript, la hora y la fecha actuales se crean utilizando el objeto Date de JavaScript. El objeto que creamos usando el objeto Date proporciona muchos métodos para trabajar con fecha y hora. Los métodos que usamos para obtener información de fecha y hora de los valores de un objeto Date comienzan con una palabra _get_ porque proporciona la información.
_getFullYear(), getMonth(), getDate(), getDay(), getHours(), getMinutes, getSeconds(), getMilliseconds(), getTime(), getDay()_
![Date time Object](../images/date_time_object.png)
### Crear un objeto de tiempo
Una vez que creamos el objeto de tiempo. El objeto de tiempo proporcionará información sobre el tiempo. Vamos a crear un objeto de tiempo
```js
const now = new Date();
console.log(now); // Sáb 04 de enero de 2020 00:56:41 GMT+0200 (hora estándar de Europa del Este
```
Hemos creado un objeto de tiempo y podemos acceder a cualquier información de fecha y hora del objeto utilizando los métodos de obtención que hemos mencionado en la tabla.
### Obtener el año completo
Extraigamos u obtengamos el año completo de un objeto de tiempo.
```js
const now = new Date();
console.log(now.getFullYear()); // 2020
```
### Obtener mes
Extraigamos u obtengamos el mes de un objeto de tiempo.
```js
const now = new Date();
console.log(now.getMonth()); // 0, porque el mes es enero, meses(0-11)
```
### Obtener fecha
Extraigamos u obtengamos la fecha del mes de un objeto de tiempo.
```js
const now = new Date();
console.log(now.getDate()); // 4, porque es el 4to dia del mes, día (1-31)
```
### Obtener día
Extraigamos u obtengamos el día de la semana de un objeto de tiempo.
```js
const now = new Date();
console.log(now.getDay()); // 6, porque el día es sábado que es el día 7
// El domingo es 0, el lunes es 1 y el sábado es 6
// Obtener el día de la semana como un número (0-6)
```
### Obtener horas
Extraigamos u obtengamos las horas de un objeto de tiempo.
```js
const now = new Date();
console.log(now.getHours()); // 0, porque el tiempo es 00:56:41
```
### Obtener minutos
Extraigamos u obtengamos los minutos de un objeto de tiempo.
```js
const now = new Date();
console.log(now.getMinutes()); // 56, porque el tiempo es 00:56:41
```
### Obtener segundos
Extraigamos u obtengamos los segundos de un objeto de tiempo.
```js
const now = new Date();
console.log(now.getSeconds()); // 41, porque el tiempo es 00:56:41
```
### Obtener tiempo
Este método da tiempo en milisegundos a partir del 1 de enero de 1970. También se conoce como tiempo Unix. Podemos obtener el tiempo de Unix de dos maneras:
1. Usando _getTime()_
```js
const now = new Date(); //
console.log(now.getTime()); // 1578092201341, este es el número de segundos que han pasado desde el 1ero de Enero de 1970 al 4 de Enero del 2020 00:56:41
```
2. Usando _Date.now()_
```js
const allSeconds = Date.now(); //
console.log(allSeconds); // 1578092201341, este es el número de segundos que han pasado desde el 1ero de Enero de 1970 al 4 de Enero del 2020 00:56:41
const timeInSeconds = new Date().getTime();
console.log(allSeconds == timeInSeconds); // true
```
Vamos a formatear estos valores a un formato de tiempo legible por humanos.
**Ejemplo:**
```js
const now = new Date();
const year = now.getFullYear(); // return años
const month = now.getMonth() + 1; // return meses(0 - 11)
const date = now.getDate(); // return días (1 - 31)
const hours = now.getHours(); // return horas (0 - 23)
const minutes = now.getMinutes(); // return minutos (0 -59)
console.log(`${date}/${month}/${year} ${hours}:${minutes}`); // 4/1/2020 0:56
```
🌕 Tienes una energía ilimitada. Acabas de completar los desafíos del día 3 y estás a tres pasos de tu camino hacia la grandeza. Ahora haz algunos ejercicios para tu cerebro y tus músculos.
## 💻 Día 3: Ejercicios
### Ejercicios: Nivel 1
1. Declare las siguientes variables; firstName, lastName, country, city, age, isMarried, year y asignar un valor, use el operador typeof para verificar diferentes tipos de datos.
2. Verifique si typeof '10' es igual a 10
3. Verifique si parseInt('9.8') es igual a 10
4. Verifique cualquier valor booleano true o false.
1. Escriba tres declaraciones de JavaScript que proporcionen un valor verdadero.
2. Escriba tres declaraciones de JavaScript que proporcionen un valor falso.
5. Calcule primero el resultado de la siguiente expresión de comparación sin usar console.log(). Después de decidir el resultado, confirmelo usando console.log()
1. 4 > 3
2. 4 >= 3
3. 4 < 3
4. 4 <= 3
5. 4 == 4
6. 4 === 4
7. 4 != 4
8. 4 !== 4
9. 4 != '4'
10. 4 == '4'
11. 4 === '4'
12. Encuentre la longitud de Python y jargon y haga una declaración de comparación falsa.
6. Calcule primero el resultado de las siguientes expresiones sin usar console.log(). Después de decidir el resultado, confirmelo usando console.log()
1. 4 > 3 && 10 < 12
2. 4 > 3 && 10 > 12
3. 4 > 3 || 10 < 12
4. 4 > 3 || 10 > 12
5. !(4 > 3)
6. !(4 < 3)
7. !(false)
8. !(4 > 3 && 10 < 12)
9. !(4 > 3 && 10 > 12)
10. !(4 === '4')
11. No hay 'on' tanto en dragon como en python
7. Utilice el objeto Date para realizar las siguientes actividades
1. ¿Qué año es hoy?
2. ¿Qué mes es hoy con un número?
3. ¿Qué fecha es hoy?
4. ¿Qué día es hoy con un número?
5. ¿Cuál es la hora actual?
6. ¿Cuántos minutos hay actualmente?
7. Averigüe el número de segundos transcurridos desde el 1 de enero de 1970 hasta ahora.
### Ejercicios: Nivel 2
1. Escriba un script que solicite al usuario que ingrese la base y la altura del triángulo y calcule el área de un triángulo (área = 0,5 x b x h).
```sh
Ingrese base: 20
Ingrese altura: 10
El área del triángulo es: 100
```
1. Escriba un script que solicite al usuario que ingrese el lado a, el lado b y el lado c del triángulo y calcule el perímetro del triángulo (perímetro = a + b + c)
```sh
Ingrese lado a: 5
Ingrese lado b: 4
Ingrese lado c: 3
El perimetro del triangulo es: 12
```
1. Obtenga el largo y el ancho usando prompt y calcule el área del rectángulo (área = largo x ancho y el perímetro del rectángulo (perímetro = 2 x (largo + ancho))
1. Obtenga el radio usando prompt y calcule el área de un círculo (área = pi x r x r) y la circunferencia de un círculo (c = 2 x pi x r) donde pi = 3.14.
1. Calcule la pendiente, la intersección X y la intersección Y de y = 2x -2
1. La pendiente es m = (y<sub>2</sub>-y<sub>1</sub>)/(x<sub>2</sub>-x<sub>1</sub>). Encuentra la pendiente entre el punto (2, 2) y el punto (6,10)
1. Compare la pendiente de las dos preguntas anteriores.
1. Calcula el valor de y (y = x<sup>2</sup> + 6x + 9). Trate de usar diferentes valores de x y averigüe en qué valor de x y es 0.
1. Escriba un script con prompt que solicite al usuario que ingrese las horas y la tarifa por hora. ¿Calcular el salario de la persona?
```sh
Ingrese horas: 40
Introduce la tarifa por hora: 28
Su ganancia semanal es 1120
```
1. Si la longitud de su nombre es mayor que 7, diga que su nombre es largo; de lo contrario, diga que su nombre es corto.
1. Compare la longitud de su nombre y la longitud de su apellido y debería obtener este resultado.
```js
let firstName = "Asabeneh";
let lastName = "Yetayeh";
```
```sh
Tu primer nombre, Asabeneh, es más largo que tu apellido, Yetayeh.
```
1. Declare dos variables _myAge_ y _yourAge_ y asignarles los valores iniciales y myAge y yourAge.
```js
let myAge = 250;
let yourAge = 25;
```
```sh
Soy 225 años mayor que tú.
```
1. Usando prompt, obtenga el año en que nació el usuario y, si el usuario tiene 18 años o más, permita que el usuario conduzca, si no dígale que espere una cierta cantidad de años.
```sh
Introduzca el año de nacimiento: 1995
Tienes 25 años. Tienes la edad suficiente para conducir.
Introduzca el año de nacimiento: 2005
Tienes 15 años. Podrás conducir después de 3 años.
```
1. Escriba un script que solicite por prompt al usuario que ingrese el número de años. Calcular el número de segundos que puede vivir una persona. Supongamos que alguien vive solo cien años
```sh
Ingrese el número de años de vida: 100
Viviste 3153600000 segundos.
```
1. Cree un formato de hora legible por humanos usando el objeto Date.
1. YYYY-MM-DD HH:mm
2. DD-MM-YYYY HH:mm
3. DD/MM/YYYY HH:mm
### Ejercicios: Nivel 3
1. Cree un formato de hora legible por humanos usando el objeto Date. La hora y el minuto deben ser siempre dos dígitos (7 horas deben ser 07 y 5 minutos deben ser 05)
1. YYY-MM-DD HH:mm eg. 20120-01-02 07:05
[<< Day 2](../dia_02_tipos_de_datos.md) | [Day 4 >>](../dia_04_Condicionales/dia_04_Condicionales.md)

376
Spanish/dia_04_Condicionales/dia_04_Condicionales.md
Unescape View File

@ -0,0 +1,376 @@
<div align="center">
<h1> 30 Días de JavaScript: Condicionales</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Autor:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> Enero, 2020</small>
</sub>
</div>
[<< Día 3](../dia_03_Booleanos_Operadores_Date/dia_03_Boleanos_Operadores_Date.md) | [Día 5 >>](../dia_05_Arreglos/dia_05_arreglos.md)
![Thirty Days Of JavaScript](../images/banners/day_1_4.png)
- [📔 Día 4](#📔-día-4)
- [Condicionales](#condicionales)
- [If](#if)
- [If Else](#if-else)
- [If Else if Else](#if-else-if-else)
- [Switch](#switch)
- [Operadores Ternarios](#operadores-ternarios)
- [💻 Ejercicios](#💻-ejercicios)
- [Ejercicios: Nivel 1](#ejercicios-nivel-1)
- [Ejercicios: Nivel 2](#ejercicios-nivel-2)
- [Ejercicios: Nivel 3](#ejercicios-nivel-3)
# 📔 Día 4
## Condicionales
Las declaraciones condicionales se utilizan para tomar decisiones basadas en diferentes condiciones. De forma predeterminada, las declaraciones en el script de JavaScript se ejecutan secuencialmente de arriba a abajo. Si la lógica de procesamiento lo requiere, el flujo secuencial de ejecución se puede alterar de dos formas:
- Ejecución condicional: se ejecutará un bloque de una o más sentencias si cierta expresión es true
- Ejecución repetitiva: un bloque de una o más sentencias se ejecutará de forma repetitiva siempre que cierta expresión sea verdadera. En esta sección, cubriremos las declaraciones _if_, _else_ y _else if_. Los operadores lógicos y de comparación que aprendimos en las secciones anteriores serán útiles aquí.
Las condiciones se pueden implementar de las siguientes maneras:
- if
- if else
- if else if else
- switch
- operador ternario
### If
En JavaScript y otros lenguajes de programación, la palabra clave _if_ se usa para verificar si una condición es true y ejecutar el bloque de código. Para crear una condición if, necesitamos la palabra clave _if_, la condición va dentro de paréntesis y el bloque de código va dentro de llaves ({}).
```js
// sintaxis
if (condition) {
//esta parte del código se ejecuta cuando es true
}
```
**Example:**
```js
let num = 3;
if (num > 0) {
console.log(`${num} es un número positivo`);
}
// 3 es un número positivo
```
Como puede ver en el ejemplo de condición anterior, 3 es mayor que 0, por lo que es un número positivo. La condición era true y se ejecutó el bloque de código. Sin embargo, si la condición es falsa, no veremos ningún resultado.
```js
let isRaining = true;
if (isRaining) {
console.log("Recuerda llevar tu impermeable.");
}
```
Lo mismo ocurre con la segunda condición, si isRaining es false, el bloque if no se ejecutará y no veremos ninguna respuesta. Para ver el resultado de una condición false, debemos tener otro bloque, que será _else_.
### If Else
Si la condición es true, se ejecutará el primer bloque, si no, se ejecutará la condición else.
```js
// sintaxis
if (condition) {
// esta parte del código se ejecuta para la condición de verdad
} else {
// esta parte del código se ejecuta para una condición falsa
}
```
```js
let num = 3;
if (num > 0) {
console.log(`${num} es un número positivo`);
} else {
console.log(`${num} es un número negativo`);
}
// 3 es un número positivo
num = -3;
if (num > 0) {
console.log(`${num} es un número positivo`);
} else {
console.log(`${num} es un número negativo`);
}
// -3 es un número negativo
```
```js
let isRaining = true;
if (isRaining) {
console.log("Necesitas un impermeable.");
} else {
console.log("No hay necesidad de un impermeable.");
}
// Necesitas un impermeable.
isRaining = false;
if (isRaining) {
console.log("Necesitas un impermeable.");
} else {
console.log("No hay necesidad de un impermeable.");
}
// No hay necesidad de un impermeable.
```
La última condición es falsa, por lo que se ejecutó el bloque else. ¿Qué pasa si tenemos más de dos condiciones? En ese caso, usaremos las condiciones _else if_.
### If Else if Else
En nuestra vida, tomamos decisiones diariamente. Tomamos decisiones no comprobando una o dos condiciones, sino que tomamos decisiones basadas en múltiples condiciones. Al igual que nuestra vida diaria, la programación también está llena de condiciones. Usamos _else if_ cuando tenemos múltiples condiciones.
```js
// sintaxis
if (condition) {
// código
} else if (condition) {
// código
} else {
// código
}
```
**Ejemplo:**
```js
let a = 0;
if (a > 0) {
console.log(`${a} es un número positivo`);
} else if (a < 0) {
console.log(`${a} es un número negativo`);
} else if (a == 0) {
console.log(`${a} es cero`);
} else {
console.log(`${a} no es un número`);
}
```
```js
// if else if else
let weather = "sunny";
if (weather === "rainy") {
console.log("Necesitas un impermeable.");
} else if (weather === "cloudy") {
console.log("Puede que haga frío, necesitas una chaqueta.");
} else if (weather === "sunny") {
console.log("Sal tranquilo.");
} else {
console.log("No hay necesidad de un impermeable.");
}
```
### Switch
Switch es una alternativa para **if else if else else**.
La instrucción switch comienza con una palabra clave _switch_ seguida de un paréntesis y un bloque de código. Dentro del bloque de código tendremos diferentes casos. El bloque de casos se ejecuta si el valor en el paréntesis de la declaración de cambio coincide con el valor del caso. La declaración de break es para terminar la ejecución. Esto para que la ejecución del código se detenga después de que se cumpla la condición. El bloque default se ejecuta si todos los casos no cumplen la condición.
```js
switch (caseValue) {
case 1:
// código
break;
case 2:
// código
break;
case 3:
// código
break;
default:
// código
}
```
```js
let weather = "cloudy";
switch (weather) {
case "rainy":
console.log("Necesitas un impermeable.");
break;
case "cloudy":
console.log("Puede que haga frío, necesitas una chaqueta.");
break;
case "sunny":
console.log("Sal tranquilo.");
break;
default:
console.log("No hay necesidad de un impermeable.");
}
// Más Ejemplos switch
let dayUserInput = prompt("¿Qué día es hoy?");
let day = dayUserInput.toLowerCase();
switch (day) {
case "lunes":
console.log("Hoy es Lunes");
break;
case "martes":
console.log("Hoy es Martes");
break;
case "miércoles":
console.log("Hoy es Miércoles");
break;
case "jueves":
console.log("Hoy es Jueves");
break;
case "viernes":
console.log("Hoy es Viernes");
break;
case "sábado":
console.log("Hoy es Sábado");
break;
case "domingo":
console.log("Hoy es Domingo");
break;
default:
console.log("No es un día de semana.");
}
```
// Ejemplos de condiciones en los casos
```js
let num = prompt("Ingrese un número");
switch (true) {
case num > 0:
console.log("El número es positivo");
break;
case num == 0:
console.log("El número es cero");
break;
case num < 0:
console.log("El número es negativo");
break;
default:
console.log("El valor ingresado no era un número");
}
```
### Operadores Ternarios
Otra forma de escribir condicionales es usando operadores ternarios. Hemos cubierto esto en otras secciones, pero también deberíamos mencionarlo aquí.
```js
let isRaining = true;
isRaining
? console.log("Necesitas un impermeable.")
: console.log("No hay necesidad de un impermeable.");
```
🌕 Tienes una energía ilimitada. Acabas de completar los desafíos del día 4 y llevas cuatro pasos de tu camino hacia la grandeza. Ahora haz algunos ejercicios para tu cerebro y tus músculos.
## 💻 Ejercicios
### Ejercicios: Nivel 1
1. Obtenga la entrada del usuario usando el aviso ("Ingrese su edad:"). Si el usuario tiene 18 años o más, muestre el mensaje: 'Tiene la edad suficiente para conducir', pero si no tiene 18 años, brinde otro mensaje que indique que debe esperar la cantidad de años que necesita para cumplir 18.
```sh
Ingrese su edad: 30
Tiene la edad suficiente para conducir.
Ingrese su edad:15
Te faltan 3 años para conducir.
```
1. Compara los valores de myAge y yourAge usando if... else. Según la comparación, registre el resultado en la consola indicando quién es mayor (tú o yo). Utilice prompt(“Ingrese su edad:”) para obtener la edad como entrada.
```sh
Ingrese su edad: 30
Eres 5 años mayor que yo.
```
1. Si a es mayor que b, devuelve 'a es mayor que b'; de lo contrario, 'a es menor que b'. Trate de implementarlo de maneras diferentes
- Usando if else
- operador ternario.
```js
let a = 4;
let b = 3;
```
```sh
4 es mayor que 3
```
1. Los números pares son divisibles por 2 y el resto es cero. ¿Cómo verificar si un número es par o no usando JavaScript?
```sh
Ingrese un número: 2
2 es un número par
Ingrese un número: 9
9 es un número impar
```
### Ejercicios: Nivel 2
1. Escriba un código que pueda calificar a los estudiantes de acuerdo con sus puntajes:
- 80-100, A
- 70-89, B
- 60-69, C
- 50-59, D
- 0-49, F
1. Consulta si la temporada es Otoño, Invierno, Primavera o Verano.
Si la entrada del usuario es :
- Septiembre, Octubre o Noviembre, la temporada es Otoño.
- Diciembre, Enero o Febrero, la temporada es Invierno.
- Marzo, Abril o Mayo, la temporada es Primavera
- Junio, Julio o Agosto, la temporada es Verano
1. Compruebe si un día es un día de fin de semana o un día laborable. Su script tomará el día como entrada.
```sh
¿Qué día es hoy? Sábado
El sábado es fin de semana.
¿Qué día es hoy? sábAdo
El sábado es fin de semana.
¿Qué día es hoy? Viernes
El viernes es un día laborable.
¿Qué día es hoy? ViErNes
El viernes es un día laborable.
```
### Ejercicios: Nivel 3
1. Escribe un programa que diga el número de días en un mes.
```sh
Introduce un mes: Enero
Enero tiene 31 días.
Introduce un mes: ENERO
enero tiene 31 dias
Introduce un mes: Febrero
Febrero tiene 28 días.
Introduce un mes: FEbrero
Febrero tiene 28 días.
```
1. Escribe un programa que diga el número de días en un mes, ahora considera un año bisiesto.
🎉 FELICITACIONES ! 🎉
[<< Día 3](../dia_03_Booleanos_Operadores_Date/dia_03_Boleanos_Operadores_Date.md) | [Día 5 >>](../dia_05_Arreglos/dia_05_arreglos.md)

781
Spanish/dia_05_Arreglos/dia_05_arreglos.md
Unescape View File

@ -0,0 +1,781 @@
<div align="center">
<h1> 30 Días de JavaScript: Arrays</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Autor:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> January, 2020</small>
</sub>
</div>
[<< Día 4](../dia_04_Condicionales/dia_04_Condicionales.md) | [Día 6 >>](../dia_06_Bucles/dia_06_bucles.md)
![Day 5](../images/banners/day_1_5.png)
- [📔 Día 5](#📔-día-5)
- [Arrays](#arrays)
- [Como crear un array vacío](#como-crear-un-array-vacío)
- [Como crear un array con valores](#como-crear-un-array-con-valores)
- [Creando un array usando split](#creando-un-array-usando-split)
- [Acceder a los elementos de un array usando el index](#acceder-a-los-elementos-de-un-array-usando-el-index)
- [Modificar elementos de array](#modificar-elementos-de-array)
- [Métodos para manipular arrays](#métodos-para-manipular-arrays)
- [Constructor de arrays](#constructor-de-arrays)
- [Creando valores estáticos con fill](#creando-valores-estáticos-con-fill)
- [Concatenación de arrays usando concat](#concatenación-de-arrays-usando-concat)
- [Obtener la longitud de array](#obtener-la-longitud-de-array)
- [Obtener el index de un elemento en un array](#obtener-el-index-de-un-elemento-en-un-array)
- [Obtener el último index de un elemento en un array](#obtener-el-último-index-de-un-elemento-en-un-array)
- [Comprobar un array](#comprobar-un-array)
- [Convertir array a string](#convertir-array-a-string)
- [Unir elementos de un array](#unir-elementos-de-un-array)
- [Cortar elementos de un array](#cortar-elementos-de-un-array)
- [Método splice en un array](#método-splice-en-un-array)
- [Agregar elementos a un array usando push](#agregar-elementos-a-un-array-usando-push)
- [Eliminar el último elemento usando pop](#eliminar-el-último-elemento-usando-pop)
- [Eliminar elemento al principio](#eliminar-elemento-al-principio)
- [Añade un elemento al inicio](#añade-un-elemento-al-inicio)
- [Invertir orden de un array](#invertir-orden-de-un-array)
- [Ordenar elementos en un array](#ordenar-elementos-en-un-array)
- [Array de arrays](#array-de-arrays)
- [💻 Ejercicios](#💻-ejercicios)
- [Ejercicios: Nivel 1](#ejercicios-nivel-1)
- [Ejercicios: Nivel 2](#ejercicios-nivel-2)
- [Ejercicios: Nivel 3](#ejercicios-nivel-3)
# 📔 Día 5
## Arrays
A diferencia de las variables, un array (matriz ó arreglo) puede almacenar _múltiples valores_.Cada valor en un array tiene un _index_ y cada index (índice) tiene _una referencia en una dirección de memoria_. Se puede acceder a cada valor usando sus _index_. El index de un array comienza desde _cero_, y el index del último elemento es menor a uno desde la longitud del array.
Un array es una colección de diferentes tipos de datos que están ordenados y son cambiables (modificables). Un array permite almacenar elementos duplicados y diferentes tipos de datos. Un array puede estar vacío o puede tener diferentes valores de diferentes tipos de datos.
### Como crear un array vacío
En JavaScript, podemos crear una array de diferentes maneras. Veamos diferentes formas de crear un array.
Es muy común usar _const_ en lugar de _let_ para declarar una variable array. Si está utilizando const, significa que no volverás a utilizar ese nombre de variable.
- Usando el constructor de arrays
```js
// sintaxis
const arr = Array();
// or
// let arr = new Array()
console.log(arr); // []
```
- Usando corchetes([])
```js
// sintaxis
// Esto es lo más recomendable para crear una lista vacía
const arr = [];
console.log(arr);
```
### Como crear un array con valores
Array con valores iniciales. Usamos _length_ para encontrar la longitud del array.
```js
const numbers = [0, 3.14, 9.81, 37, 98.6, 100]; // array de números
const fruits = ["banana", "orange", "mango", "lemon"]; // array de strings, Fruits
const vegetables = ["Tomato", "Potato", "Cabbage", "Onion", "Carrot"]; // array de strings, vegetables
const animalProducts = ["milk", "meat", "butter", "yoghurt"]; // array de strings, products
const webTechs = ["HTML", "CSS", "JS", "React", "Redux", "Node", "MongDB"]; // array web, technology
const countries = ["Finland", "Denmark", "Sweden", "Norway", "Iceland"]; // array de strings, country
// Imprimimos el array y su longitud
console.log("Numbers:", numbers);
console.log("Number of numbers:", numbers.length);
console.log("Fruits:", fruits);
console.log("Number of fruits:", fruits.length);
console.log("Vegetables:", vegetables);
console.log("Number of vegetables:", vegetables.length);
console.log("Animal products:", animalProducts);
console.log("Number of animal products:", animalProducts.length);
console.log("Web technologies:", webTechs);
console.log("Number of web technologies:", webTechs.length);
console.log("Countries:", countries);
console.log("Number of countries:", countries.length);
```
```sh
Numbers: [0, 3.14, 9.81, 37, 98.6, 100]
Number of numbers: 6
Fruits: ['banana', 'orange', 'mango', 'lemon']
Number of fruits: 4
Vegetables: ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot']
Number of vegetables: 5
Animal products: ['milk', 'meat', 'butter', 'yoghurt']
Number of animal products: 4
Web technologies: ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongDB']
Number of web technologies: 7
Countries: ['Finland', 'Estonia', 'Denmark', 'Sweden', 'Norway']
Number of countries: 5
```
- Array puede tener elementos de diferentes tipos de datos
```js
const arr = [
"Asabeneh",
250,
true,
{ country: "Finland", city: "Helsinki" },
{ skills: ["HTML", "CSS", "JS", "React", "Python"] },
]; // arr contiene diferentes tipos de datos
console.log(arr);
```
### Creando un array usando split
Como hemos visto en la sección anterior, podemos dividir un string en diferentes posiciones y podemos cambiar a un array. Veamos los ejemplos a continuación
```js
let js = "JavaScript";
const charsInJavaScript = js.split("");
console.log(charsInJavaScript); // ["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"]
let companiesString = "Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon";
const companies = companiesString.split(",");
console.log(companies); // ["Facebook", " Google", " Microsoft", " Apple", " IBM", " Oracle", " Amazon"]
let txt =
"I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.";
const words = txt.split(" ");
console.log(words);
// el texto tiene caracteres especiales piensa cómo puedes obtener solo las palabras
// ["I", "love", "teaching", "and", "empowering", "people.", "I", "teach", "HTML,", "CSS,", "JS,", "React,", "Python"]
```
### Acceder a los elementos de un array usando el index
Accedemos a cada elemento en un array usando su index. El index de un array comienza desde 0. La siguiente imagen muestra claramente el index de cada elemento en un array
![arr index](../images/array_index.png)
```js
const fruits = ["banana", "orange", "mango", "lemon"];
let firstFruit = fruits[0]; // estamos accediendo al primer elemento usando su index
console.log(firstFruit); // banana
secondFruit = fruits[1];
console.log(secondFruit); // orange
let lastFruit = fruits[3];
console.log(lastFruit); // lemon
// El último index se puede calcular de la siguiente manera
let lastIndex = fruits.length - 1;
lastFruit = fruits[lastIndex];
console.log(lastFruit); // lemon
```
```js
const numbers = [0, 3.14, 9.81, 37, 98.6, 100]; // set of numbers
console.log(numbers.length); // => para saber el tamaño de la array, que es 6
console.log(numbers); // -> [0, 3.14, 9.81, 37, 98.6, 100]
console.log(numbers[0]); // -> 0
console.log(numbers[5]); // -> 100
let lastIndex = numbers.length - 1;
console.log(numbers[lastIndex]); // -> 100
```
```js
const webTechs = [
"HTML",
"CSS",
"JavaScript",
"React",
"Redux",
"Node",
"MongoDB",
]; // Lista de tecnologías web
console.log(webTechs); // Todos los elementos del array
console.log(webTechs.length); // => para saber el tamaño de la array, que es 7
console.log(webTechs[0]); // -> HTML
console.log(webTechs[6]); // -> MongoDB
let lastIndex = webTechs.length - 1;
console.log(webTechs[lastIndex]); // -> MongoDB
```
```js
const countries = [
"Albania",
"Bolivia",
"Canada",
"Denmark",
"Ethiopia",
"Finland",
"Germany",
"Hungary",
"Ireland",
"Japan",
"Kenya",
]; // Lista de países
console.log(countries); // -> Todas los países del array
console.log(countries[0]); // -> Albania
console.log(countries[10]); // -> Kenya
let lastIndex = countries.length - 1;
console.log(countries[lastIndex]); // -> Kenya
```
```js
const shoppingCart = [
"Milk",
"Mango",
"Tomato",
"Potato",
"Avocado",
"Meat",
"Eggs",
"Sugar",
]; // Lista de productos alimenticios
console.log(shoppingCart); // -> todo el carrito de compras en array
console.log(shoppingCart[0]); // -> Milk
console.log(shoppingCart[7]); // -> Sugar
let lastIndex = shoppingCart.length - 1;
console.log(shoppingCart[lastIndex]); // -> Sugar
```
### Modificar elementos de array
Un array es mutable (modificable). Una vez que un array es creado, podemos modificar el contenido de los elementos del array.
```js
const numbers = [1, 2, 3, 4, 5];
numbers[0] = 10; // cambiando 1 en el índice 0 a 10
numbers[1] = 20; // cambiando 2 en el índice 1 a 20
console.log(numbers); // [10, 20, 3, 4, 5]
const countries = [
"Albania",
"Bolivia",
"Canada",
"Denmark",
"Ethiopia",
"Finland",
"Germany",
"Hungary",
"Ireland",
"Japan",
"Kenya",
];
countries[0] = "Afghanistan"; // Sustitución de Albania por Afganistán
let lastIndex = countries.length - 1;
countries[lastIndex] = "Korea"; // Sustitución de Kenia por Corea
console.log(countries);
```
```sh
["Afghanistan", "Bolivia", "Canada", "Denmark", "Ethiopia", "Finland", "Germany", "Hungary", "Ireland", "Japan", "Korea"]
```
### Métodos para manipular arrays
Existen diferentes métodos para manipular un array. Estos son algunos de los métodos disponibles para manejar arrays:_Array, length, concat, indexOf, slice, splice, join, toString, includes, lastIndexOf, isArray, fill, push, pop, shift, unshift_
#### Constructor de arrays
Array:Para crear un array.
```js
const arr = Array(); // crea un array vacío
console.log(arr);
const eightEmptyValues = Array(8); // crea ocho valores vacíos
console.log(eightEmptyValues); // [empty x 8]
```
#### Creando valores estáticos con fill
fill: Rellena todos los elementos del array con un valor estático.
```js
const arr = Array(); // crea un array vacío
console.log(arr);
const eightXvalues = Array(8).fill("X"); // crea ocho valores de elementos llenos de 'X'
console.log(eightXvalues); // ['X', 'X','X','X','X','X','X','X']
const eight0values = Array(8).fill(0); // crea ocho valores de elementos llenos de '0'
console.log(eight0values); // [0, 0, 0, 0, 0, 0, 0, 0]
const four4values = Array(4).fill(4); // crea 4 valores de elementos llenos de '4'
console.log(four4values); // [4, 4, 4, 4]
```
#### Concatenación de arrays usando concat
concat:Para concatenar dos arrays.
```js
const firstList = [1, 2, 3];
const secondList = [4, 5, 6];
const thirdList = firstList.concat(secondList);
console.log(thirdList); // [1, 2, 3, 4, 5, 6]
```
```js
const fruits = ["banana", "orange", "mango", "lemon"]; // array de fruits
const vegetables = ["Tomato", "Potato", "Cabbage", "Onion", "Carrot"]; // array de vegetables
const fruitsAndVegetables = fruits.concat(vegetables); // concatena los dos arrays
console.log(fruitsAndVegetables);
```
```sh
["banana", "orange", "mango", "lemon", "Tomato", "Potato", "Cabbage", "Onion", "Carrot"]
```
#### Obtener la longitud de array
Length:Para saber el tamaño del array
```js
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // -> 5 es el tamaño del array
```
#### Obtener el index de un elemento en un array
indexOf:Para verificar si un elemento existe en un array. Si existe, devuelve el index, de lo contrario devuelve -1.
```js
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.indexOf(5)); // -> 4
console.log(numbers.indexOf(0)); // -> -1
console.log(numbers.indexOf(1)); // -> 0
console.log(numbers.indexOf(6)); // -> -1
```
Comprobar si un elemento existe en un array.
- Comprobar elementos en una lista
```js
// vamos a comprobar si existe banana en el array
const fruits = ["banana", "orange", "mango", "lemon"];
let index = fruits.indexOf("banana"); // 0
if (index === -1) {
console.log("Esta fruta no existe en el array.");
} else {
console.log("Esta fruta existe en el array.");
}
// Esta fruta existe en el array.
// we can use also ternary here
index === -1
? console.log("Esta fruta no existe en el array.")
: console.log("Esta fruta existe en el array.");
// let us check if an avocado exist in the array
let indexOfAvocado = fruits.indexOf("avocado"); // -1, if the element not found index is -1
if (indexOfAvocado === -1) {
console.log("Esta fruta no existe en el array.");
} else {
console.log("Esta fruta existe en el array.");
}
// Esta fruta no existe en el array.
```
#### Obtener el último index de un elemento en un array
lastIndexOf: Da la posición del último elemento en el array. Si existe, devuelve el index, de lo contrario, devuelve -1.
```js
const numbers = [1, 2, 3, 4, 5, 3, 1, 2];
console.log(numbers.lastIndexOf(2)); // 7
console.log(numbers.lastIndexOf(0)); // -1
console.log(numbers.lastIndexOf(1)); // 6
console.log(numbers.lastIndexOf(4)); // 3
console.log(numbers.lastIndexOf(6)); // -1
```
includes:Para verificar si un elemento existe en un array. Si existe, devuelve true, de lo contrario devuelve false.
```js
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(5)); // true
console.log(numbers.includes(0)); // false
console.log(numbers.includes(1)); // true
console.log(numbers.includes(6)); // false
const webTechs = [
"HTML",
"CSS",
"JavaScript",
"React",
"Redux",
"Node",
"MongoDB",
]; // Lista de tecnologías web
console.log(webTechs.includes("Node")); // true
console.log(webTechs.includes("C")); // false
```
#### Comprobar un array
Array.isArray:Para verificar si el tipo de dato en un array
```js
const numbers = [1, 2, 3, 4, 5];
console.log(Array.isArray(numbers)); // true
const number = 100;
console.log(Array.isArray(number)); // false
```
#### Convertir array a string
toString:Convierte un array a string
```js
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.toString()); // 1,2,3,4,5
const names = ["Asabeneh", "Mathias", "Elias", "Brook"];
console.log(names.toString()); // Asabeneh,Mathias,Elias,Brook
```
#### Unir elementos de un array
join: Se usa para unir los elementos del array, el argumento que pasamos en el método join se unirá en array y regresará como una cadena. De forma predeterminada, se une con una coma, pero podemos pasar diferentes parámetros de string que se pueden unir entre los elementos.
```js
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.join()); // 1,2,3,4,5
const names = ["Asabeneh", "Mathias", "Elias", "Brook"];
console.log(names.join()); // Asabeneh,Mathias,Elias,Brook
console.log(names.join("")); //AsabenehMathiasEliasBrook
console.log(names.join(" ")); //Asabeneh Mathias Elias Brook
console.log(names.join(", ")); //Asabeneh, Mathias, Elias, Brook
console.log(names.join(" # ")); //Asabeneh # Mathias # Elias # Brook
const webTechs = [
"HTML",
"CSS",
"JavaScript",
"React",
"Redux",
"Node",
"MongoDB",
]; // Lista de tecnologías web
console.log(webTechs.join()); // "HTML,CSS,JavaScript,React,Redux,Node,MongoDB"
console.log(webTechs.join(" # ")); // "HTML # CSS # JavaScript # React # Redux # Node # MongoDB"
```
#### Cortar elementos de un array
Slice: Para cortar varios elementos en el rango. Toma dos parámetros: posición inicial y final. Puede no incluir la posición final
```js
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.slice()); // -> copia todos los elementos
console.log(numbers.slice(0)); // -> copia todos los elementos
console.log(numbers.slice(0, numbers.length)); // copia todos los elementos
console.log(numbers.slice(1, 4)); // -> [2,3,4] // no incluye la posición final
```
#### Método splice en un array
Splice: Toma tres parámetros: posición inicial, número de elementos a eliminar y cantidad de elementos que se agregarán.
```js
const numbers = [1, 2, 3, 4, 5];
numbers.splice();
console.log(numbers); // -> elimina todos los elementos
```
```js
const numbers = [1, 2, 3, 4, 5];
numbers.splice(0, 1);
console.log(numbers); // elimina el primer elemento
```
```js
const numbers = [1, 2, 3, 4, 5, 6];
numbers.splice(3, 3, 7, 8, 9);
console.log(numbers.splice(3, 3, 7, 8, 9)); // -> [1, 2, 3, 7, 8, 9] //elimina tres elementos y reemplaza tres elementos
```
#### Agregar elementos a un array usando push
Push: agrega elementos al final. Para agregar un elemento al final de un array existente, usamos el método push.
```js
// syntax
const arr = ["item1", "item2", "item3"];
arr.push("new item");
console.log(arr);
// ['item1', 'item2','item3','new item']
```
```js
const numbers = [1, 2, 3, 4, 5];
numbers.push(6);
console.log(numbers); // -> [1,2,3,4,5,6]
numbers.pop(); // -> eliminar un elemento del final
console.log(numbers); // -> [1,2,3,4,5]
```
```js
let fruits = ["banana", "orange", "mango", "lemon"];
fruits.push("apple");
console.log(fruits); // ['banana', 'orange', 'mango', 'lemon', 'apple']
fruits.push("lime");
console.log(fruits); // ['banana', 'orange', 'mango', 'lemon', 'apple', 'lime']
```
#### Eliminar el último elemento usando pop
pop: Elimina el elemento final.
```js
const numbers = [1, 2, 3, 4, 5];
numbers.pop(); // -> eliminar un elemento del final
console.log(numbers); // -> [1,2,3,4]
```
#### Eliminar elemento al principio
shift: Eliminación de un elemento de un array al comienzo de un array.
```js
const numbers = [1, 2, 3, 4, 5];
numbers.shift(); // -> elimina un elemento del principio
console.log(numbers); // -> [2,3,4,5]
```
#### Añade un elemento al inicio
unshift: Agrega un elemento al inicio del array
```js
const numbers = [1, 2, 3, 4, 5];
numbers.unshift(0); // -> Añadir un elemento al inicio
console.log(numbers); // -> [0,1,2,3,4,5]
```
#### Invertir orden de un array
reverse: invertir el orden de un array.
```js
const numbers = [1, 2, 3, 4, 5];
numbers.reverse(); // -> reverse array order
console.log(numbers); // [5, 4, 3, 2, 1]
numbers.reverse();
console.log(numbers); // [1, 2, 3, 4, 5]
```
#### Ordenar elementos en un array
sort: Ordena los elementos de un array en orden ascendente. Sort toma una función call back, Veremos cómo usamos sort con una función call back en las próximas secciones.
```js
const webTechs = [
"HTML",
"CSS",
"JavaScript",
"React",
"Redux",
"Node",
"MongoDB",
];
webTechs.sort();
console.log(webTechs); // ["CSS", "HTML", "JavaScript", "MongoDB", "Node", "React", "Redux"]
webTechs.reverse(); // after sorting we can reverse it
console.log(webTechs); // ["Redux", "React", "Node", "MongoDB", "JavaScript", "HTML", "CSS"]
```
### Array de arrays
Un array puede almacenar diferentes tipos de datos, incluido un array en sí mismo. Vamos a crear un array de arrays
```js
const firstNums = [1, 2, 3];
const secondNums = [1, 4, 9];
const arrayOfArray = [
[1, 2, 3],
[1, 2, 3],
];
console.log(arrayOfArray[0]); // [1, 2, 3]
const frontEnd = ["HTML", "CSS", "JS", "React", "Redux"];
const backEnd = ["Node", "Express", "MongoDB"];
const fullStack = [frontEnd, backEnd];
console.log(fullStack); // [["HTML", "CSS", "JS", "React", "Redux"], ["Node", "Express", "MongoDB"]]
console.log(fullStack.length); // 2
console.log(fullStack[0]); // ["HTML", "CSS", "JS", "React", "Redux"]
console.log(fullStack[1]); // ["Node", "Express", "MongoDB"]
```
🌕 Tienes una energía ilimitada. Acabas de completar los desafíos del día 5 y llevas cinco pasos de tu camino hacia la grandeza. Ahora haz algunos ejercicios para tu cerebro y tus músculos.
## 💻 Ejercicios
### Ejercicios: Nivel 1
```js
const countries = [
"Albania",
"Bolivia",
"Canada",
"Denmark",
"Ethiopia",
"Finland",
"Germany",
"Hungary",
"Ireland",
"Japan",
"Kenya",
];
const webTechs = [
"HTML",
"CSS",
"JavaScript",
"React",
"Redux",
"Node",
"MongoDB",
];
```
1. Declara un array _vacío_.
2. Declara un array com mas de 5 elementos.
3. Encuentra la longitud de tu array.
4. Obtenga el primer elemento, el elemento del medio y el último elemento de un array.
5. Declara un array llamado _mixedDataTypes_, coloque diferentes tipos de datos en el array y encuentre la longitud del array. El tamaño del array debe ser mayor que 5.
6. Declare un variable array de nombre _itCompanies_ y asignarles valores iniciales Facebook, Google, Microsoft, Apple, IBM, Oracle y Amazon.
7. Imprima el array usando _console.log()_.
8. Imprima el número de empresas en el array.
9. Imprime la primer empresa , la intermedia y la última empresa
10. Imprime cada empresa.
11. Cambie el nombre de cada empresa a mayúsculas uno por uno e imprímalos.
12. Imprime el array como una oración: Facebook, Google, Microsoft, Apple, IBM, Oracle y Amazon son grandes empresas de TI.
13. Compruebe si existe una determinada empresa en el array itCompanies. Si existe, retorna la empresa; de lo contrario, retorna la empresa _no existe_
14. Filtre las empresas que tienen más de una 'o' sin el método _filter()_
15. Ordene el array usando el método _sort()_
16. Invierte la array usando el método _reverse()_
17. Cortar las primeras 3 empresas del array
18. Cortar las últimas 3 empresas del array
19. Cortar la empresa o empresas intermedias de TI del array
20. Eliminar la primera empresa de TI del array
21. Eliminar la empresa o empresas intermedias de TI del array
22. Elimine la última empresa de TI del array
23. Eliminar todas las empresas de TI
### Ejercicios: Nivel 2
1. Cree un archivo de countries.js separado y almacene el array de países en este archivo, cree un archivo separado web_techs.js y almacene el array de webTechs en este archivo. Acceda a ambos archivos en el archivo main.js
1. Primero elimine todos los signos de puntuación y cambie de string a array y cuente el número de palabras en el array
```js
let text =
"I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.";
console.log(words);
console.log(words.length);
```
```sh
["I", "love", "teaching", "and", "empowering", "people", "I", "teach", "HTML", "CSS", "JS", "React", "Python"]
13
```
1. En el siguiente carrito de compras agregue, elimine, edite artículos
```js
const shoppingCart = ["Milk", "Coffee", "Tea", "Honey"];
```
- Agregue 'Meat' al comienzo de su carrito de compras si aún no se ha agregado
- Agregue 'Sugar' al final de su carrito de compras si aún no se ha agregado
- Elimine 'Honey' si es alérgico a la miel (honey)
- Modificar Tea a 'Green Tea'
1. En el array de países, verifique si 'Ethiopia' existe en el array si existe, imprima 'ETHIOPIA'. Si no existe agregar a la lista de países.
1. En el array webTechs, verifique si Sass existe en el array y si existe, imprima 'Sass es un preproceso de CSS'. Si no existe, agregue Sass al array e imprima el array.
1. Concatene las siguientes dos variables y guardelas en una variable fullStack.
```js
const frontEnd = ["HTML", "CSS", "JS", "React", "Redux"];
const backEnd = ["Node", "Express", "MongoDB"];
console.log(fullStack);
```
```sh
["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"]
```
### Ejercicios: Nivel 3
1. El siguiente es un array de 10 edades de estudiantes:
```js
const ages = [19, 22, 19, 24, 20, 25, 26, 24, 25, 24]
```
- Ordene el array y encuentre la edad mínima y máxima
- Encuentre la edad media (un elemento intermedio o dos elementos intermedios divididos por dos)
- Encuentre la edad promedio (todos los elementos divididos por el número de elementos)
- Encuentre el rango de las edades (max menos min)
- Compare el valor de (mín - promedio) y (máx - promedio), use el método _abs()_
1.Cortar los diez primeros países de la [array de países](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)
1. Encuentre el país o países de en medio en el [array de países](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)
1. Divide el array de países en dos arrays iguales si es par. Si el array de países no es par, agregue un país más para la primera mitad.
🎉 ¡Felicitaciones! 🎉
[<< Day 4](../dia_04_Condicionales/dia_04_Condicionales.md) | [Day 6 >>](../dia_06_Bucles/dia_06_bucles.md)

481
Spanish/dia_06_Bucles/dia_06_bucles.md
Unescape View File

@ -0,0 +1,481 @@
<div align="center">
<h1> 30 Días de JavaScript: Bucles</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Autor:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> Enero, 2020</small>
</sub>
</div>
[<< Día 5](../dia_05_Arreglos/dia_05_arreglos.md) | [ Día 7 >>](../dia_07_Funciones/dia_07_funciones.md)
![Day 6](../images/banners/day_1_6.png)
- [📔 Día 6](#📔-día-6)
- [Bucles](#bucles)
- [Bucle for](#bucle-for)
- [Bucle while](#bucle-while)
- [Bucle do while](#bucle-do-while)
- [Bucle for of](#bucle-for-of)
- [break](#break)
- [continue](#continue)
- [💻 Ejercicios: Día 6](#💻-ejerciciosdía-6)
- [Ejercicios: Nivel 1](#ejercicios-nivel-1)
- [Ejercicios: Nivel 2](#ejercicios-nivel-2)
- [Ejercicios: Nivel 3](#ejercicios-nivel-3)
# 📔 Día 6
## Bucles
La mayoría de las actividades que hacemos en la vida están llenas de repeticiones. Imagina que tienes que imprimir de 0 a 100 usando console.log(). Para implementar esta simple tarea, puede tomar de 2 a 5 minutos, este tipo de tarea tediosa y repetitiva se puede llevar a cabo usando un bucle. Si prefieres ver los videos, puedes revisar el [video tutorials](https://www.youtube.com/channel/UCM4xOopkYiPwJqyKsSqL9mw)
En los lenguajes de programación para realizar tareas repetitivas utilizamos diferentes tipos de bucles. Los siguientes ejemplos son los bucles de uso común en JavaScript y otros lenguajes de programación.
### Bucle for
```js
// Estructura del bucle for
for(inicialización, condición, incremento/decremento){
// el código va aquí
}
```
```js
for (let i = 0; i <= 5; i++) {
console.log(i);
}
// 0 1 2 3 4 5
```
```js
for (let i = 5; i >= 0; i--) {
console.log(i);
}
// 5 4 3 2 1 0
```
```js
for (let i = 0; i <= 5; i++) {
console.log(`${i} * ${i} = ${i * i}`);
}
```
```sh
0 * 0 = 0
1 * 1 = 1
2 * 2 = 4
3 * 3 = 9
4 * 4 = 16
5 * 5 = 25
```
```js
const countries = ["Finland", "Sweden", "Denmark", "Norway", "Iceland"];
const newArr = [];
for (let i = 0; i < countries.length; i++) {
newArr.push(countries[i].toUpperCase());
}
// ["FINLAND", "SWEDEN", "DENMARK", "NORWAY", "ICELAND"]
```
Agregar todos los elementos en un array
```js
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum = sum + numbers[i]; // can be shorten, sum += numbers[i]
}
console.log(sum); // 15
```
Crea un nuevo array basado en el array existente
```js
const numbers = [1, 2, 3, 4, 5];
const newArr = [];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
newArr.push(numbers[i] ** 2);
}
console.log(newArr); // [1, 4, 9, 16, 25]
```
```js
const countries = ["Finland", "Sweden", "Norway", "Denmark", "Iceland"];
const newArr = [];
for (let i = 0; i < countries.length; i++) {
newArr.push(countries[i].toUpperCase());
}
console.log(newArr); // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]
```
### Bucle while
```js
let i = 0;
while (i <= 5) {
console.log(i);
i++;
}
// 0 1 2 3 4 5
```
### Bucle do while
```js
let i = 0;
do {
console.log(i);
i++;
} while (i <= 5);
// 0 1 2 3 4 5
```
### Bucle for of
Usamos el bucle for of para arrays. Es una forma muy práctica de iterar a través de un array, si no estamos interesados en el index de cada elemento del array.
```js
for (const element of arr) {
// el código va aquí
}
```
```js
const numbers = [1, 2, 3, 4, 5];
for (const num of numbers) {
console.log(num);
}
// 1 2 3 4 5
for (const num of numbers) {
console.log(num * num);
}
// 1 4 9 16 25
// sumando todos los números del array
let sum = 0;
for (const num of numbers) {
sum = sum + num;
// también se puede acortar así, sum += num
// después de esto usaremos la sintaxis más corta (+=, -=, *=, /= etc)
}
console.log(sum); // 15
const webTechs = [
"HTML",
"CSS",
"JavaScript",
"React",
"Redux",
"Node",
"MongoDB",
];
for (const tech of webTechs) {
console.log(tech.toUpperCase());
}
// HTML CSS JAVASCRIPT REACT NODE MONGODB
for (const tech of webTechs) {
console.log(tech[0]); // obtiene solo la primera letra de cada elemento, H C J R N M
}
```
```js
const countries = ["Finland", "Sweden", "Norway", "Denmark", "Iceland"];
const newArr = [];
for (const country of countries) {
newArr.push(country.toUpperCase());
}
console.log(newArr); // ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]
```
### break
Break se utiliza para interrumpir un bucle.
```js
for (let i = 0; i <= 5; i++) {
if (i == 3) {
break;
}
console.log(i);
}
// 0 1 2
```
El código anterior se detiene si se encuentran 3 en el proceso de iteración.
### continue
Usamos la palabra clave _continue_ para omitir ciertas iteraciones.
```js
for (let i = 0; i <= 5; i++) {
if (i == 3) {
continue;
}
console.log(i);
}
// 0 1 2 4 5
```
🌕 Tienes una energía ilimitada. Acabas de completar los desafíos del día 6 y llevas seis pasos de tu camino hacia la grandeza. Ahora haz algunos ejercicios para tu cerebro y tus músculos.
## 💻 Ejercicios:Día 6
### Ejercicios: Nivel 1
```js
const countries = [
"Albania",
"Bolivia",
"Canada",
"Denmark",
"Ethiopia",
"Finland",
"Germany",
"Hungary",
"Ireland",
"Japan",
"Kenya",
];
const webTechs = [
"HTML",
"CSS",
"JavaScript",
"React",
"Redux",
"Node",
"MongoDB",
];
const mernStack = ["MongoDB", "Express", "React", "Node"];
```
1. Itera de 0 a 10 usando el bucle for, haga lo mismo usando los bucles while y do while
2. Itera 10 to 0 usando el bucle for, haga lo mismo usando los bucles while y do while
3. Itera de 0 a n usando el bucle for
4. Escribe un bucle que haga el siguiente patrón usando console.log():
```js
#
##
###
####
#####
######
#######
```
5. Usa un bucle para imprimir el siguiente patrón:
```sh
0 x 0 = 0
1 x 1 = 1
2 x 2 = 4
3 x 3 = 9
4 x 4 = 16
5 x 5 = 25
6 x 6 = 36
7 x 7 = 49
8 x 8 = 64
9 x 9 = 81
10 x 10 = 100
```
6. Usando un bucle imprime el siguiente patrón:
```sh
i i^2 i^3
0 0 0
1 1 1
2 4 8
3 9 27
4 16 64
5 25 125
6 36 216
7 49 343
8 64 512
9 81 729
10 100 1000
```
7. Usa el bucle for para iterar de 0 a 100 e imprima solo números pares
8. Usa el bucle for para iterar de 0 a 100 e imprima solo números impares
9. Usa el bucle for para iterar de 0 a 100 e imprima los solo números primos
10. Usa el bucle for para iterar de 0 a 100 e imprima la suma de todos los números.
```sh
La suma de todos los números de 0 a 100 es 5050.
```
11. Usa el bucle para iterar de 0 a 100 e imprimir la suma de todos los pares y la suma de todos los impares.
```sh
La suma de todos los pares de 0 a 100 es 2550. Y la suma de todos los impares de 0 a 100 es 2500.
```
12. Usa el bucle para iterar de 0 a 100 e imprimir la suma de todos los pares y la suma de todos los impares. Imprimir suma de pares y suma de impares como un array
```sh
[2550, 2500]
```
13. Desarrolla un pequeño script que genera una matriz de 5 números aleatorios
14. Desarrolla un pequeño script que genera una matriz de 5 números aleatorios. Los números debe ser únicos
15. Desarrolla un pequeño script que genera un id aleatorio de seis caracteres:
```sh
5j2khz
```
### Ejercicios: Nivel 2
1. Desarrolla un pequeño script que genera un id con cualquier número de caracteres aleatorios:
```sh
fe3jo1gl124g
```
```sh
xkqci4utda1lmbelpkm03rba
```
1. Escribe un script que genere un número hexadecimal aleatorio.
```sh
'#ee33df'
```
1. Escribe un script que genere un número de color rgb aleatorio.
```sh
rgb(240,180,80)
```
1. Usando el array countries anterior, crea un array como el siguiente.
```sh
["ALBANIA", "BOLIVIA", "CANADA", "DENMARK", "ETHIOPIA", "FINLAND", "GERMANY", "HUNGARY", "IRELAND", "JAPAN", "KENYA"]
```
1. Usando el array countries anterior, crea un array para saber la longitud de cada país.
```sh
[7, 7, 6, 7, 8, 7, 7, 7, 7, 5, 5]
```
1. Utiliza el array countries para crear la siguiente array de arrays
```sh
[
['Albania', 'ALB', 7],
['Bolivia', 'BOL', 7],
['Canada', 'CAN', 6],
['Denmark', 'DEN', 7],
['Ethiopia', 'ETH', 8],
['Finland', 'FIN', 7],
['Germany', 'GER', 7],
['Hungary', 'HUN', 7],
['Ireland', 'IRE', 7],
['Iceland', 'ICE', 7],
['Japan', 'JAP', 5],
['Kenya', 'KEN', 5]
]
```
1. En el array countries anterior, verifica si hay un país que contenga la palabra 'land'. Si hay países que contienen 'land', imprimelo cono array. Si no hay ningún país que contenga la palabra'land', imprima 'Todos estos países no tienen la palabra land'.
```sh
['Finland','Ireland', 'Iceland']
```
1. En el array countries anterior, verifica si hay un país que termina con una subcadena (substring) 'ia'. Si hay países que terminan con 'ia', imprimelo como un array. Si no hay ningún país que contenga la palabra 'ia', imprime 'Estos países no terminan con ia'.
```sh
['Albania', 'Bolivia','Ethiopia']
```
1. Usando el array countries anterior, encuentre el país que contiene la mayor cantidad de caracteres.
```sh
Ethiopia
```
1. Usando el array countries anterior, encuentre el país que contiene sólo 5 caracteres.
```sh
['Japan', 'Kenya']
```
1. Encuentra la palabra más larga en el array webTechs
1. Utiliza el array de webTechs para crear la el siguiente array de arrays:
```sh
[["HTML", 4], ["CSS", 3],["JavaScript", 10],["React", 5],["Redux", 5],["Node", 4],["MongoDB", 7]]
```
1. Una aplicación creada con MongoDB, Express, React y Node se denomina MERN stack app. Crea el acrónimo MERN usando el array mernStack
1. Iterar a través del array, ["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"] usando el bucle for o el bucle for of e imprime los elementos.
1. Este es un array de frutas, ['banana', 'orange', 'mango', 'lemon'] invierte el orden usando un bucle sin usar el método reverse().
1. Imprime todos los elementos del array como se muestra a continuación:
```js
const fullStack = [
["HTML", "CSS", "JS", "React"],
["Node", "Express", "MongoDB"],
];
```
```sh
HTML
CSS
JS
REACT
NODE
EXPRESS
MONGODB
```
### Ejercicios: Nivel 3
1. Copia el array countries (Evita mutaciones)
1. Los arrays son mutables. Crea una copia del array que no modifique el original. Ordena la copia del array y guárdala en una variable sortedCountries
1. Ordena el array webTechs y el array mernStack
1. Extrae todos los países que contengan la palabra 'land' del [array countries](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) e imprimela como un array
1. Encuentra el país que contiene la mayor cantidad de caracteres en el [array countries](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)
1. Extrae todos los países que contienen la palabra 'land' del [array countries](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) e imprimela como un array
1. Extrae todos los países que contengan solo cuatro caracters del [array countries](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) e impremela como un array
1. Extrae todos los paíse que contengan dos o más palabras del [array countries](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) e imprimela como un array
1. Invertir el [array countries](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) y poner en mayúscula cada país y almacenalo en un array
🎉 ¡FELICITACIONES! 🎉
[<< Día 5](../dia_05_Arreglos/dia_05_arreglos.md) | [Día 7 >>](../dia_07_Funciones/dia_07_funciones.md)

702
Spanish/dia_07_Funciones/dia_07_funciones.md
Unescape View File

@ -0,0 +1,702 @@
<div align="center">
<h1> 30 Días de JavaScript: Funciones</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Autor:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> Enero, 2020</small>
</sub>
</div>
[<< Day 6](../dia_06_Bucles/dia_06_bucles.md) | [Día 8 >>](../dia_08_Objetos/dia_08_objetos.md)
![Thirty Days Of JavaScript](../images/banners/day_1_7.png)
- [📔 Día 7](#📔-día-7)
- [Funciones](#funciones)
- [Función declarativa](#función-declarativa)
- [Función sin parámetros y return](#función-sin-parámetros-y-return)
- [Función que retorna un valor](#función-que-retorna-un-valor)
- [Función con un parámetro](#función-con-un-parámetro)
- [Función con dos parámetros](#función-con-dos-parámetros)
- [Función con muchos parámetros](#función-con-muchos-parámetros)
- [Función con número ilimitado de parámetros](#función-con-número-ilimitado-de-parámetros)
- [Número ilimitado de parámetros en una función regular](#número-ilimitado-de-parámetros-en-una-función-regular)
- [Número ilimitado de parámetros en una función flecha](#número-ilimitado-de-parámetros-en-una-función-flecha)
- [Función anónima](#función-anónima)
- [Función de expresión](#función-de-expresión)
- [Funciones de autoinvocación](#función-de-autoinvocación)
- [Función flecha](#función-flecha)
- [Función con parámetros por defecto](#función-con-parámetros-por-defecto)
- [Función declarativa versus función flecha](#función-declarativa-versus-función-flecha)
- [💻 Ejercicios](#💻-ejercicios)
- [Ejercicios: Nivel 1](#ejercicios-nivel-1)
- [Ejercicios: Nivel 2](#ejercicios-nivel-2)
- [Ejercicios: Nivel 3](#ejercicios-nivel-3)
# 📔 Día 7
## Funciones
Hasta ahora hemos visto muchas funciones JavaScript integradas. En esta sección, nos centraremos en las funciones personalizadas. ¿Qué es una función? Antes de comenzar a hacer funciones, comprendamos ¿Qué es una función? y ¿Por qué necesitamos una función?
Una función es un bloque reutilizable de código o declaraciones de programación diseñadas para realizar una determinada tarea.
Una función se declara mediante la palabra clave function seguida de un nombre, seguido de paréntesis (). Un paréntesis puede tomar un parámetro. Si una función toma un parámetro, se llamará con un argumento. Una función también puede tomar un parámetro predeterminado. Para almacenar datos en una función, una función debe devolver ciertos tipos de datos. Para obtener el valor llamamos o invocamos a la función.
La función hace código:
- limpio y fácil de leer
- reutilizable
- fácil de probar
Una función se puede declarar o crear de un par de maneras:
- _Función declarativa_
- _Función de expresión_
- _Función anonima_
- _Función flecha_
### Función declarativa
Veamos cómo declaramos una función y cómo llamar a una función.
```js
//declaramos una función sin un parámetro
function functionName() {
// el código va aquí
}
functionName(); // llamando a la función por su nombre con paréntesis
```
### Función sin parámetros y return
La función se puede declarar sin un parámetro.
**Ejemplo:**
```js
// función sin parámetros. La función eleva al cuadrado un número
function square() {
let num = 2;
let sq = num * num;
console.log(sq);
}
square(); // 4
// función sin parámetro
function addTwoNumbers() {
let numOne = 10;
let numTwo = 20;
let sum = numOne + numTwo;
console.log(sum);
}
addTwoNumbers(); // una función tiene que ser llamada por su nombre para ser ejecutada
```
```js
function printFullName() {
let firstName = "Asabeneh";
let lastName = "Yetayeh";
let space = " ";
let fullName = firstName + space + lastName;
console.log(fullName);
}
printFullName(); // llamando a una función
```
### Función que retorna un valor
La función también puede devolver valores, si una función no devuelve valores, el valor de la función no está definido. Escribamos las funciones anteriores con return. A partir de ahora, retornaremos el valor a una función en lugar de imprimirlo.
```js
function printFullName() {
let firstName = "Asabeneh";
let lastName = "Yetayeh";
let space = " ";
let fullName = firstName + space + lastName;
return fullName;
}
console.log(printFullName());
```
```js
function addTwoNumbers() {
let numOne = 2;
let numTwo = 3;
let total = numOne + numTwo;
return total;
}
console.log(addTwoNumbers());
```
### Función con un parámetro
En una función podemos pasar diferentes tipos de datos(number, string, boolean, object, function) como un parámetro.
```js
// función con un parámetro
function functionName(parm1) {
//el código va aquí
}
functionName(parm1); // durante la llamada o la invocación es necesario un argumento
function areaOfCircle(r) {
let area = Math.PI * r * r;
return area;
}
console.log(areaOfCircle(10)); // debe ser llamado con un argumento
function square(number) {
return number * number;
}
console.log(square(10));
```
### Función con dos parámetros
```js
// función con dos parámetros
function functionName(parm1, parm2) {
//el código va aquí
}
functionName(parm1, parm2); // durante la llamada o invocación se necesitan dos argumentos
// la función sin parámetros no recibe entrada, así que hagamos una función con parámetros
function sumTwoNumbers(numOne, numTwo) {
let sum = numOne + numTwo;
console.log(sum);
}
sumTwoNumbers(10, 20); // llamando a la función
// si una función no es retorna esta no almacena datos, por lo que debe retornar
function sumTwoNumbers(numOne, numTwo) {
let sum = numOne + numTwo;
return sum;
}
console.log(sumTwoNumbers(10, 20));
function printFullName(firstName, lastName) {
return `${firstName} ${lastName}`;
}
console.log(printFullName("Asabeneh", "Yetayeh"));
```
### Función con muchos parámetros
```js
// función con múltiples parámetros
function functionName(parm1, parm2, parm3,...){
//el código va aquí
}
functionName(parm1,parm2,parm3,...) // durante la llamada o la invocación necesita tres argumentos
// esta función toma un array como un parámetro y suma los números en el array
function sumArrayValues(arr) {
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum = sum + arr[i];
}
return sum;
}
const numbers = [1, 2, 3, 4, 5];
//llamada a la función
console.log(sumArrayValues(numbers));
const areaOfCircle = (radius) => {
let area = Math.PI * radius * radius;
return area;
}
console.log(areaOfCircle(10))
```
### Función con número ilimitado de parámetros
A veces no sabemos cuántos argumentos va a pasar el usuario. Por lo tanto, debemos saber cómo escribir una función que pueda tomar un número ilimitado de argumentos. La forma en que lo hacemos tiene una diferencia significativa entre una función declarativa (función regular) y una función flecha. Veamos ejemplos tanto en la función declarativa como en la función flecha.
#### Número ilimitado de parámetros en una función regular
Una función declarativa proporciona una función con alcance de argumentos array como objeto. Se puede acceder a cualquier cosa que pasemos como argumento en la función desde el objeto de argumentos dentro de las funciones. Veamos un ejemplo
```js
// Accedemos a los argumentos del objeto
​
function sumAllNums() {
console.log(arguments)
}
sumAllNums(1, 2, 3, 4)
// Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
```
```js
// declaración
​
function sumAllNums() {
let sum = 0
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i]
}
return sum
}
console.log(sumAllNums(1, 2, 3, 4)) // 10
console.log(sumAllNums(10, 20, 13, 40, 10)) // 93
console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173
```
#### Número ilimitado de parámetros en una función flecha
La función flecha no tiene el objeto de alcance de los argumentos
Para implementar una función que toma un número ilimitado de argumentos en una función de flecha, usamos el operador de propagación seguido de cualquier nombre de parámetro. Se puede acceder a cualquier elemento que hayamos pasado como argumento en la función como array en la función de flecha. Veamos un ejemplo
```js
// Accedemos a los argumentos del objeto
​
const sumAllNums = (...args) => {
// console.log(arguments), objeto de argumentos no encontrado en la función flecha
// en su lugar, usamos un parámetro seguido de un operador de propagación (...)
console.log(args)
}
sumAllNums(1, 2, 3, 4)
// [1, 2, 3, 4]
```
```js
// declaración
​
const sumAllNums = (...args) => {
let sum = 0
for (const element of args) {
sum += element
}
return sum
}
console.log(sumAllNums(1, 2, 3, 4)) // 10
console.log(sumAllNums(10, 20, 13, 40, 10)) // 93
console.log(sumAllNums(15, 20, 30, 25, 10, 33, 40)) // 173
```
### Función anónima
Función anónima o sin nombre
```js
const anonymousFun = function () {
console.log("Soy una función anónima y mi valor se almacena en anonymousFun");
};
```
### Función de expresión
Las funciones de expresión son funciones anónimas. Después creamos una función sin nombre y la asignamos a una variable. Para retornar un valor de la función debemos llamar a la variable. Mira el ejemplo de abajo.
```js
// Function expression
const square = function (n) {
return n * n;
};
console.log(square(2)); // -> 4
```
### Función de autoinvocación
Las funciones de autoinvocación son funciones anónimas que no necesitan ser llamadas para devolver un valor.
```js
(function (n) {
console.log(n * n);
})(2); // 4, pero en lugar de solo imprimir si queremos regresar y almacenar los datos, hacemos lo que se muestra a continuación
let squaredNum = (function (n) {
return n * n;
})(10);
console.log(squaredNum);
```
### Función flecha
La función flecha es una alternativa para escribir una función, sin embargo, la función declarativa y la función flecha tienen algunas diferencias menores.
La función flecha usa una flecha en lugar de la palabra clave _function_ para declarar una función. Veamos tanto la función declarativa como la función flecha.
```js
// Así es como escribimos una función normal o declarativa
// Cambiemos esta función de declarativa a una función flecha
function square(n) {
return n * n;
}
console.log(square(2)); // 4
const square = (n) => {
return n * n;
};
console.log(square(2)); // -> 4
// si tenemos solo una línea en el bloque de código, se puede escribir de la siguiente manera, return explícito
const square = (n) => n * n; // -> 4
```
```js
const changeToUpperCase = (arr) => {
const newArr = [];
for (const element of arr) {
newArr.push(element.toUpperCase());
}
return newArr;
};
const countries = ["Finland", "Sweden", "Norway", "Denmark", "Iceland"];
console.log(changeToUpperCase(countries));
// ["FINLAND", "SWEDEN", "NORWAY", "DENMARK", "ICELAND"]
```
```js
const printFullName = (firstName, lastName) => {
return `${firstName} ${lastName}`;
};
console.log(printFullName("Asabeneh", "Yetayeh"));
```
La función anterior solo tiene la declaración de return, por lo tanto, podemos retornar explícitamente de la siguiente manera.
```js
const printFullName = (firstName, lastName) => `${firstName} ${lastName}`;
console.log(printFullName("Asabeneh", "Yetayeh"));
```
### Función con parámetros por defecto
A veces, pasamos valores predeterminados a los parámetros, cuando invocamos la función, si no pasamos un argumento, se usará el valor predeterminado. Tanto la función declarativa como la función flecha pueden tener un valor o valores predeterminados.
```js
// sintaxis
// Declarando una función
function functionName(param = value) {
//código
}
// Llamando una función
functionName();
functionName(arg);
```
**Example:**
```js
function greetings(name = "Peter") {
let message = `${name}, welcome to 30 Days Of JavaScript!`;
return message;
}
console.log(greetings());
console.log(greetings("Asabeneh"));
```
```js
function generateFullName(firstName = "Asabeneh", lastName = "Yetayeh") {
let space = " ";
let fullName = firstName + space + lastName;
return fullName;
}
console.log(generateFullName());
console.log(generateFullName("David", "Smith"));
```
```js
function calculateAge(birthYear, currentYear = 2019) {
let age = currentYear - birthYear;
return age;
}
console.log("Age: ", calculateAge(1819));
```
```js
function weightOfObject(mass, gravity = 9.81) {
let weight = mass * gravity + " N"; // el valor tiene que ser cambiado a string primero
return weight;
}
console.log("Weight of an object in Newton: ", weightOfObject(100)); // 9.81 es la gravedad en la superficie de la tierra
console.log("Weight of an object in Newton: ", weightOfObject(100, 1.62)); // gravedad en la superficie de la luna
```
Veamos cómo escribimos las funciones anteriores con funciones flecha.
```js
// sintaxis
// declarando una función
const functionName = (param = value) => {
//código
};
// Llamando a la función
functionName();
functionName(arg);
```
**Example:**
```js
const greetings = (name = "Peter") => {
let message = name + ", welcome to 30 Days Of JavaScript!";
return message;
};
console.log(greetings());
console.log(greetings("Asabeneh"));
```
```js
const generateFullName = (firstName = "Asabeneh", lastName = "Yetayeh") => {
let space = " ";
let fullName = firstName + space + lastName;
return fullName;
};
console.log(generateFullName());
console.log(generateFullName("David", "Smith"));
```
```js
const calculateAge = (birthYear, currentYear = 2019) => currentYear - birthYear;
console.log("Age: ", calculateAge(1819));
```
```js
const weightOfObject = (mass, gravity = 9.81) => mass * gravity + " N";
console.log("Weight of an object in Newton: ", weightOfObject(100)); // 9.81 es la gravedad en la superficie de la tierra
console.log("Weight of an object in Newton: ", weightOfObject(100, 1.62)); // gravedad en la superficie de la luna
```
### Función declarativa versus función flecha
Será cubierto en otra sección.
🌕 Tienes una energía ilimitada. Acabas de completar los desafíos del día 7 y llevas siete pasos de tu camino hacia la grandeza. Ahora haz algunos ejercicios para tu cerebro y tus músculos.
## 💻 Ejercicios
### Ejercicios: Nivel 1
1. Declare una función _fullName_ e imprima su nombre completo.
2. Declare una función _fullName_ y ahora toma firstName, lastName como parámetro y retorna su nombre completo.
3. Declare una función _addNumbers_ que toma dos parámetros y retorna la suma de ambos.
4. El área de un rectángulo se calcula de la siguiente manera: _area = length x width_. Escribe una función _areaOfRectangle_ que calcule el área de un rectángulo.
5. El perímetro de un rectángulo se calcula de la siguiente manera: _perimeter= 2x(length + width)_. Escribe una función _perimeterOfRectangle_ que calcule el perímetro de un rectángulo.
6. El volumen de un prisma rectangular se calcula de la siguiente manera: _volume = length x width x height_. Escribe una función _volumeOfRectPrism_ que calcule el volumen de un prisma.
7. El área de un círculo se calcula de la siguiente manera: _area = π x r x r_. Escribe una función _areaOfCircle_ que calcule el área de un círculo.
8. La circunferencia de un círculo se calcula de la siguiente manera: _circumference = 2πr_. Escribe una función _circumOfCircle_ que calcule la circunferencia de un círculo.
9. La densidad de una sustancia se calcula de la siguiente manera:_density= mass/volume_. Escribe una función _density_ que calcule la densidad de una sustancia.
10. La velocidad se calcula dividiendo el total de la distancia recorrida por un objeto en movimiento entre el tiempo total. Escribe una función que calcule la velocidad de un objeto en movimiento, _speed_.
11. El peso de una sustancia se calcula de la siguiente manera: _weight = mass x gravity_. Escribe una función _weight_ que calcule el peso de una sustancia.
12. La temperatura en °C se puede convertir a °F usando esta fórmula: _°F = (°C x 9/5) + 32_. Escribe una función _convertCelsiusToFahrenheit_ que convierta °C a °F.
13. El índice de masa corporal (IMC) se calcula de la siguiente manera: _imc = peso en Kg / (altura x altura) en m2_. Escribe una función que calcule _imc_. El IMC se utiliza para definir de forma amplia diferentes grupos de peso en adultos de 20 años o más. Compruebe si una persona tiene un _peso bajo, peso normal, con sobrepeso_ u _obeso_ según la información que se proporciona a continuación.
- Se aplican los mismos parámetros de grupos tanto a hombres como a mujeres.
- _Peso bajo_: IMC inferior a 18,5
- _Peso normal_: IMC de 18,5 a 24,9
- _Sobrepeso_: IMC de 25 a 29,9
- _Obeso_: IMC es 30 o más
14. Escribe una función llamada _checkSeason_, toma un parámetro de mes y retorna la estación: Otoño, Invierno, Primavera o Verano.
15. Math.max retorna su argumento más grande. Escriba una función findMax que tome tres argumentos y devuelva su máximo sin usar el método Math.max.
```js
console.log(findMax(0, 10, 5));
10;
console.log(findMax(0, -10, -2));
0;
```
### Ejercicios: Nivel 2
1. La ecuación lineal se calcula de la siguiente manera: _ax + by + c = 0_. Escribe una función que calcule el valor de una ecuación lineal, _solveLinEquation_.
1. La ecuación cuadrática se calcula de la siguiente manera: _ax2 + bx + c = 0_. Escribe una función que calcule el valor o los valores de una ecuación cuadrática, _solveQuadEquation_.
```js
console.log(solveQuadratic()); // {0}
console.log(solveQuadratic(1, 4, 4)); // {-2}
console.log(solveQuadratic(1, -1, -2)); // {2, -1}
console.log(solveQuadratic(1, 7, 12)); // {-3, -4}
console.log(solveQuadratic(1, 0, -4)); //{2, -2}
console.log(solveQuadratic(1, -1, 0)); //{1, 0}
```
1. Declare una función llamada _printArray_. Toma un array como parámetro e imprime cada valor del array.
1. Declare una función llamada _showDateTime_ que muestre la hora en este formato: 01/08/2020 04:08 usando el objeto Date.
```sh
showDateTime()
08/01/2020 04:08
```
1. Declare una función llamada _swapValues_. Esta función intercambia el valor de x a y.
```js
swapValues(3, 4); // x => 4, y=>3
swapValues(4, 5); // x = 5, y = 4
```
1. Declare una función llamada _reverseArray_. Toma un array como parámetro y retorna el array invertido (no use el método reverse()).
```js
console.log(reverseArray([1, 2, 3, 4, 5]));
//[5, 4, 3, 2, 1]
console.log(reverseArray(["A", "B", "C"]));
//['C', 'B', 'A']
```
1. Declare una función llamada _capitalizeArray_. Toma un array como parámetro y retorna el array - capitalizedarray.
1. Declare una función llamada _addItem_. Toma un elemento de paŕametro y retorna un array después de agregar el un elemento.
1. Declare una función llamada _removeItem_. Toma como parámetro un index y retorna un array después de eleminar el elemento con ese index.
1. Declare una función llamada _sumOfNumbers_. Toma un número como parámetro y suma todos los números en ese rango.
1. Declare una función llamada _sumOfOdds_. Toma un parámetro numérico y suma todos los números impares en ese rango.
1. Declare una función llamada _sumOfEven_. Toma un parámetro numérico y suma todos los números pares en ese rango.
1. Declare una función llamada _evensAndOdds_ . Toma un entero positivo como parámetro y cuenta el número de pares e impares.
```sh
evensAndOdds(100);
El número de impares son 50.
El número de pares es 51.
```
1. Escriba una función que tome cualquier número de argumentos y retorne la suma de los argumentos
```js
sum(1, 2, 3); // -> 6
sum(1, 2, 3, 4); // -> 10
```
1. Escriba una función _randomUserIp_ que genere una ip de usuario aleatoria.
1. Escriba una función _randomMacAddress_ que genere una dirección mac aleatoria.
1. Declare una función llamada _randomHexaNumberGenerator_. Cuando se llama a esta función, genera un número hexadecimal aleatorio. La función retorna el número hexadecimal.
```sh
console.log(randomHexaNumberGenerator());
'#ee33df'
```
1. Declare una función llamada _userIdGenerator_. Cuando se llama a esta función, genera un id de siete caracteres. La función devuelve el id.
```sh
console.log(userIdGenerator());
41XTDbE
```
### Ejercicios: Nivel 3
1. Modifique la función _userIdGenerator_. Declare una función de nombre _userIdGeneratedByUser_. No toma ningún parámetro pero toma dos entradas usando prompt(). Una de las entradas es la cantidad de caracteres y la segunda entrada es la cantidad de ID que se supone que se generarán.
```sh
userIdGeneratedByUser()
'kcsy2
SMFYb
bWmeq
ZXOYh
2Rgxf
'
userIdGeneratedByUser()
'1GCSgPLMaBAVQZ26
YD7eFwNQKNs7qXaT
ycArC5yrRupyG00S
UbGxOFI7UXSWAyKN
dIV0SSUTgAdKwStr
'
```
1. Escriba una función llamada _rgbColorGenerator_ que genera colores rgb
```sh
rgbColorGenerator()
rgb(125,244,255)
```
1. Escriba una función **_arrayOfHexaColors_** que retorna cualquier cantidad de colores hexadecimales en un array.
1. Escriba una función **_arrayOfRgbColors_** que retorna cualquier cantidad de colores RGB en un array.
1. Escriba una función **_convertHexaToRgb_** que convierta el color hexa a rgb y retorna un color rgb.
1. Escriba una función **_convertRgbToHexa_** que convierta rgb a color hexa y retorna un color hexa.
1. Escriba una función **_generateColors_** que pueda generar cualquier número de colores hexa o rgb.
```js
console.log(generateColors("hexa", 3)); // ['#a3e12f', '#03ed55', '#eb3d2b']
console.log(generateColors("hexa", 1)); // '#b334ef'
console.log(generateColors("rgb", 3)); // ['rgb(5, 55, 175)', 'rgb(50, 105, 100)', 'rgb(15, 26, 80)']
console.log(generateColors("rgb", 1)); // 'rgb(33,79, 176)'
```
1. Llame a su función _shuffleArray_, toma un array como parámetro y devuelve un array mezclada
1. Llame a su función _factorial_, toma un número entero como parámetro y devuelve un factorial del número.
1. Llame a su función _isEmpty_, toma un parámetro y verifica si está vacío o no.
1. Llame a su función _sum_, toma cualquier cantidad de argumentos y devuelve la suma.
1. Escriba una función llamada _sumOfArrayItems_, toma un array como parámetro y retorna la suma de todos los elementos. Compruebe si todos los elementos de la matriz son tipos de números. Si no, dé una respuesta razonable.
1. Escribe una función llamada _average_, toma un array como parámetro y retorna el promedio de los elementos. Compruebe si todos los elementos de la matriz son tipos de números. Si no, dé una respuesta adecuada.
1. Escriba una función llamada _modifyArray_ que tome un array como parámetro y modifique el quinto elemento del array y retorna el array. Si la longitud del array es inferior a cinco, retorna 'elemento no encontrado'.
```js
console.log(modifyArray(['Avocado', 'Tomato', 'Potato','Mango', 'Lemon','Carrot']);
```
```sh
['Avocado', 'Tomato', 'Potato','Mango', 'LEMON', 'Carrot']
```
```js
console.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon','Microsoft', 'IBM']);
```
```sh
['Google', 'Facebook','Apple', 'Amazon','MICROSOFT', 'IBM']
```
```js
console.log(modifyArray(['Google', 'Facebook','Apple', 'Amazon']);
```
```sh
'Not Found'
```
1. Escribe una función llamada _isPrime_, que verifica si un número es un número primo.
1. Escriba una función que verifique si todos los elementos son únicos en un array.
1. Escriba una función que verifique si todos los elementos de un array son del mismo tipo de datos.
1. El nombre de las variables de JavaScript no admite caracteres o símbolos especiales, excepto \$ o \_. Escriba una función **isValidVariable** que verifique si una variable es válida o inválida.
1. Escriba una función que devuelva un array de siete números aleatorios en un rango de 0-9. Todos los números deben ser únicos.
```js
sevenRandomNumbers()[(1, 4, 5, 7, 9, 8, 0)];
```
1. Escriba una función llamada reverseCountries, toma el array de países y primero copia el array y retorna el array original invertido
🎉 ¡FELICITACIONES! 🎉
[<< Day 6](../dia_06_Bucles/dia_06_bucles.md) | [Day 8 >>](../dia_08_Objetos/dia_08_objetos.md)

592
Spanish/dia_08_Objetos/dia_08_objetos.md
Unescape View File

@ -0,0 +1,592 @@
<div align="center">
<h1> 30 Días de JavaScript: Objetos</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Autor:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> Enero, 2020</small>
</sub>
</div>
[<< Día 7](../dia_07_Funciones/dia_07_funciones.md) | [Día 9 >>](../dia_09_Funciones_De_Orden_Superior/dia_09_funciones_de_orden_superior.md)
![Thirty Days Of JavaScript](../images/banners/day_1_8.png)
- [📔 Día 8](#📔-día-8)
- [Scope](#scope-alcance)
- [Objeto Global Window](#objeto-global-window)
- [Global scope](#global-scope)
- [Local scope](#local-scope)
- [📔 Objeto](#📔-objeto)
- [Crear un objeto vacío](#crear-un-objeto-vacío)
- [Crear un objeto con valores](#crear-un-objeto-con-valores)
- [Obtener valores de un objeto](#obtener-valores-de-un-objeto)
- [Crear métodos de objetos](#crear-métodos-de-objetos)
- [Establecer una nueva clave para un objeto](#establecer-una-nueva-clave-para-un-objeto)
- [Métodos de los objetos](#métodos-de-los-objetos)
- [Obtención de claves de objetos mediante Object.keys()](#obtención-de-claves-de-objetos-mediante-objectkeys)
- [Obtención de valores de objetos mediante Object.values()](#obtención-de-valores-de-objetos-mediante-objectvalues)
- [Obtención de claves y valores de objetos mediante Object.entries()](#obtención-de-claves-y-valores-de-objetos-mediante-objectentries)
- [Comprobación de propiedades mediante hasOwnProperty()](#comprobación-de-propiedades-mediante-hasownproperty)
- [💻 Ejercicios](#💻-ejercicios)
- [Ejercicios: Nivel 1](#ejercicios-nivel-1)
- [Ejercicios: Nivel 2](#ejercicios-nivel-2)
- [Ejercicios: Nivel 3](#ejercicios-nivel-3)
# 📔 Día 8
## Scope (alcance)
La variable es la parte fundamental en la programación. Declaramos variables para almacenar diferentes tipos de datos. Para declarar una variable usamos la palabra clave _var_, _let_, y _const_. Una variable puede declararse en diferentes scope. En esta sección, veremos el alcance de las variables, el alcance de las variables cuando usamos var o let.
El scope de las variables pueden ser:
- Global
- Local
Las variables pueden ser declaradas con un scope global o local. Veremos tanto el scope global como el local. Cualquier cosa declarada sin let, var o const tiene un alcance global.
Imaginemos que tenemos un fichero scope.js.
### Objeto Global Window
Sin usar console.log() abre tu navegador y comprueba, verás el valor de a y b si escribes a o b en el navegador. Eso significa que a y b ya están disponibles en window
```js
//scope.js
a = "JavaScript"; // declarar una variable sin let o const la hace disponible en el objeto window y esta se encuentra en cualquier lugar
b = 10; // es una variable de scope global y se encuentra en el objeto ventana
function letsLearnScope() {
console.log(a, b);
if (true) {
console.log(a, b);
}
}
console.log(a, b); // accesibles
```
### Global scope
Una variable declarada globalmente puede ser accedida en cualquier lugar del mismo archivo. Pero el término global es relativo. Puede ser global al archivo o puede ser global relativo a algún bloque de códigos.
```js
//scope.js
let a = "JavaScript"; // es un scope global que se encontrará en cualquier parte de este archivo
let b = 10; // es un scope global que se encontrará en cualquier parte de este archivo
function letsLearnScope() {
console.log(a, b); // JavaScript 10, accesible
if (true) {
let a = "Python";
let b = 100;
console.log(a, b); // Python 100
}
console.log(a, b);
}
letsLearnScope();
console.log(a, b); // JavaScript 10, accesible
```
### Local scope
Una variable declarada como local sólo puede ser accedida en determinados bloques de código.
- Scope del bloque
- Scope de la función
```js
//scope.js
let a = "JavaScript"; // es un scope global que se encontrará en cualquier parte de este archivo
let b = 10; // es un scope global que se encontrará en cualquier parte de este archivo
// Scope de la función
function letsLearnScope() {
console.log(a, b); // JavaScript 10, accesible
let value = false;
// Scope del bloque
if (true) {
// podemos acceder desde la función y fuera de la función pero
// las variables declaradas dentro del if no serán accesibles fuera del bloque if
let a = "Python";
let b = 20;
let c = 30;
let d = 40;
value = !value;
console.log(a, b, c, value); // Python 20 30 true
}
// no podemos acceder a c porque el scope de c es sólo el bloque if
console.log(a, b, value); // JavaScript 10 true
}
letsLearnScope();
console.log(a, b); // JavaScript 10, accesible
```
Ahora, usted tiene una comprensión del scope. Una variable declarada con _var_ sólo tiene ámbito de función, pero una variable declarada con _let_ o _const_ tiene scope de bloque (bloque de función, bloque if, bloque de bucle, etc). El bloque en JavaScript es un código entre dos llaves({}).
```js
//scope.js
function letsLearnScope() {
var gravity = 9.81;
console.log(gravity);
}
// console.log(gravity), Uncaught ReferenceError: la gravedad no está definida
if (true) {
var gravity = 9.81;
console.log(gravity); // 9.81
}
console.log(gravity); // 9.81
for (var i = 0; i < 3; i++) {
console.log(i); // 0, 1, 2
}
console.log(i); // 3
```
En ES6 y superiores existe _let_ y _const_, por lo que no sufrirás la insidia de _var_. Cuando usamos _let_ nuestra variable tiene alcance de bloque y no infectara otras partes de nuestro código.
```js
//scope.js
function letsLearnScope() {
// puedes usar let o const, pero la gravedad es constante prefiero usar const
const gravity = 9.81;
console.log(gravity);
}
// console.log(gravity), Uncaught ReferenceError: la gravedad no está definida
if (true) {
const gravity = 9.81;
console.log(gravity); // 9.81
}
// console.log(gravity), Uncaught ReferenceError: la gravedad no está definida
for (let i = 0; i < 3; i++) {
console.log(i); // 0, 1, 2
}
// console.log(i), Uncaught ReferenceError: i no está definida
```
El ámbito _let_ y _const_ es el mismo. La diferencia es sólo la reasignación. No podemos cambiar o reasignar el valor de la variable `const`. Te sugiero encarecidamente que utilices _let_ y _const_, utilizando _let_ y _const_ escribirás un código limpio y evitarás errores difíciles de depurar. Como regla general, puedes usar _let_ para cualquier valor que cambie, _const_ para cualquier valor constante, y para un array, objeto, función de flecha y expresión de función.
## 📔 Objeto
Todo puede ser un objeto y los objetos tienen propiedades y las propiedades tienen valores, por lo que un objeto es un par clave-valor. El orden de la clave no está reservado, o no hay orden. Para crear un objeto literal, utilizamos dos llaves.
### Crear un objeto vacío
Un objeto vacío
```js
const person = {};
```
### Crear un objeto con valores
Ahora, el objeto persona tiene las propiedades firstName, lastName, age, location, skills y isMarried. El valor de las propiedades o claves puede ser una cadena, un número, un booleano, un objeto, null, undefined o una función.
Veamos algunos ejemplos de objetos. Cada clave tiene un valor en el objeto.
```js
const rectangle = {
length: 20,
width: 20,
};
console.log(rectangle); // {length: 20, width: 20}
const person = {
firstName: "Asabeneh",
lastName: "Yetayeh",
age: 250,
country: "Finland",
city: "Helsinki",
skills: [
"HTML",
"CSS",
"JavaScript",
"React",
"Node",
"MongoDB",
"Python",
"D3.js",
],
isMarried: true,
};
console.log(person);
```
### Obtener valores de un objeto
Podemos acceder a los valores del objeto utilizando dos métodos:
- usando . seguido del nombre de la clave si el nombre de la clave es de una sola palabra
- utilizando corchetes y comillas
```js
const person = {
firstName: "Asabeneh",
lastName: "Yetayeh",
age: 250,
country: "Finland",
city: "Helsinki",
skills: [
"HTML",
"CSS",
"JavaScript",
"React",
"Node",
"MongoDB",
"Python",
"D3.js",
],
getFullName: function () {
return `${this.firstName}${this.lastName}`;
},
"phone number": "+3584545454545",
};
// acceder a los valores mediante .
console.log(person.firstName);
console.log(person.lastName);
console.log(person.age);
console.log(person.location); // undefined
// se puede acceder al valor utilizando corchetes y el nombre de la clave
console.log(person["firstName"]);
console.log(person["lastName"]);
console.log(person["age"]);
console.log(person["age"]);
console.log(person["location"]); // undefined
// por ejemplo, para acceder al número de teléfono sólo utilizamos el método del corchete
console.log(person["phone number"]);
```
### Crear métodos de objetos
Ahora, el objeto persona tiene las propiedades getFullName. El getFullName es una función dentro del objeto persona y lo llamamos un método del objeto. La palabra clave _this_ se refiere al objeto mismo. Podemos utilizar la palabra _this_ para acceder a los valores de diferentes propiedades del objeto. No podemos usar una función de flecha como método de objeto porque la palabra this se refiere a window dentro de una función de flecha en lugar del objeto mismo. Ejemplo de objeto:
```js
const person = {
firstName: "Asabeneh",
lastName: "Yetayeh",
age: 250,
country: "Finland",
city: "Helsinki",
skills: [
"HTML",
"CSS",
"JavaScript",
"React",
"Node",
"MongoDB",
"Python",
"D3.js",
],
getFullName: function () {
return `${this.firstName} ${this.lastName}`;
},
};
console.log(person.getFullName());
// Asabeneh Yetayeh
```
### Establecer una nueva clave para un objeto
Un objeto es una estructura de datos mutable y podemos modificar el contenido de un objeto después de su creación.
Establecer una nueva clave en un objeto
```js
const person = {
firstName: "Asabeneh",
lastName: "Yetayeh",
age: 250,
country: "Finland",
city: "Helsinki",
skills: [
"HTML",
"CSS",
"JavaScript",
"React",
"Node",
"MongoDB",
"Python",
"D3.js",
],
getFullName: function () {
return `${this.firstName} ${this.lastName}`;
},
};
person.nationality = "Ethiopian";
person.country = "Finland";
person.title = "teacher";
person.skills.push("Meteor");
person.skills.push("SasS");
person.isMarried = true;
person.getPersonInfo = function () {
let skillsWithoutLastSkill = this.skills
.splice(0, this.skills.length - 1)
.join(", ");
let lastSkill = this.skills.splice(this.skills.length - 1)[0];
let skills = `${skillsWithoutLastSkill}, and ${lastSkill}`;
let fullName = this.getFullName();
let statement = `${fullName} is a ${this.title}.\nHe lives in ${this.country}.\nHe teaches ${skills}.`;
return statement;
};
console.log(person);
console.log(person.getPersonInfo());
```
```sh
Asabeneh Yetayeh is a teacher.
He lives in Finland.
He teaches HTML, CSS, JavaScript, React, Node, MongoDB, Python, D3.js, Meteor, and SasS.
```
### Métodos de los objetos
Existen diferentes métodos para manipular un objeto. Veamos algunos de los métodos disponibles.
_Object.assign_: Para copiar un objeto sin modificar el objeto original
```js
const person = {
firstName: "Asabeneh",
age: 250,
country: "Finland",
city: "Helsinki",
skills: ["HTML", "CSS", "JS"],
title: "teacher",
address: {
street: "Heitamienkatu 16",
pobox: 2002,
city: "Helsinki",
},
getPersonInfo: function () {
return `I am ${this.firstName} and I live in ${this.city}, ${this.country}. I am ${this.age}.`;
},
};
//Métodos de objetos: Object.assign, Object.keys, Object.values, Object.entries
//hasOwnProperty
const copyPerson = Object.assign({}, person);
console.log(copyPerson);
```
#### Obtención de claves de objetos mediante Object.keys()
_Object.keys_: Para obtener las claves o propiedades de un objeto como un array
```js
const keys = Object.keys(copyPerson);
console.log(keys); //['firstName', 'age', 'country','city', 'skills','title', 'address', 'getPersonInfo']
const address = Object.keys(copyPerson.address);
console.log(address); //['street', 'pobox', 'city']
```
#### Obtención de valores de objetos mediante Object.values()
_Object.values_:Para obtener los valores de un objeto como un array
```js
const values = Object.values(copyPerson);
console.log(values);
```
#### Obtención de claves y valores de objetos mediante Object.entries()
_Object.entries_:Para obtener las claves y valores de un array
```js
const entries = Object.entries(copyPerson);
console.log(entries);
```
#### Comprobación de propiedades mediante hasOwnProperty()
_hasOwnProperty_: Para comprobar si una clave o propiedad específica existe en un objeto
```js
console.log(copyPerson.hasOwnProperty("name"));
console.log(copyPerson.hasOwnProperty("score"));
```
🌕 Eres asombroso. Ahora, estás súper cargado con el poder de los objetos. Acabas de completar los desafíos del día 8 y llevas 8 pasos de tu camino a la grandeza. Ahora haz algunos ejercicios para tu cerebro y para tus músculos.
## 💻 Ejercicios
### Ejercicios: Nivel 1
1. Crear un objeto vacío llamado dog
1. Imprime el objeto dog en la consola
1. Añade las propiedades name, legs, color, age y bark para el objeto dog. La propiedad bark es un método que devuelve _woof woof_
1. Obtener name, legs, color, age y el valor de bark del objeto dog
1. Establecer nuevas propiedades al objeto dog: breed, getDogInfo
### Ejercicios: Nivel 2
1. Encuentra a la persona que tiene muchas habilidades en el objeto de los usuarios.
1. Contar los usuarios conectados, contar los usuarios que tienen más de 50 puntos del siguiente objeto.
````js
const users = {
Alex: {
email: 'alex@alex.com',
skills: ['HTML', 'CSS', 'JavaScript'],
age: 20,
isLoggedIn: false,
points: 30
},
Asab: {
email: 'asab@asab.com',
skills: ['HTML', 'CSS', 'JavaScript', 'Redux', 'MongoDB', 'Express', 'React', 'Node'],
age: 25,
isLoggedIn: false,
points: 50
},
Brook: {
email: 'daniel@daniel.com',
skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux'],
age: 30,
isLoggedIn: true,
points: 50
},
Daniel: {
email: 'daniel@alex.com',
skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
age: 20,
isLoggedIn: false,
points: 40
},
John: {
email: 'john@john.com',
skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux', 'Node.js'],
age: 20,
isLoggedIn: true,
points: 50
},
Thomas: {
email: 'thomas@thomas.com',
skills: ['HTML', 'CSS', 'JavaScript', 'React'],
age: 20,
isLoggedIn: false,
points: 40
},
Paul: {
email: 'paul@paul.com',
skills: ['HTML', 'CSS', 'JavaScript', 'MongoDB', 'Express', 'React', 'Node'],
age: 20,
isLoggedIn: false,
points: 40
}
}```
````
1. Encontrar personas que sean desarrolladores MERN stack del objeto de los usuarios
1. Establezca su nombre en el objeto usuarios sin modificar el objeto usuarios original
1. Obtener todas las claves o propiedades del objeto usuarios
1. Obtener todos los valores del objeto usuarios
1. Utilice el objeto países para imprimir el nombre del país, la capital, la población y los idiomas.
### Ejercicios: Nivel 3
1. Crea un objeto literal llamado _personAccount_. Tiene las propiedades _firstName, lastName, incomes, expenses_ y tiene los metodos _totalIncome, totalExpense, accountInfo,addIncome, addExpense_ y _accountBalance_. Incomes es un conjunto de ingresos y su descripción y expenses es un conjunto de ingresos y su descripción.
2. \*\*\*\* Preguntas:2, 3 y 4 se basan en los siguientes dos arrays: users y products ()
```js
const users = [
{
_id: "ab12ex",
username: "Alex",
email: "alex@alex.com",
password: "123123",
createdAt: "08/01/2020 9:00 AM",
isLoggedIn: false,
},
{
_id: "fg12cy",
username: "Asab",
email: "asab@asab.com",
password: "123456",
createdAt: "08/01/2020 9:30 AM",
isLoggedIn: true,
},
{
_id: "zwf8md",
username: "Brook",
email: "brook@brook.com",
password: "123111",
createdAt: "08/01/2020 9:45 AM",
isLoggedIn: true,
},
{
_id: "eefamr",
username: "Martha",
email: "martha@martha.com",
password: "123222",
createdAt: "08/01/2020 9:50 AM",
isLoggedIn: false,
},
{
_id: "ghderc",
username: "Thomas",
email: "thomas@thomas.com",
password: "123333",
createdAt: "08/01/2020 10:00 AM",
isLoggedIn: false,
},
];
const products = [
{
_id: "eedfcf",
name: "mobile phone",
description: "Huawei Honor",
price: 200,
ratings: [
{ userId: "fg12cy", rate: 5 },
{ userId: "zwf8md", rate: 4.5 },
],
likes: [],
},
{
_id: "aegfal",
name: "Laptop",
description: "MacPro: System Darwin",
price: 2500,
ratings: [],
likes: ["fg12cy"],
},
{
_id: "hedfcg",
name: "TV",
description: "Smart TV:Procaster",
price: 400,
ratings: [{ userId: "fg12cy", rate: 5 }],
likes: ["fg12cy"],
},
];
```
Imagina que estás obteniendo la colección de usuarios anterior de una base de datos MongoDB.
a. Crear una función llamada signUp que permita al usuario añadirse a la colección. Si el usuario existe, informar al usuario que ya tiene una cuenta.
b. Crear una función llamada signIn que permita al usuario iniciar sesión en la aplicación
3. El array de productos tiene tres elementos y cada uno de ellos tiene seis propiedades.
a. Crear una función llamada rateProduct que califique el producto
b. Crear una función llamada averageRating que calcule la valoración media de un producto
4. Crear una función llamada likeProduct. Esta función ayuda a dar un like al producto. Si no le gusta eliminar el like y si le gusta darle like
🎉 ¡FELICITACIONES! 🎉
[<< Día 7](../dia_07_Funciones/dia_07_funciones.md) | [Día 9 >>](../dia_09_Funciones_De_Orden_Superior/dia_09_funciones_de_orden_superior.md)

707
Spanish/dia_09_Funciones_De_Orden_Superior/dia_09_funciones_de_orden_superior.md
Unescape View File

@ -0,0 +1,707 @@
<div align="center">
<h1> 30 Días De JavaScript: Función De Orden Superior</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Autor:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> Enero, 2020</small>
</sub>
</div>
[<< Día 8](../dia_08_Objetos/dia_08_objetos.md) | [Día 10 >>](../10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md)
![Day 5](../images/banners/day_1_9.png)
- [Día 9](#día-9)
- [Función De Orden Superior](#función-de-orden-superior)
- [Callback](#callback)
- [Retornar una función](#retornar-una-función)
- [Configuración de tiempo](#configuración-de-tiempo)
- [Configuración del intervalo mediante la función setInterval](#configuración-del-intervalo-mediante-la-función-setinterval)
- [Configurar tiempo mediante un setTimeout](#configurar-tiempo-mediante-un-settimeout)
- [Programación funcional](#programación-funcional)
- [forEach](#foreach)
- [map](#map)
- [filter](#filter)
- [reduce](#reduce)
- [every](#every)
- [find](#find)
- [findIndex](#findindex)
- [some](#some)
- [sort](#sort)
- [Ordenar los valores strings](#ordenar-los-valores-strings)
- [Ordenar valores numéricos](#ordenar-valores-numéricos)
- [Ordenar arrays de objetos](#ordenar-arrays-de-objetos)
- [💻 Ejercicios](#💻-ejercicios)
- [Ejercicios: Nivel 1](#ejercicios-nivel-1)
- [Ejercicios: Nivel 2](#ejercicios-nivel-2)
- [Ejercicios: Nivel 3](#ejercicios-nivel-3)
# Día 9
## Función De Orden Superior
Las funciones de orden superior son funciones que toman otra función como parámetro o retorna una función como valor. La función que se pasa como parámetro se llama callback.
### Callback
Un callback es una función que puede ser pasada como parámetro a otra función. Véase el ejemplo siguiente.
```js
// una función callback, el nombre de la función puede ser cualquier nombre
const callback = (n) => {
return n ** 2
}
​
// función que toma otra función como callback
function cube(callback, n) {
return callback(n) * n
}
​
console.log(cube(callback, 3))
```
### Retornar una función
Las funciones de orden superior retorna la función como valor
​
```js
// Función de orden superior que devuelve otra función
const higherOrder = (n) => {
const doSomething = (m) => {
const doWhatEver = (t) => {
return 2 * n + 3 * m + t;
};
return doWhatEver;
};
return doSomething;
};
console.log(higherOrder(2)(3)(10));
```
Veamos dónde utilizamos las funciones de callback. Por ejemplo, el método _forEach_ utiliza callback.
```js
const numbers = [1, 2, 3, 4, 5];
const sumArray = (arr) => {
let sum = 0;
const callback = function (element) {
sum += element;
};
arr.forEach(callback);
return sum;
};
console.log(sumArray(numbers));
```
```sh
15
```
El ejemplo anterior puede simplificarse como el siguiente:
```js
const numbers = [1, 2, 3, 4]
​
const sumArray = arr => {
let sum = 0
arr.forEach(function(element) {
sum += element
})
return sum
}
console.log(sumArray(numbers))
```
```sh
15
```
### Configuración de tiempo
En JavaScript podemos ejecutar algunas actividades en un determinado intervalo de tiempo o podemos programar (esperar) algún tiempo para ejecutar algunas actividades.
- setInterval
- setTimeout
#### Configuración del intervalo mediante la función setInterval
In JavaScript, we use setInterval higher order function to do some activity continuously with in some interval of time. El método global setInterval toma una función callback y una duración como parámetro. La duración está en milisegundos y la llamada de retorno siempre será llamada en ese intervalo de tiempo.
```js
// sintaxis
function callback() {
// el código va aquí
}
setInterval(callback, duration);
```
```js
function sayHello() {
console.log("Hello");
}
setInterval(sayHello, 1000); // imprime hola cada segundo, 1000ms es 1s
```
#### Configurar tiempo mediante un setTimeout
En JavaScript, utilizamos la función de orden superior setTimeout para ejecutar alguna acción en algún momento en el futuro. El método global setTimeout toma una función callback y una duración como parámetro. La duración está en milisegundos y el callback espera esa cantidad de tiempo.
```js
// sintaxis
function callback() {
// el código va aquí
}
setTimeout(callback, duration); // duración en milliseconds
```
```js
function sayHello() {
console.log("Hello");
}
setTimeout(sayHello, 2000); // imprime hola después de esperar 2 segundos.
```
## Programación funcional
En lugar de escribir un bucle regular, la última versión de JavaScript introdujo un montón de métodos incorporados que pueden ayudarnos a resolver problemas complicados.
Instead of writing regular loop, latest version of JavaScript introduced lots of built in methods which can help us to solve complicated problems. Todos los métodos incorporados toman la función callback. En esta sección, veremos _forEach_, _map_, _filter_, _reduce_, _find_, _every_, _some_, y _sort_.
### forEach
_forEach_: Iterar los elementos de un array. Utilizamos _forEach_ sólo con arrays. Toma una función callback con elementos, parámetro de índice y el propio array. El índice y el array son opcionales.
```js
arr.forEach(function (element, index, arr) {
console.log(index, element, arr);
});
// El código anterior puede escribirse utilizando la función de flecha
arr.forEach((element, index, arr) => {
console.log(index, element, arr);
});
// El código anterior puede escribirse utilizando la función de flecha y return explícito
arr.forEach((element, index, arr) => console.log(index, element, arr));
```
```js
let sum = 0;
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((num) => console.log(num));
console.log(sum);
```
```sh
1
2
3
4
5
```
```js
let sum = 0;
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((num) => (sum += num));
console.log(sum);
```
```sh
15
```
```js
const countries = ["Finland", "Denmark", "Sweden", "Norway", "Iceland"];
countries.forEach((element) => console.log(element.toUpperCase()));
```
```sh
FINLAND
DENMARK
SWEDEN
NORWAY
ICELAND
```
### map
_map_: Iterar los elementos de un array y modificar los elementos del mismo. Toma una función callback con elementos, índice , parámetro del array y devuelve un nuevo array.
```js
const modifiedArray = arr.map(function (element, index, arr) {
return element;
});
```
```js
/*Función flecha y return explícito
const modifiedArray = arr.map((element,index) => element);
*/
//Ejemplo
const numbers = [1, 2, 3, 4, 5];
const numbersSquare = numbers.map((num) => num * num);
console.log(numbersSquare);
```
```sh
[1, 4, 9, 16, 25]
```
```js
const names = ["Asabeneh", "Mathias", "Elias", "Brook"];
const namesToUpperCase = names.map((name) => name.toUpperCase());
console.log(namesToUpperCase);
```
```sh
['ASABENEH', 'MATHIAS', 'ELIAS', 'BROOK']
```
```js
const countries = [
"Albania",
"Bolivia",
"Canada",
"Denmark",
"Ethiopia",
"Finland",
"Germany",
"Hungary",
"Ireland",
"Japan",
"Kenya",
];
const countriesToUpperCase = countries.map((country) => country.toUpperCase());
console.log(countriesToUpperCase);
/*
// Función flecha
const countriesToUpperCase = countries.map((country) => {
return country.toUpperCase();
})
//Función flecha de return explícita
const countriesToUpperCase = countries.map(country => country.toUpperCase());
*/
```
```sh
['ALBANIA', 'BOLIVIA', 'CANADA', 'DENMARK', 'ETHIOPIA', 'FINLAND', 'GERMANY', 'HUNGARY', 'IRELAND', 'JAPAN', 'KENYA']
```
```js
const countriesFirstThreeLetters = countries.map((country) =>
country.toUpperCase().slice(0, 3)
);
```
```sh
 ["ALB", "BOL", "CAN", "DEN", "ETH", "FIN", "GER", "HUN", "IRE", "JAP", "KEN"]
```
### filter
_Filter_: Filtra los elementos que cumplen las condiciones de filtrado y devuelve un nuevo array.
```js
//Filtrar los países que contienen land
const countriesContainingLand = countries.filter((country) =>
country.includes("land")
);
console.log(countriesContainingLand);
```
```sh
['Finland', 'Ireland']
```
```js
const countriesEndsByia = countries.filter((country) => country.endsWith("ia"));
console.log(countriesEndsByia);
```
```sh
['Albania', 'Bolivia','Ethiopia']
```
```js
const countriesHaveFiveLetters = countries.filter(
(country) => country.length === 5
);
console.log(countriesHaveFiveLetters);
```
```sh
['Japan', 'Kenya']
```
```js
const scores = [
{ name: "Asabeneh", score: 95 },
{ name: "Lidiya", score: 98 },
{ name: "Mathias", score: 80 },
{ name: "Elias", score: 50 },
{ name: "Martha", score: 85 },
{ name: "John", score: 100 },
];
const scoresGreaterEighty = scores.filter((score) => score.score > 80);
console.log(scoresGreaterEighty);
```
```sh
[{name: 'Asabeneh', score: 95}, { name: 'Lidiya', score: 98 },{name: 'Martha', score: 85},{name: 'John', score: 100}]
```
### reduce
_reduce_: Reduce toma una función callback. La función callback toma como parámetro el acumulador, el valor actual y opcional el valor inicial y retorna un único valor. Es una buena práctica definir un valor inicial para el valor del acumulador. Si no especificamos este parámetro, por defecto el acumulador obtendrá el `primer valor` del array. Si nuestro array es un _array vacío_, entonces `Javascript` lanzará un error.
```js
arr.reduce((acc, cur) => {
// algunas operaciones van aquí antes de devolver un valor
return;
}, initialValue);
```
```js
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum);
```
```js
15;
```
### every
_every_: Comprueba si todos los elementos son similares en un aspecto. Devuelve un booleano
```js
const names = ["Asabeneh", "Mathias", "Elias", "Brook"];
const areAllStr = names.every((name) => typeof name === "string"); // ¿Son todas strings?
console.log(areAllStr);
```
```sh
true
```
```js
const bools = [true, true, true, true];
const areAllTrue = bools.every((b) => b === true); // ¿Son todas true?
console.log(areAllTrue); // true
```
```sh
true
```
### find
_find_: Retorna el primer elemento que cumple la condición
```js
const ages = [24, 22, 25, 32, 35, 18];
const age = ages.find((age) => age < 20);
console.log(age);
```
```js
18;
```
```js
const names = ["Asabeneh", "Mathias", "Elias", "Brook"];
const result = names.find((name) => name.length > 7);
console.log(result);
```
```sh
Asabeneh
```
```js
const scores = [
{ name: "Asabeneh", score: 95 },
{ name: "Mathias", score: 80 },
{ name: "Elias", score: 50 },
{ name: "Martha", score: 85 },
{ name: "John", score: 100 },
];
const score = scores.find((user) => user.score > 80);
console.log(score);
```
```sh
{ name: "Asabeneh", score: 95 }
```
### findIndex
_findIndex_: Retorna la posición del primer elemento que cumple la condición
```js
const names = ["Asabeneh", "Mathias", "Elias", "Brook"];
const ages = [24, 22, 25, 32, 35, 18];
const result = names.findIndex((name) => name.length > 7);
console.log(result); // 0
const age = ages.findIndex((age) => age < 20);
console.log(age); // 5
```
### some
_some_: Comprueba si algunos de los elementos son similares en un aspecto. Retorna un booleano
```js
const names = ["Asabeneh", "Mathias", "Elias", "Brook"];
const bools = [true, true, true, true];
const areSomeTrue = bools.some((b) => b === true);
console.log(areSomeTrue); //true
```
```js
const areAllStr = names.some((name) => typeof name === "number"); // ¿Son todas strings ?
console.log(areAllStr); // false
```
### sort
_sort_: El método "sort" ordena los elementos del array de forma ascendente o descendente. Por defecto, el método **_sort()_** ordena los valores como strings. Esto funciona bien para los elementos del array de strings pero no para los números. Si los valores numéricos se ordenan como strings y nos da un resultado erróneo. El método de Sort modifica el array original. Se recomienda copiar los datos originales antes de empezar a utilizar el método _sort_.
#### Ordenar los valores strings
```js
const products = ["Milk", "Coffee", "Sugar", "Honey", "Apple", "Carrot"];
console.log(products.sort()); // ['Apple', 'Carrot', 'Coffee', 'Honey', 'Milk', 'Sugar']
//Ahora la matriz original de productos también está ordenada
```
#### Ordenar valores numéricos
Como puede ver en el ejemplo de abajo, el 100 fue el primero después de ser clasificado en orden ascendente. Ordenar convierte los elementos en string , ya que '100' y otros números comparados, 1 que el principio del string '100' se convirtió en el más pequeño. Para evitar esto, utilizamos una función de callback de comparación dentro del método sort, que devuelve un negativo, un cero o un positivo.
```js
const numbers = [9.81, 3.14, 100, 37];
// El uso del método sort para ordenar los elementos numéricos proporciona un resultado erróneo.
console.log(numbers.sort()); //[100, 3.14, 37, 9.81]
numbers.sort(function (a, b) {
return a - b;
});
console.log(numbers); // [3.14, 9.81, 37, 100]
numbers.sort(function (a, b) {
return b - a;
});
console.log(numbers); //[100, 37, 9.81, 3.14]
```
#### Ordenar arrays de objetos
Siempre que ordenamos objetos en un array, utilizamos la clave del objeto para comparar. Veamos el siguiente ejemplo.
```js
objArr.sort(function (a, b) {
if (a.key < b.key) return -1;
if (a.key > b.key) return 1;
return 0;
});
// o
objArr.sort(function (a, b) {
if (a["key"] < b["key"]) return -1;
if (a["key"] > b["key"]) return 1;
return 0;
});
const users = [
{ name: "Asabeneh", age: 150 },
{ name: "Brook", age: 50 },
{ name: "Eyob", age: 100 },
{ name: "Elias", age: 22 },
];
users.sort((a, b) => {
if (a.age < b.age) return -1;
if (a.age > b.age) return 1;
return 0;
});
console.log(users); // ordenados de forma ascendente
// [{…}, {…}, {…}, {…}]
```
🌕 Lo estás haciendo muy bien. Nunca te rindas porque las grandes cosas llevan su tiempo. Acabas de completar el día 9 de desafíos y llevas nueve pasos de tu camino hacia la grandeza. Ahora haz algunos ejercicios para tu cerebro y para tus músculos.
## 💻 Ejercicios
### Ejercicios: Nivel 1
```js
const countries = ["Finland", "Sweden", "Denmark", "Norway", "IceLand"];
const names = ["Asabeneh", "Mathias", "Elias", "Brook"];
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const products = [
{ product: "banana", price: 3 },
{ product: "mango", price: 6 },
{ product: "potato", price: " " },
{ product: "avocado", price: 8 },
{ product: "coffee", price: 10 },
{ product: "tea", price: "" },
];
```
1. Explique la diferencia entre **_forEach, map, filter, and reduce_**.
2. Defina una función callback antes de utilizarla en forEach, map, filter o reduce.
3. Utiliza **_forEach_** para mostrar con console.log cada país del array de países.
4. Utiliza **_forEach_** para mostrar con console.log cada nombre del array de nombres.
5. Utiliza **_forEach_** para mostrar con console.log cada número del array de números.
6. Utiliza **_map_** para crear un nuevo array cambiando cada país a mayúsculas en el array de países.
7. Utilice **_map_** para crear un array de longitudes de países a partir del array de países.
8. Usa **_map_** para crear un nuevo array cambiando cada número al cuadrado en el array de números.
9. Utilice **_map_** para cambiar cada nombre a mayúsculas en el array de nombres.
10. Utilice **_map_** para asignar el array de productos a sus correspondientes precios.
11. Utilice **_filter_** para filtrar los países que contienen **_land_**.
12. Utilice **_filter_** para filtrar los países que tienen seis caracteres.
13. Utilice **_filter_** para filtrar los países que contengan seis letras o más en el array de países.
14. Utilice **_filter_** para filtrar los países que empiezan por "E";
15. Utilice **_filter_** para filtrar sólo los precios con valores.
16. Declara una función llamada getStringLists que toma un array como parámetro y devuelve un array sólo con elementos string.
17. Usa **_reduce_** para sumar todos los números del array de números.
18. Utiliza **_reduce_** para concatenar todos los países y producir esta frase: **_Estonia, Finland, Sweden, Denmark, Norway, y IceLand son países del norte de Europa_**
19. Explique la diferencia entre **_some_** y **_every_**
20. Utilice **_some_** para comprobar si la longitud de algunos nombres es superior a siete en el array de nombres.
21. Utilice **_every_** para comprobar si todos los países contienen la palabra land.
22. Explique la diferencia entre **_find_** y **_findIndex_**.
23. Utilice **_find_** para encontrar el primer país que contenga sólo seis letras en el array de países.
24. Utilice **_findIndex_** para encontrar la posición del primer país que contenga sólo seis letras en el array de países.
25. Utilice **_findIndex_** para encontrar la posición de **_Norway_** si no existe en el array obtendrá -1.
26. Utilice **_findIndex_** para encontrar la posición de **_Russia_** si no existe en el array obtendrá -1.
### Ejercicios: Nivel 2
1. Encuentre el precio total de los productos encadenando dos o más iteradores de matrices (por ejemplo, arr.map(callback).filter(callback).reduce(callback)).
1. Encuentre la suma del precio de los productos usando sólo reduce(callback)).
1. Declara una función llamada **_categorizeCountries_** que retorna un array de países que tienen algún patrón común (encuentras el array de países en este repositorio como countries.js(ej 'land', 'ia', 'island','stan')).
1. Cree una función que retorne un array de objetos, que es la letra y el número de veces que la letra usa para empezar el nombre de un país.
1. Declara una función **_getFirstTenCountries_** y retorna un array de diez países. Utiliza diferente programación funcional para trabajar en el array countries.js.
1. Declara una función **_getLastTenCountries_** que devuelve los últimos diez países del array de países.
1. Encuentre qué _letra_ se utiliza muchas _veces_ como inicial de un nombre de país del array de países (ej. Finland, Fiji, France etc)
### Ejercicios: Nivel 3
1. Utiliza la información de los países, en la carpeta de datos. Ordena los países por nombre, por capital, por población
1. \*\*\* Encuentre las 10 lenguas más habladas:
````js
// El resultado debería ser el siguiente
console.log(mostSpokenLanguages(countries, 10))
[
{country: 'English',count:91},
{country: 'French',count:45},
{country: 'Arabic',count:25},
{country: 'Spanish',count:24},
{country:'Russian',count:9},
{country:'Portuguese', count:9},
{country:'Dutch',count:8},
{country:'German',count:7},
{country:'Chinese',count:5},
{country:'Swahili',count:4}
]
// El resultado debería ser el siguiente
console.log(mostSpokenLanguages(countries, 3))
[
{country: 'English',count: 91},
{country: 'French',count: 45},
{country: 'Arabic',count: 25},
]```
````
1. \*\*\* Utilice el archivo countries_data.js para crear una función que cree los diez países más poblados.
````js
console.log(mostPopulatedCountries(countries, 10))
[
{country: 'China', population: 1377422166},
{country: 'India', population: 1295210000},
{country: 'United States of America', population: 323947000},
{country: 'Indonesia', population: 258705000},
{country: 'Brazil', population: 206135893},
{country: 'Pakistan', population: 194125062},
{country: 'Nigeria', population: 186988000},
{country: 'Bangladesh', population: 161006790},
{country: 'Russian Federation', population: 146599183},
{country: 'Japan', population: 126960000}
]
console.log(mostPopulatedCountries(countries, 3))
[
{country: 'China', population: 1377422166},
{country: 'India', population: 1295210000},
{country: 'United States of America', population: 323947000}
]
```
````
1. \*\*\* Intenta desarrollar un programa que calcule la medida de tendencia central de una muestra(mean, median, mode) y medida de la variabilidad(range, variance, standard deviation). Además de esas medidas, encuentre el mínimo, el máximo, el recuento, el porcentaje y la distribución de frecuencias de la muestra. Puede crear un objeto llamado estadísticas y crear todas las funciones que hacen cálculos estadísticos como método para el objeto estadísticas. Comprueba el resultado que aparece a continuación.
```js
const ages = [31, 26, 34, 37, 27, 26, 32, 32, 26, 27, 27, 24, 32, 33, 27, 25, 26, 38, 37, 31, 34, 24, 33, 29, 26]
console.log('Count:', statistics.count()) // 25
console.log('Sum: ', statistics.sum()) // 744
console.log('Min: ', statistics.min()) // 24
console.log('Max: ', statistics.max()) // 38
console.log('Range: ', statistics.range() // 14
console.log('Mean: ', statistics.mean()) // 30
console.log('Median: ',statistics.median()) // 29
console.log('Mode: ', statistics.mode()) // {'mode': 26, 'count': 5}
console.log('Variance: ',statistics.var()) // 17.5
console.log('Standard Deviation: ', statistics.std()) // 4.2
console.log('Variance: ',statistics.var()) // 17.5
console.log('Frequency Distribution: ',statistics.freqDist()) # [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)]
```
```sh
console.log(statistics.describe())
Count: 25
Sum: 744
Min: 24
Max: 38
Range: 14
Mean: 30
Median: 29
Mode: (26, 5)
Variance: 17.5
Standard Deviation: 4.2
Frequency Distribution: [(20.0, 26), (16.0, 27), (12.0, 32), (8.0, 37), (8.0, 34), (8.0, 33), (8.0, 31), (8.0, 24), (4.0, 38), (4.0, 29), (4.0, 25)]
```
🎉 ¡FELICITACIONES! 🎉
[<< Día 8](../dia_08_Objetos/dia_08_objetos.md) | [Day 10 >>](../10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md)

22
Spanish/readme.md
Unescape View File

@ -1,4 +1,3 @@
<div align="center">
<h1> 30 Días de JavaScript</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
@ -8,25 +7,24 @@
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Autor:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> Enero de 2020</small>
</sub>
<sub>Autor:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> Enero de 2020</small>
</sub>
<div>
🇬🇧 [English](../readMe.md)
🇪🇸 [Spanish](./readme.md)
🇷🇺 [Russian](../RU/README.md)
🇬🇧 [English](../readMe.md)
🇪🇸 [Spanish](./readme.md)
🇷🇺 [Russian](../RU/README.md)
</div>
</div>
![Thirty Days Of JavaScript](./images/day_1_1.png)
[📔Día 1](#día-1)
- [📔Día 1](#día-1)
- [Introducción](#introducción)
- [Requerimientos](#requerimientos)
@ -92,7 +90,7 @@ Tal vez no lo necesites ahora pero si más adelante. Asi que instala [node.js](h
Luego de que se descargue, haz doble click e instálalo
![Install node](./images/install_node.png)
![Install node](./images/install_node.png)
Puedes comprobar si se ha instalado correctamente abriendo la terminal del ordenador
@ -548,3 +546,5 @@ Cuando ejecutas los archivos en la carpeta Día_1 deberías obtener esto:
Tú tienes 30 años.
🎉 ¡FELICIDADES! 🎉
[Day 2 >>](./dia_02_tipos_de_datos.md)

598
Turkish/16_Day_JSON/16_day_json.md
Unescape View File

@ -0,0 +1,598 @@
<div align="center">
<h1> 30 Days Of JavaScript: JSON</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Author:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> January, 2020</small>
</sub>
</div>
[<< Gün 15](../15_Day_Classes/15_day_classes.md) | [Gün 17 >>](../17_Day_Web_storages/17_day_web_storages.md)
![Thirty Days Of JavaScript](../../images/banners/day_1_16.png)
- [Gün 16](#day-16)
- [JSON](#json)
- [JSON'u JavaScript Nesnesine Dönüştürme](#converting-json-to-javascript-object)
- [JSON.parse()](#jsonparse)
- [JSON.parse() ile bir reviver fonksiyonu kullanma](#using-a-reviver-function-with-jsonparse)
- [Nesneyi JSON'a Dönüştürme](#converting-object-to-json)
- [JSON.stringify ile Filtre Dizisi Kullanma](#using-a-filter-array-with-jsonstringify)
- [Egzersizler](#exercises)
- [Egzersiz Seviye 1](#exercises-level-1)
- [Egzersiz Seviye 2](#exercises-level-2)
- [Egzersiz Seviye 3](#exercises-level-3)
# Gün 16
## JSON
JSON, javascript nesne kavramı anlamına gelir. JSON syntaxı(sözdizim), JavaScript nesne gösterimi sözdiziminden türetilmiştir, ancak JSON biçimi yalnızca metin veya dizedir. JSON, depolama ve taşıma için hafif bir veri formatıdır. JSON, çoğunlukla bir sunucudan bir istemciye veri gönderildiğinde kullanılır. JSON, XML'e göre kullanımı daha kolay bir alternatiftir.
**Örnek:**
```js
{
"users":[
{
"firstName":"Asabeneh",
"lastName":"Yetayeh",
"age":250,
"email":"asab@asb.com"
},
{
"firstName":"Alex",
"lastName":"James",
"age":25,
"email":"alex@alex.com"
},
{
"firstName":"Lidiya",
"lastName":"Tekle",
"age":28,
"email":"lidiya@lidiya.com"
}
]
}
```
Yukarıdaki JSON örneği, normal bir nesneden çok farklı değildir. O zaman, fark nedir? Aradaki fark, bir JSON nesnesinin anahtarının çift tırnaklı olması veya bir dize olması gerektiğidir. JavaScript Object ve JSON, JSON'u Object ve Object'i JSON olarak değiştirebileceğimize çok benzer.
Yukarıdaki örneği daha detaylı görelim, küme paranteziyle başlıyor. Kıvrımlı parantez içinde bir değer dizisine sahip "users" anahtarı vardır. Dizinin içinde farklı nesnelerimiz var ve her nesnenin anahtarı var, her anahtarın çift tırnak işareti olması gerekiyor. Örneğin, sadece firstName yerine "firstNaMe" kullanıyoruz, ancak nesnede anahtarları çift tırnak işaretleri olmadan kullanıyoruz. Bu, bir nesne ile bir JSON arasındaki en büyük farktır. JSON hakkında daha fazla örnek görelim.
**Örnek:**
```js
{
"Alex": {
"email": "alex@alex.com",
"skills": [
"HTML",
"CSS",
"JavaScript"
],
"age": 20,
"isLoggedIn": false,
"points": 30
},
"Asab": {
"email": "asab@asab.com",
"skills": [
"HTML",
"CSS",
"JavaScript",
"Redux",
"MongoDB",
"Express",
"React",
"Node"
],
"age": 25,
"isLoggedIn": false,
"points": 50
},
"Brook": {
"email": "daniel@daniel.com",
"skills": [
"HTML",
"CSS",
"JavaScript",
"React",
"Redux"
],
"age": 30,
"isLoggedIn": true,
"points": 50
},
"Daniel": {
"email": "daniel@alex.com",
"skills": [
"HTML",
"CSS",
"JavaScript",
"Python"
],
"age": 20,
"isLoggedIn": false,
"points": 40
},
"John": {
"email": "john@john.com",
"skills": [
"HTML",
"CSS",
"JavaScript",
"React",
"Redux",
"Node.js"
],
"age": 20,
"isLoggedIn": true,
"points": 50
},
"Thomas": {
"email": "thomas@thomas.com",
"skills": [
"HTML",
"CSS",
"JavaScript",
"React"
],
"age": 20,
"isLoggedIn": false,
"points": 40
},
"Paul": {
"email": "paul@paul.com",
"skills": [
"HTML",
"CSS",
"JavaScript",
"MongoDB",
"Express",
"React",
"Node"
],
"age": 20,
"isLoggedIn": false,
"points": 40
}
}
```
### JSON'u JavaScript Nesnesine Dönüştürme
Çoğunlukla JSON verilerini HTTP yanıtından veya bir dosyadan alırız, ancak JSON'u bir dize olarak saklayabiliriz ve gösterim amacıyla Object olarak değiştirebiliriz. JavaScript'te _JSON_ anahtar sözcüğü _parse()_ ve _stringify()_ yöntemlerine sahiptir. JSON'u bir nesneye dönüştürmek istediğimizde, _JSON.parse()_ kullanarak JSON'u ayrıştırırız. Nesneyi JSON olarak değiştirmek istediğimizde _JSON.stringify()_ kullanırız.
#### JSON.parse()
```js
JSON.parse(json[, reviver])
// json or text , the data
// reviver opsiyonel callback fonksiyonudur
/* JSON.parse(json, (key, value) => {
})
*/
```
```js
const usersText = `{
"users":[
{
"firstName":"Asabeneh",
"lastName":"Yetayeh",
"age":250,
"email":"asab@asb.com"
},
{
"firstName":"Alex",
"lastName":"James",
"age":25,
"email":"alex@alex.com"
},
{
"firstName":"Lidiya",
"lastName":"Tekle",
"age":28,
"email":"lidiya@lidiya.com"
}
]
}`
const usersObj = JSON.parse(usersText, undefined, 4)
console.log(usersObj)
```
### JSON.parse() ile bir reviver fonksiyonu kullanma
Reviver fonksiyonunu formatlayıcı olarak kullanmak için isim ve soyadı değerini formatlamak istediğimiz tuşları koyuyoruz. Diyelim ki, JSON verilerinin ad ve soyadını biçimlendirmekle ilgileniyoruz.
```js
const usersText = `{
"users":[
{
"firstName":"Asabeneh",
"lastName":"Yetayeh",
"age":250,
"email":"asab@asb.com"
},
{
"firstName":"Alex",
"lastName":"James",
"age":25,
"email":"alex@alex.com"
},
{
"firstName":"Lidiya",
"lastName":"Tekle",
"age":28,
"email":"lidiya@lidiya.com"
}
]
}`
const usersObj = JSON.parse(usersText, (key, value) => {
let newValue =
typeof value == 'string' && key != 'email' ? value.toUpperCase() : value
return newValue
})
console.log(usersObj)
```
_JSON.parse()_ kullanımı çok kullanışlıdır. İsteğe bağlı parametreyi geçmenize gerek yok, sadece gerekli parametre ile kullanabilirsiniz ve çok şey başaracaksınız.
### Nesneyi JSON'a Dönüştürme
Nesneyi JSON olarak değiştirmek istediğimizde _JSON.stringify()_ kullanırız. stringify yöntemi, bir gerekli parametre ve iki isteğe bağlı parametre alır. Değiştirici filtre olarak kullanılır ve boşluk bir girintidir. Nesnedeki anahtarlardan herhangi birini filtrelemek istemiyorsak, tanımsız olarak geçebiliriz.
```js
JSON.stringify(obj, replacer, space)
// json or text , the data
// reviver opsiyonel callback fonksiyonudur
```
Aşağıdaki nesneyi bir string değere dönüştürelim. İlk önce tüm anahtarları kullanalım ve ayrıca 4 boşluk girintisine sahip olalım.
```js
const users = {
Alex: {
email: 'alex@alex.com',
skills: ['HTML', 'CSS', 'JavaScript'],
age: 20,
isLoggedIn: false,
points: 30
},
Asab: {
email: 'asab@asab.com',
skills: [
'HTML',
'CSS',
'JavaScript',
'Redux',
'MongoDB',
'Express',
'React',
'Node'
],
age: 25,
isLoggedIn: false,
points: 50
},
Brook: {
email: 'daniel@daniel.com',
skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux'],
age: 30,
isLoggedIn: true,
points: 50
},
Daniel: {
email: 'daniel@alex.com',
skills: ['HTML', 'CSS', 'JavaScript', 'Python'],
age: 20,
isLoggedIn: false,
points: 40
},
John: {
email: 'john@john.com',
skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Redux', 'Node.js'],
age: 20,
isLoggedIn: true,
points: 50
},
Thomas: {
email: 'thomas@thomas.com',
skills: ['HTML', 'CSS', 'JavaScript', 'React'],
age: 20,
isLoggedIn: false,
points: 40
},
Paul: {
email: 'paul@paul.com',
skills: [
'HTML',
'CSS',
'JavaScript',
'MongoDB',
'Express',
'React',
'Node'
],
age: 20,
isLoggedIn: false,
points: 40
}
}
const txt = JSON.stringify(users, undefined, 4)
console.log(txt) // text, JSON- anlamına gelir, çünkü json bir nesnenin string biçimidir.
```
```sh
{
"Alex": {
"email": "alex@alex.com",
"skills": [
"HTML",
"CSS",
"JavaScript"
],
"age": 20,
"isLoggedIn": false,
"points": 30
},
"Asab": {
"email": "asab@asab.com",
"skills": [
"HTML",
"CSS",
"JavaScript",
"Redux",
"MongoDB",
"Express",
"React",
"Node"
],
"age": 25,
"isLoggedIn": false,
"points": 50
},
"Brook": {
"email": "daniel@daniel.com",
"skills": [
"HTML",
"CSS",
"JavaScript",
"React",
"Redux"
],
"age": 30,
"isLoggedIn": true,
"points": 50
},
"Daniel": {
"email": "daniel@alex.com",
"skills": [
"HTML",
"CSS",
"JavaScript",
"Python"
],
"age": 20,
"isLoggedIn": false,
"points": 40
},
"John": {
"email": "john@john.com",
"skills": [
"HTML",
"CSS",
"JavaScript",
"React",
"Redux",
"Node.js"
],
"age": 20,
"isLoggedIn": true,
"points": 50
},
"Thomas": {
"email": "thomas@thomas.com",
"skills": [
"HTML",
"CSS",
"JavaScript",
"React"
],
"age": 20,
"isLoggedIn": false,
"points": 40
},
"Paul": {
"email": "paul@paul.com",
"skills": [
"HTML",
"CSS",
"JavaScript",
"MongoDB",
"Express",
"React",
"Node"
],
"age": 20,
"isLoggedIn": false,
"points": 40
}
}
```
### JSON.stringify ile Filtre Dizisi Kullanma
Şimdi, replacerı filtre olarak kullanalım. Kullanıcı nesnesinin uzun bir anahtar listesi var ama biz sadece birkaçıyla ilgileniyoruz. Örnekte gösterildiği gibi dizide tutmak istediğimiz anahtarları koyuyoruz ve replacer yerine kullanıyoruz.
```js
const user = {
firstName: 'Asabeneh',
lastName: 'Yetayeh',
country: 'Finland',
city: 'Helsinki',
email: 'alex@alex.com',
skills: ['HTML', 'CSS', 'JavaScript', 'React', 'Python'],
age: 250,
isLoggedIn: false,
points: 30
}
const txt = JSON.stringify(user,['firstName', 'lastName', 'country', 'city', 'age'],4)
console.log(txt)
```
```sh
{
"firstName": "Asabeneh",
"lastName": "Yetayeh",
"country": "Finland",
"city": "Helsinki",
"age": 250
}
```
🌕 Sen olağanüstüsün. Artık verileri depolamak veya bir HTTP sunucusu göndermek için kullanabileceğiniz hafif bir veri formatı biliyorsunuz. Büyüklüğe giden yolda 16 adım öndesin. Şimdi beyniniz ve kasınız için bazı egzersizler yapın.
## Egzersizler
```js
const skills = ['HTML', 'CSS', 'JS', 'React','Node', 'Python']
let age = 250;
let isMarried = true
const student = {
firstName:'Asabeneh',
lastName:'Yetayehe',
age:250,
isMarried:true,
skills:['HTML', 'CSS', 'JS', 'React','Node', 'Python', ]
}
const txt = `{
"Alex": {
"email": "alex@alex.com",
"skills": [
"HTML",
"CSS",
"JavaScript"
],
"age": 20,
"isLoggedIn": false,
"points": 30
},
"Asab": {
"email": "asab@asab.com",
"skills": [
"HTML",
"CSS",
"JavaScript",
"Redux",
"MongoDB",
"Express",
"React",
"Node"
],
"age": 25,
"isLoggedIn": false,
"points": 50
},
"Brook": {
"email": "daniel@daniel.com",
"skills": [
"HTML",
"CSS",
"JavaScript",
"React",
"Redux"
],
"age": 30,
"isLoggedIn": true,
"points": 50
},
"Daniel": {
"email": "daniel@alex.com",
"skills": [
"HTML",
"CSS",
"JavaScript",
"Python"
],
"age": 20,
"isLoggedIn": false,
"points": 40
},
"John": {
"email": "john@john.com",
"skills": [
"HTML",
"CSS",
"JavaScript",
"React",
"Redux",
"Node.js"
],
"age": 20,
"isLoggedIn": true,
"points": 50
},
"Thomas": {
"email": "thomas@thomas.com",
"skills": [
"HTML",
"CSS",
"JavaScript",
"React"
],
"age": 20,
"isLoggedIn": false,
"points": 40
},
"Paul": {
"email": "paul@paul.com",
"skills": [
"HTML",
"CSS",
"JavaScript",
"MongoDB",
"Express",
"React",
"Node"
],
"age": 20,
"isLoggedIn": false,
"points": 40
}
}
`
```
### Egzersiz Seviye 1
1. JSON.stringify() kullanarak skills dizisini JSON olarak değiştirin
1. age değerini stringify et
1. isMarried değerini stringify et
1. student nesnesini stringify et
### Egzersiz Seviye 2
1. Öğrenciler nesnesini yalnızca firstName, lastName ve skills özellikleriyle stringify edin
### Egzersiz Seviye 3
1. *txt* JSON'u nesneye ayrıştırın.
2. *txt* içinde saklanan değişkenden birçok skills'e sahip olan kullanıcıyı bulun.
🎉 TEBRİKLER ! 🎉
[<< Gün 15](../15_Day_Classes/15_day_classes.md) | [Gün 17 >>](../17_Day_Web_storages/17_day_web_storages.md)

234
Turkish/17_Day_Web_storages/17_day_web_storages.md
Unescape View File

@ -0,0 +1,234 @@
<div align="center">
<h1> 30 Days Of JavaScript: Web Storages</h1>
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
</a>
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
</a>
<sub>Author:
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
<small> January, 2020</small>
</sub>
</div>
[<< Gün 16](../16_Day_JSON/16_day_json.md) | [Gün 18 >>](../18_Day_Promises/18_day_promises.md)
![Thirty Days Of JavaScript](../../images/banners/day_1_17.png)
- [Gün 17](#day-17)
- [HTML5 Web Storage(Depolama)](#html5-web-storage)
- [sessionStorage](#sessionstorage)
- [localStorage](#localstorage)
- [Web Storages Kullanım Durumu(alanlar)](#use-case-of-web-storages)
- [HTML5 Web Depolama Nesneleri](#html5-web-storage-objects)
- [Öğeyi localStorage'a ayarlama](#setting-item-to-the-localstorage)
- [Öğeyi localStorage'dan alma](#getting-item-from-localstorage)
- [localStorage'ı temizleme](#clearing-the-localstorage)
- [Egzersizler](#exercises)
- [Egzersiz: Seviye 1](#exercises-level-1)
- [Egzersiz: Seviye 2](#exercises-level-2)
- [Egzersiz: Seviye 3](#exercises-level-3)
# Gün 17
## HTML5 Web Storage(Depolama)
Web Depolama (sessionStorage ve localStorage), geleneksel tanımlama bilgilerine göre önemli avantajlar sunan yeni bir HTML5 API'sidir. HTML5'ten önce, uygulama verilerinin her sunucu isteğine dahil olan çerezlerde saklanması gerekiyordu. Web depolaması daha güvenlidir ve büyük miktarda veri web sitesi performansını etkilemeden local(yerel) olarak depolanabilir. Çerezlerin birçok web tarayıcısında veri depolama sınırı, çerez başına yaklaşık 4 KB'dir. Web Storage çok daha büyük verileri (en az 5MB) depolayabiliriz ve asla sunucuya aktarılmaz. Aynı veya bir kaynaktan gelen tüm siteler aynı verileri depolayabilir ve bunlara erişebilir.
Depolanan verilere JavaScript kullanılarak erişilebilir; bu, geleneksel olarak sunucu tarafı programlama ve ilişkisel veritabanlarını içeren birçok şeyi yapmak için istemci tarafı komut dosyası oluşturma yeteneğinden yararlanmanızı sağlar. İki Web Depolama nesnesi vardır:
- sessionStorage
- localStorage
localStorage, sessionStorage'a benzer, ancak localStorage'da depolanan verilerin sona erme süresi olmamasına rağmen, sessionStorage'da depolanan verilerin sayfa oturumu sona erdiğinde, yani sayfa kapatıldığında silinmesi dışında.
localStorage veya sessionStorage'da depolanan verilerin sayfanın protokolüne özel olduğuna dikkat edilmelidir.
Anahtarlar ve değerler her zaman dizelerdir (nesnelerde olduğu gibi tamsayı tuşlarının otomatik olarak dizelere dönüştürüleceğini unutmayın).
![web_storage](../images/web_storage.png)
### sessionStorage
sessionStorage yalnızca tarayıcı sekmesinde veya pencere oturumunda kullanılabilir. Verileri tek bir web sayfası oturumunda depolamak için tasarlanmıştır. Bu, pencere kapatılırsa oturum verilerinin kaldırılacağı anlamına gelir. sessionStorage ve localStorage benzer yöntemlere sahip olduğundan, sadece localStorage'a odaklanacağız.
### localStorage
HTML5 localStorage, son kullanma verisi olmadan tarayıcıda veri depolamak için kullanılan web depolama API'sinin para birimidir. Veriler, tarayıcı kapatıldıktan sonra bile tarayıcıda mevcut olacaktır. localStorage, tarayıcı oturumları arasında bile tutulur. Bu, tarayıcı kapatılıp yeniden açıldığında ve ayrıca sekmeler ve pencereler arasında anında verilerin hala mevcut olduğu anlamına gelir.
Web Depolama verileri, her iki durumda da farklı tarayıcılar arasında mevcut değildir. Örneğin, Firefox'ta oluşturulan depolama nesnelerine tıpkı çerezler gibi Internet Explorer'da erişilemez.
Yerel depolama üzerinde çalışmak için beş yöntem vardır:
_setItem(), getItem(), removeItem(), clear(), key()_
### Web Storages Kullanım Durumu(alanlar)
Web Depolarının bazı kullanım durumları şunlardır:
- verileri geçici olarak depolamak
- kullanıcının alışveriş sepetine koyduğu ürünleri kaydetme
- veriler, sayfa istekleri, birden çok tarayıcı sekmesi arasında ve ayrıca localStorage kullanılarak tarayıcı oturumları arasında kullanılabilir hale getirilebilir
- localStorage kullanılarak tamamen çevrimdışı olarak kullanılabilir
- Web Depolama, sonraki isteklerin sayısını en aza indirmek için istemcide bazı statik veriler depolandığında harika bir performans kazancı olabilir. Görüntüler bile Base64 kodlaması kullanılarak dizelerde saklanabilir.
- kullanıcı kimlik doğrulama yöntemi için kullanılabilir
Yukarıda bahsedilen örnekler için localStorage kullanmak mantıklıdır. O halde sessionStorage'ı ne zaman kullanmamız gerektiğini merak ediyor olabilirsiniz.
Bazı durumlarda, pencere kapanır kapanmaz verilerden kurtulmak istiyoruz. Ya da uygulamanın başka bir pencerede açık olan aynı uygulamaya müdahale etmesini istemiyorsak. Bu senaryolar en iyi şekilde sessionStorage ile sunulur.
Şimdi, bu Web Depolama API'lerinden nasıl yararlanılacağını görelim.
## HTML5 Web Depolama Nesneleri
HTML web depolama, istemcide veri depolamak için iki nesne sağlar:
- window.localStorage - son kullanma tarihi olmayan verileri depolar
- window.sessionStorage - bir oturum için veri depolar (tarayıcı sekmesi kapatıldığında veriler kaybolur) Çoğu modern tarayıcı Web Depolamayı destekler, ancak localStorage ve sessionStorage için tarayıcı desteğini kontrol etmek iyidir. Web Depolama nesneleri için mevcut yöntemleri görelim.
Web Depolama Nesneleri:
- _localStorage_ - localStorage nesnesini görüntülemek için
- _localStorage.clear()_ - localStrogedaki her şeyi kaldırmak için
- _localStorage.setItem()_ - verileri localStorage'da depolamak için. Bir anahtar ve bir değer parametresi alır.
- _localStorage.getItem()_ - localStorage'da depolanan verileri görüntülemek için. Parametre olarak bir anahtar alır.
- _localStorage.removeItem()_ - depolanan öğeyi localStorage'dan kaldırmak için. Parametre olarak bir anahtar alır.
- _localStorage.key()_ - localStorage'da depolanan verileri görüntülemek için. Parametre olarak indeks alır.
![local_storage](../images/local_storage.png)
### Öğeyi localStorage'a ayarlama
Bir localStorage'da saklanacak verileri ayarladığımızda, bir dize olarak saklanacaktır. Bir diziyi veya nesneyi depoluyorsak, orijinal verinin dizi yapısını veya nesne yapısını kaybetmediğimiz sürece, formatı korumak için önce onu dizgelendirmemiz gerekir.
Verileri localStorage'da _localStorage.setItem_ yöntemini kullanarak depolarız.
```js
//syntax
localStorage.setItem('key', 'value')
```
- String ifadeleri localStorage üzerinde saklama
```js
localStorage.setItem('firstName', 'Asabeneh') // değer string olduğundan onu stringleştirmeyiz
console.log(localStorage)
```
```sh
Storage {firstName: 'Asabeneh', length: 1}
```
- Number ifadeleri localStorage üzerinde saklama
```js
localStorage.setItem('age', 200)
console.log(localStorage)
```
```sh
Storage {age: '200', firstName: 'Asabeneh', length: 2}
```
- Bir diziyi localStorage'da depolamak. Bir diziyi, nesneyi veya nesne dizisini depoluyorsak, önce nesneyi dizgelendirmemiz gerekir. Aşağıdaki örneğe bakın.
```js
const skills = ['HTML', 'CSS', 'JS', 'React']
//Biçimi korumak için önce skills dizisinin dizilmesi gerekir.
const skillsJSON = JSON.stringify(skills, undefined, 4)
localStorage.setItem('skills', skillsJSON)
console.log(localStorage)
```
```sh
Storage {age: '200', firstName: 'Asabeneh', skills: 'HTML,CSS,JS,React', length: 3}
```
```js
let skills = [
{ tech: 'HTML', level: 10 },
{ tech: 'CSS', level: 9 },
{ tech: 'JS', level: 8 },
{ tech: 'React', level: 9 },
{ tech: 'Redux', level: 10 },
{ tech: 'Node', level: 8 },
{ tech: 'MongoDB', level: 8 }
]
let skillJSON = JSON.stringify(skills)
localStorage.setItem('skills', skillJSON)
```
- Bir nesneyi localStorage'da depolamak. Nesneleri bir localStorage'a depolamadan önce, nesnenin dizelenmesi gerekir.
```js
const user = {
firstName: 'Asabeneh',
age: 250,
skills: ['HTML', 'CSS', 'JS', 'React']
}
const userText = JSON.stringify(user, undefined, 4)
localStorage.setItem('user', userText)
```
### Öğeyi localStorage'dan alma
_localStorage.getItem()_ yöntemini kullanarak yerel depodan veri alıyoruz..
```js
//syntax
localStorage.getItem('key')
```
```js
let firstName = localStorage.getItem('firstName')
let age = localStorage.getItem('age')
let skills = localStorage.getItem('skills')
console.log(firstName, age, skills)
```
```sh
'Asabeneh', '200', '['HTML','CSS','JS','React']'
```
Gördüğünüz gibi skills string formatında. Normal diziye ayrıştırmak için JSON.parse() kullanalım.
```js
let skills = localStorage.getItem('skills')
let skillsObj = JSON.parse(skills, undefined, 4)
console.log(skillsObj)
```
```sh
['HTML','CSS','JS','React']
```
### localStorage'ı temizleme
Clear yöntemi, yerel depolamada depolanan her şeyi temizleyecektir.
```js
localStorage.clear()
```
🌕 Kararlısınız. Artık Web Depolama biliyorsunuz ve küçük verileri istemci tarayıcılarında nasıl depolayacağınızı biliyorsunuz. Büyüklüğe giden yolda 17 adım öndesin. Şimdi beyniniz ve kasınız için bazı egzersizler yapın.
## Egzersizler
### Egzersiz: Seviye 1
1. Adınızı, soyadınızı, yaşınızı, ülkenizi, şehrinizi tarayıcınızın localStorage'ında saklayın.
### Egzersiz: Seviye 2
1. Bir öğrenci nesnesi oluşturun. Öğrenci nesnesinin adı, soyadı, yaşı, becerileri, ülkesi, kayıtlı anahtarları ve anahtarların değerleri olacaktır. Öğrenci nesnesini tarayıcınızın localStorage'ında saklayın.
### Egzersiz: Seviye 3
1. personAccount adlı bir nesne oluşturun. ad, soyad, gelirler, giderler özelliklerine sahip olup totalIncome, totalExpense, accountInfo,addIncome, addExpense ve accountBalance yöntemlerine sahip olsun. Gelirler bir dizi gelirdir ve tanımı ve giderleri de bir dizi gider ve tanımıdır.
🎉 TEBRİKLER ! 🎉
[<< Gün 16](../16_Day_JSON/16_day_json.md) | [Gün 18 >>](../18_Day_Promises/18_day_promises.md)
Write Preview
Loading…
Cancel
Save