diff --git a/Spanish/dia_05_Arreglos/dia_05_arreglos.md b/Spanish/dia_05_Arreglos/dia_05_arreglos.md index 5cc9ec7..534effc 100644 --- a/Spanish/dia_05_Arreglos/dia_05_arreglos.md +++ b/Spanish/dia_05_Arreglos/dia_05_arreglos.md @@ -14,7 +14,7 @@ -[<< Día 4](../dia_04_Condicionales/dia_04_Condicionales.md) | [Día 6 >>](../06_Day_Loops/06_day_loops.md) +[<< 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) @@ -778,4 +778,4 @@ const webTechs = [ 🎉 ¡Felicitaciones! 🎉 -[<< Day 4](../dia_04_Condicionales/dia_04_Condicionales.md) | [Day 6 >>](../06_Day_Loops/06_day_loops.md) +[<< Day 4](../dia_04_Condicionales/dia_04_Condicionales.md) | [Day 6 >>](../dia_06_Bucles/dia_06_bucles.md) diff --git a/Spanish/dia_06_Bucles/dia_06_bucles.md b/Spanish/dia_06_Bucles/dia_06_bucles.md new file mode 100644 index 0000000..70d3c9b --- /dev/null +++ b/Spanish/dia_06_Bucles/dia_06_bucles.md @@ -0,0 +1,481 @@ +
+

30 Días de JavaScript: Bucles

+ + + + + Twitter Follow + + +Autor: +Asabeneh Yetayeh
+ Enero, 2020 + + +
+ +[<< 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) diff --git a/Spanish/dia_07_Funciones/dia_07_funciones.md b/Spanish/dia_07_Funciones/dia_07_funciones.md new file mode 100644 index 0000000..aaf820f --- /dev/null +++ b/Spanish/dia_07_Funciones/dia_07_funciones.md @@ -0,0 +1,702 @@ +
+

30 Días de JavaScript: Funciones

+ + + + + Twitter Follow + + +Autor: +Asabeneh Yetayeh
+ Enero, 2020 + + +
+ +[<< 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) diff --git a/Spanish/dia_08_Objetos/dia_08_objetos.md b/Spanish/dia_08_Objetos/dia_08_objetos.md new file mode 100644 index 0000000..88a1e9d --- /dev/null +++ b/Spanish/dia_08_Objetos/dia_08_objetos.md @@ -0,0 +1,592 @@ +
+

30 Días de JavaScript: Objetos

+ + + + + Twitter Follow + + +Autor: +Asabeneh Yetayeh
+ Enero, 2020 + + +
+ +[<< 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) diff --git a/Spanish/dia_09_Funciones_De_Orden_Superior/dia_09_funciones_de_orden_superior.md b/Spanish/dia_09_Funciones_De_Orden_Superior/dia_09_funciones_de_orden_superior.md new file mode 100644 index 0000000..b5b2b38 --- /dev/null +++ b/Spanish/dia_09_Funciones_De_Orden_Superior/dia_09_funciones_de_orden_superior.md @@ -0,0 +1,707 @@ +
+

30 Días De JavaScript: Función De Orden Superior

+ + + + + Twitter Follow + + +Autor: +Asabeneh Yetayeh
+ Enero, 2020 + + +
+ +[<< Día 8](../dia_08_Objetos/dia_08_objetos.md) | [Día 10 >>](../dia_10_Sets_y_Maps/dia_10_sets_y_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 >>](../dia_10_Sets_y_Maps/dia_10_sets_y_maps.md) diff --git a/Spanish/dia_10_Sets_y_Maps/dia_10_sets_y_maps.md b/Spanish/dia_10_Sets_y_Maps/dia_10_sets_y_maps.md new file mode 100644 index 0000000..827ee3f --- /dev/null +++ b/Spanish/dia_10_Sets_y_Maps/dia_10_sets_y_maps.md @@ -0,0 +1,436 @@ +
+

30 Días de JavaScript: Sets y Maps

+ + + + + Twitter Follow + + +Autor: +Asabeneh Yetayeh
+ Enero, 2020 + + +
+ +[<< Día 9](../dia_09_Funciones_De_Orden_Superior/dia_09_funciones_de_orden_superior.md) | [Día 11>>](../dia_11_Desestructuracion_y_Spreading/dia_11_desestructuracion_y_spreading.md) + +![Day 10](../images/banners/day_1_10.png) + +- [Día 10](#día-10) + - [Set](#set) + - [Creación de set vacío](#creación-de-set-vacío) + - [Creación de set a partir de array](#creación-de-set-a-partir-de-array) + - [Añadir un elemento a set](#añadir-un-elemento-a-set) + - [Borrar un elemento a set](#borrar-un-elemento-a-set) + - [Comprobación de un elemento en set](#comprobación-de-un-elemento-en-set) + - [Limpiar set](#limpiar-set) + - [Unión de sets](#unión-de-sets) + - [Intersección de sets](#intersección-de-sets) + - [Diferencia de sets](#diferencia-de-sets) + - [Map](#map) + - [Creación de un Map vacío](#creación-de-un-map-vacío) + - [Creación de un Map a partir de un array](#creación-de-un-map-a-partir-de-un-array) + - [Añadir valores a Map](#añadir-valores-a-map) + - [Obtención de un valor de Map](#obtención-de-un-valor-de-map) + - [Comprobar key en Map](#comprobar-key-en-map) + - [Ejercicios](#ejercicios) + - [Ejercicios:Nivel 1](#ejerciciosnivel-1) + - [Ejercicios:Nivel 2](#ejerciciosnivel-2) + - [Ejercicios:Nivel 3](#ejerciciosnivel-3) + +# Día 10 + +## Set + +Set (conjunto) es una colección de elementos. Set sólo puede contener elementos únicos. +Veamos cómo crear set en la sección siguiente. + +### Creación de set vacío + +```js +const companies = new Set(); +console.log(companies); +``` + +```sh +Set(0) {} +``` + +### Creación de set a partir de array + +```js +const languages = [ + "English", + "Finnish", + "English", + "French", + "Spanish", + "English", + "French", +]; + +const setOfLanguages = new Set(languages); +console.log(setOfLanguages); +``` + +```sh +Set(4) {"English", "Finnish", "French", "Spanish"} +``` + +Set es un objeto iterable y podemos iterar a través de cada elemento. + +```js +const languages = [ + "English", + "Finnish", + "English", + "French", + "Spanish", + "English", + "French", +]; + +const setOfLanguages = new Set(languages); + +for (const language of setOfLanguages) { + console.log(language); +} +``` + +```sh + English + Finnish + French + Spanish +``` + +### Añadir un elemento a set + +```js +const companies = new Set(); // crear set vacío +console.log(companies.size); // 0 + +companies.add("Google"); // añadir un elemento a set +companies.add("Facebook"); +companies.add("Amazon"); +companies.add("Oracle"); +companies.add("Microsoft"); +console.log(companies.size); // 5 elements in set +console.log(companies); +``` + +```sh +Set(5) {"Google", "Facebook", "Amazon", "Oracle", "Microsoft"} +``` + +También podemos utilizar el bucle para añadir elementos a set. + +```js +const companies = ["Google", "Facebook", "Amazon", "Oracle", "Microsoft"]; +setOfCompanies = new Set(); +for (const company of companies) { + setOfCompanies.add(company); +} +``` + +```sh +Set(5) {"Google", "Facebook", "Amazon", "Oracle", "Microsoft"} + +``` + +### Borrar un elemento a set + +Podemos eliminar un elemento de set utilizando un método de eliminación. + +```js +console.log(companies.delete("Google")); +console.log(companies.size); // 4 elementos en set +``` + +### Comprobación de un elemento en set + +El método has puede ayudar a saber si un determinado elemento existe en set. + +```js +console.log(companies.has("Apple")); // false +console.log(companies.has("Facebook")); // true +``` + +### Limpiar set + +Elimina todos los elementos de set. + +```js +companies.clear(); +console.log(companies); +``` + +```sh +Set(0) {} +``` + +Vea el ejemplo siguiente para aprender a utilizar set. + +```js +const languages = [ + "English", + "Finnish", + "English", + "French", + "Spanish", + "English", + "French", +]; +const langSet = new Set(languages); +console.log(langSet); // Set(4) {"English", "Finnish", "French", "Spanish"} +console.log(langSet.size); // 4 + +const counts = []; +const count = {}; + +for (const l of langSet) { + const filteredLang = languages.filter((lng) => lng === l); + console.log(filteredLang); // ["English", "English", "English"] + counts.push({ lang: l, count: filteredLang.length }); +} +console.log(counts); +``` + +```js +[ + { lang: "English", count: 3 }, + { lang: "Finnish", count: 1 }, + { lang: "French", count: 2 }, + { lang: "Spanish", count: 1 }, +]; +``` + +Otros casos de uso de set. Por ejemplo, para contar elementos únicos en un array. + +```js +const numbers = [5, 3, 2, 5, 5, 9, 4, 5]; +const setOfNumbers = new Set(numbers); + +console.log(setOfNumbers); +``` + +```sh +Set(5) {5, 3, 2, 9, 4} +``` + +### Unión de sets + +Para encontrar la unión de dos sets se puede utilizar el operador de dispersión. Busquemos la unión del set A y el set B (A U B) + +```js +let a = [1, 2, 3, 4, 5]; +let b = [3, 4, 5, 6]; +let c = [...a, ...b]; + +let A = new Set(a); +let B = new Set(b); +let C = new Set(c); + +console.log(C); +``` + +```sh +Set(6) {1, 2, 3, 4, 5,6} +``` + +### Intersección de sets + +Para encontrar la intersección de dos sets se puede utilizar un filtro. Vamos a encontrar la intersección del set A y el set B (A ∩ B) + +```js +let a = [1, 2, 3, 4, 5]; +let b = [3, 4, 5, 6]; + +let A = new Set(a); +let B = new Set(b); + +let c = a.filter((num) => B.has(num)); +let C = new Set(c); + +console.log(C); +``` + +```sh +Set(3) {3, 4, 5} +``` + +### Diferencia de sets + +Para encontrar la diferencia entre dos sets se puede utilizar un filtro. Vamos a encontrar la diferencia del set A y el set B (A \ B) + +```js +let a = [1, 2, 3, 4, 5]; +let b = [3, 4, 5, 6]; + +let A = new Set(a); +let B = new Set(b); + +let c = a.filter((num) => !B.has(num)); +let C = new Set(c); + +console.log(C); +``` + +```sh +Set(2) {1, 2} +``` + +## Map + +### Creación de un Map vacío + +```js +const map = new Map(); +console.log(map); +``` + +```sh +Map(0) {} +``` + +### Creación de un Map a partir de un array + +```js +countries = [ + ["Finland", "Helsinki"], + ["Sweden", "Stockholm"], + ["Norway", "Oslo"], +]; +const map = new Map(countries); +console.log(map); +console.log(map.size); +``` + +```sh +Map(3) {"Finland" => "Helsinki", "Sweden" => "Stockholm", "Norway" => "Oslo"} +3 +``` + +### Añadir valores a Map + +```js +const countriesMap = new Map(); +console.log(countriesMap.size); // 0 +countriesMap.set("Finland", "Helsinki"); +countriesMap.set("Sweden", "Stockholm"); +countriesMap.set("Norway", "Oslo"); +console.log(countriesMap); +console.log(countriesMap.size); +``` + +```sh +Map(3) {"Finland" => "Helsinki", "Sweden" => "Stockholm", "Norway" => "Oslo"} +3 +``` + +### Obtención de un valor de Map + +```js +console.log(countriesMap.get("Finland")); +``` + +```sh +Helsinki +``` + +### Comprobar key en Map + +Comprueba si una key existe en un map usando el método _has_. Retorna _true_ o _false_. + +```js +console.log(countriesMap.has("Finland")); +``` + +```sh +true +``` + +Obtención de todos los valores de map usando un bucle + +```js +for (const country of countriesMap) { + console.log(country); +} +``` + +```sh +(2) ["Finland", "Helsinki"] +(2) ["Sweden", "Stockholm"] +(2) ["Norway", "Oslo"] +``` + +```js +for (const [country, city] of countriesMap) { + console.log(country, city); +} +``` + +```sh +Finland Helsinki +Sweden Stockholm +Norway Oslo +``` + +🌕 Has conseguido un gran logro, eres imparable. ¡Sigue adelante! Acabas de completar los desafíos del día 10 y llevas 10 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 a = [4, 5, 8, 9]; +const b = [3, 4, 5, 7]; +const countries = ["Finland", "Sweden", "Norway"]; +``` + +1. crear un set vacío +2. Crear un set que contenga de 0 a 10 utilizando el bucle +3. Eliminar un elemento de set +4. Limpia set +5. Crear un set de 5 elementos string a partir de un array +6. Crear un map de países y el número de caracteres de un país + +### Ejercicios:Nivel 2 + +1. Encontrar a unión b +2. Encontrar a intersección b +3. Encontrar a con b + +### Ejercicios:Nivel 3 + +1. Cuántos idiomas hay en el archivo de objetos de países. + +1. \*\*\* Utiliza los datos de los países para encontrar las 10 lenguas más habladas: + +```js +// El resultado debería ser el siguiente +console.log(mostSpokenLanguages(countries, 10))[ + ({ English: 91 }, + { French: 45 }, + { Arabic: 25 }, + { Spanish: 24 }, + { Russian: 9 }, + { Portuguese: 9 }, + { Dutch: 8 }, + { German: 7 }, + { Chinese: 5 }, + { Swahili: 4 }, + { Serbian: 4 }) +]; + +// El resultado debería ser el siguiente +console.log(mostSpokenLanguages(countries, 3))[ + ({ English: 91 }, { French: 45 }, { Arabic: 25 }) +]; +``` + +🎉 ¡Felicitaciones! 🎉 + +[<< Día 9](../dia_09_Funciones_De_Orden_Superior/dia_09_funciones_de_orden_superior.md) | [Día 11 >>](../dia_11_Desestructuracion_y_Spreading/dia_11_desestructuracion_y_spreading.md) diff --git a/Spanish/dia_11_Desestructuracion_y_Spreading/dia_11_desestructuracion_y_spreading.md b/Spanish/dia_11_Desestructuracion_y_Spreading/dia_11_desestructuracion_y_spreading.md new file mode 100644 index 0000000..20e20a6 --- /dev/null +++ b/Spanish/dia_11_Desestructuracion_y_Spreading/dia_11_desestructuracion_y_spreading.md @@ -0,0 +1,695 @@ +
+

30 Días de JavaScript: Desestructuración y Spreading

+ + + + + Twitter Follow + + +Autor: +Asabeneh Yetayeh
+ Enero, 2020 + + +
+ +[<< Día 10](../dia_10_Sets_y_Maps/dia_10_sets_y_maps.md) | [Día 12>>](../dia_12_Expresiones_Regulares/dia_12_expresiones_regulares.md) + +![Day 11](../images/banners/day_1_11.png) + +- [Day 11](#día-11) + - [Desestructuración y Spread](#desestructuración-y-spread) + - [Desestructuración de Arrays](#desestructuración-de-arrays) + - [Desestructuración durante la iteración](#desestructuración-durante-la-iteración) + - [Desestructuración de objetos](#desestructuración-de-objetos) + - [Renombrar durante la estructuración](#renombrar-durante-la-estructuración) + - [Parámetro de objeto sin desestructuración](#parámetro-de-objeto-sin-desestructuración) + - [Parámetro de objeto con desestructuración](#parámetro-de-objeto-con-desestructuración) + - [Desestructuración del objeto durante la iteración](#desestructuración-del-objeto-durante-la-iteración) + - [Operador Spread o Rest](#operador-spread-o-rest) + - [Operador Spread para obtener el resto de elementos del array](#operador-spread-para-obtener-el-resto-de-elementos-del-array) + - [Spread operator to copy array](#spread-operator-to-copy-array) + - [Spread operator to copy object](#spread-operator-to-copy-object) + - [Operador Spread con función flecha](#operador-spread-con-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 11 + +## Desestructuración y Spread + +La desestructuración es una forma de desempaquetar arrays y objetos y asignarlos a una variable distinta. + +### Desestructuración de Arrays + +```js +const numbers = [1, 2, 3]; +let [numOne, numTwo, numThree] = numbers; + +console.log(numOne, numTwo, numThree); +``` + +```sh + 1 2 3 +``` + +```js +const names = ["Asabeneh", "Brook", "David", "John"]; +let [firstPerson, secondPerson, thirdPerson, fourthPerson] = names; + +console.log(firstPerson, secondPerson, thirdPerson, fourthPerson); +``` + +```sh +Asabeneh Brook David John +``` + +```js +const scientificConstants = [2.72, 3.14, 9.81, 37, 100]; +let [e, pi, gravity, bodyTemp, boilingTemp] = scientificConstants; + +console.log(e, pi, gravity, bodyTemp, boilingTemp); +``` + +```sh +2.72 3.14 9.81 37 100 +``` + +```js +const fullStack = [ + ["HTML", "CSS", "JS", "React"], + ["Node", "Express", "MongoDB"], +]; +const [frontEnd, backEnd] = fullStack; + +console.log(frontEnd); +console.log(backEnd); +``` + +```sh +["HTML", "CSS", "JS", "React"] +["Node", "Express", "MongoDB"] +``` + +Si queremos omitir uno de los valores del array utilizamos una coma adicional. La coma ayuda a omitir el valor en ese índice específico. + +```js +const numbers = [1, 2, 3]; +let [numOne, , numThree] = numbers; //2 es omitido + +console.log(numOne, numThree); +``` + +```sh +1 3 +``` + +```js +const names = ["Asabeneh", "Brook", "David", "John"]; +let [, secondPerson, , fourthPerson] = names; // primera y tercera persona es omitido + +console.log(secondPerson, fourthPerson); +``` + +```sh +Brook John +``` + +Podemos utilizar el valor por defecto en caso de que el valor del array para ese índice sea undefined: + +```js +const names = [undefined, "Brook", "David"]; +let [ + firstPerson = "Asabeneh", + secondPerson, + thirdPerson, + fourthPerson = "John", +] = names; + +console.log(firstPerson, secondPerson, thirdPerson, fourthPerson); +``` + +```sh +Asabeneh Brook David John +``` + +No podemos asignar una variable a todos los elementos del array. Podemos desestructurar algunos de los primeros y podemos obtener los restantes como array utilizando el operador spread(...). + +```js +const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; +let [num1, num2, num3, ...rest] = nums; + +console.log(num1, num2, num3); +console.log(rest); +``` + +```sh +1 2 3 +[4, 5, 6, 7, 8, 9, 10] +``` + +### Desestructuración durante la iteración + +```js +const countries = [ + ["Finland", "Helsinki"], + ["Sweden", "Stockholm"], + ["Norway", "Oslo"], +]; + +for (const [country, city] of countries) { + console.log(country, city); +} +``` + +```sh +Finland Helsinki +Sweden Stockholm +Norway Oslo +``` + +```js +const fullStack = [ + ["HTML", "CSS", "JS", "React"], + ["Node", "Express", "MongoDB"], +]; + +for (const [first, second, third] of fullStack) { + console.log(first, second, third); +} +``` + +```sh +HTML CSS JS +Node Express MongoDB +``` + +### Desestructuración de objetos + +Cuando desestructuremos el nombre de la variable que usamos para desestructurar debe ser exactamente el mismo que la clave o propiedad del objeto. Vea el ejemplo siguiente. + +```js +const rectangle = { + width: 20, + height: 10, + area: 200, +}; +let { width, height, area, perimeter } = rectangle; + +console.log(width, height, area, perimeter); +``` + +```sh +20 10 200 undefined +``` + +### Renombrar durante la estructuración + +```js +const rectangle = { + width: 20, + height: 10, + area: 200, +}; +let { width: w, height: h, area: a, perimeter: p } = rectangle; + +console.log(w, h, a, p); +``` + +```sh +20 10 200 undefined +``` + +Si la clave no se encuentra en el objeto, la variable se asignará a undefined. A veces la clave puede no estar en el objeto, en ese caso podemos dar un valor por defecto durante la declaración. Vea el ejemplo. + +```js +const rectangle = { + width: 20, + height: 10, + area: 200, +}; +let { width, height, area, perimeter = 60 } = rectangle; + +console.log(width, height, area, perimeter); //20 10 200 60 +//Modifiquemos el objeto: anchura a 30 y perímetro a 80 +``` + +```js +const rectangle = { + width: 30, + height: 10, + area: 200, + perimeter: 80, +}; +let { width, height, area, perimeter = 60 } = rectangle; +console.log(width, height, area, perimeter); //30 10 200 80 +``` + +Desestructuración de keys como parámetros de una función. Creemos una función que toma un objeto rectángulo y devuelve el perímetro de un rectángulo. + +### Parámetro de objeto sin desestructuración + +```js +// Sin desestructuración +const rect = { + width: 20, + height: 10, +}; +const calculatePerimeter = (rectangle) => { + return 2 * (rectangle.width + rectangle.height); +}; + +console.log(calculatePerimeter(rect)); // 60 +//with destructuring +``` + +```js +//Otro ejemplo +const person = { + firstName: "Asabeneh", + lastName: "Yetayeh", + age: 250, + country: "Finland", + job: "Instructor and Developer", + skills: [ + "HTML", + "CSS", + "JavaScript", + "React", + "Redux", + "Node", + "MongoDB", + "Python", + "D3.js", + ], + languages: ["Amharic", "English", "Suomi(Finnish)"], +}; +// Creemos una función que proporcione información sobre el objeto persona sin desestructurar + +const getPersonInfo = (obj) => { + const skills = obj.skills; + const formattedSkills = skills.slice(0, -1).join(", "); + const languages = obj.languages; + const formattedLanguages = languages.slice(0, -1).join(", "); + + personInfo = `${obj.firstName} ${obj.lastName} lives in ${ + obj.country + }. He is ${obj.age} years old. He is an ${ + obj.job + }. He teaches ${formattedSkills} and ${ + skills[skills.length - 1] + }. He speaks ${formattedLanguages} and a little bit of ${languages[2]}.`; + + return personInfo; +}; + +console.log(getPersonInfo(person)); +``` + +### Parámetro de objeto con desestructuración + +```js +const calculatePerimeter = ({ width, height }) => { + return 2 * (width + height); +}; + +console.log(calculatePerimeter(rect)); // 60 +``` + +```js +// Creemos una función que proporcione información sobre el objeto persona con desestructuración +const getPersonInfo = ({ + firstName, + lastName, + age, + country, + job, + skills, + languages, +}) => { + const formattedSkills = skills.slice(0, -1).join(", "); + const formattedLanguages = languages.slice(0, -1).join(", "); + + personInfo = `${firstName} ${lastName} lives in ${country}. He is ${age} years old. He is an ${job}. He teaches ${formattedSkills} and ${ + skills[skills.length - 1] + }. He speaks ${formattedLanguages} and a little bit of ${languages[2]}.`; + + return personInfo; +}; +console.log(getPersonInfo(person)); +/* +Asabeneh Yetayeh lives in Finland. He is 250 years old. He is an Instructor and Developer. He teaches HTML, CSS, JavaScript, React, Redux, Node, MongoDB, Python and D3.js. He speaks Amharic, English and a little bit of Suomi(Finnish) +*/ +``` + +### Desestructuración del objeto durante la iteración + +```js +const todoList = [ + { + task: "Prepare JS Test", + time: "4/1/2020 8:30", + completed: true, + }, + { + task: "Give JS Test", + time: "4/1/2020 10:00", + completed: false, + }, + { + task: "Assess Test Result", + time: "4/1/2020 1:00", + completed: false, + }, +]; + +for (const { task, time, completed } of todoList) { + console.log(task, time, completed); +} +``` + +```sh +Prepare JS Test 4/1/2020 8:30 true +Give JS Test 4/1/2020 10:00 false +Assess Test Result 4/1/2020 1:00 false +``` + +### Operador Spread o Rest + +Cuando desestructuramos un array utilizamos el operador spread(...) para obtener el rest de elementos como array. Además utilizamos el operador spread para repartir los elementos del array en otro array. + +### Operador Spread para obtener el resto de elementos del array + +```js +const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] +let [num1, num2, num3, ...rest] = nums +​ +console.log(num1, num2, num3) +console.log(rest) +``` + +```sh +1 2 3 +[4, 5, 6, 7, 8, 9, 10] +``` + +```js +const countries = [ + "Germany", + "France", + "Belgium", + "Finland", + "Sweden", + "Norway", + "Denmark", + "Iceland", +]; + +let [gem, fra, , ...nordicCountries] = countries; + +console.log(gem); +console.log(fra); +console.log(nordicCountries); +``` + +```sh +Germany +France +["Finland", "Sweden", "Norway", "Denmark", "Iceland"] +``` + +### Spread operator to copy array + +```js +const evens = [0, 2, 4, 6, 8, 10]; +const evenNumbers = [...evens]; + +const odds = [1, 3, 5, 7, 9]; +const oddNumbers = [...odds]; + +const wholeNumbers = [...evens, ...odds]; + +console.log(evenNumbers); +console.log(oddNumbers); +console.log(wholeNumbers); +``` + +```sh +[0, 2, 4, 6, 8, 10] +[1, 3, 5, 7, 9] +[0, 2, 4, 6, 8, 10, 1, 3, 5, 7, 9] +``` + +```js +const frontEnd = ["HTML", "CSS", "JS", "React"]; +const backEnd = ["Node", "Express", "MongoDB"]; +const fullStack = [...frontEnd, ...backEnd]; + +console.log(fullStack); +``` + +```sh +["HTML", "CSS", "JS", "React", "Node", "Express", "MongoDB"] +``` + +### Spread operator to copy object + +Podemos copiar un objeto utilizando un operador spread + +```js +const user = { + name: "Asabeneh", + title: "Programmer", + country: "Finland", + city: "Helsinki", +}; + +const copiedUser = { ...user }; +console.log(copiedUser); +``` + +```sh +{name: "Asabeneh", title: "Programmer", country: "Finland", city: "Helsinki"} +``` + +Modificar o cambiar el objeto mientras se copia + +```js +const user = { + name: "Asabeneh", + title: "Programmer", + country: "Finland", + city: "Helsinki", +}; + +const copiedUser = { ...user, title: "instructor" }; +console.log(copiedUser); +``` + +```sh +{name: "Asabeneh", title: "instructor", country: "Finland", city: "Helsinki"} +``` + +#### Operador Spread con función flecha + +Siempre que queramos escribir una función flecha que tome un número ilimitado de argumentos, utilizaremos un operador spread. Si utilizamos un operador spread como parámetro, el argumento pasado cuando invocamos una función cambiará a un array. + +```js +const sumAllNums = (...args) => { + console.log(args); +}; + +sumAllNums(1, 2, 3, 4, 5); +``` + +```sh +[1, 2, 3, 4, 5] + +``` + +```js +const sumAllNums = (...args) => { + let sum = 0; + for (const num of args) { + sum += num; + } + return sum; +}; + +console.log(sumAllNums(1, 2, 3, 4, 5)); +``` + +```sh +15 + +``` + +🌕 Has logrado bastante hasta ahora. Ahora, tu nivel de JavaScript es intermedio alto. ¡Sigue adelante! Acabas de completar los desafíos del día 11 y llevas 11 pasos de tu camino a la grandeza. Ahora haz algunos ejercicios para tu cerebro y para tus músculos. + +## Ejercicios + +### Ejercicios: Nivel 1 + +```js +const constants = [2.72, 3.14, 9.81, 37, 100]; +const countries = ["Finland", "Estonia", "Sweden", "Denmark", "Norway"]; +const rectangle = { + width: 20, + height: 10, + area: 200, + perimeter: 60, +}; +const users = [ + { + name: "Brook", + scores: 75, + skills: ["HTM", "CSS", "JS"], + age: 16, + }, + { + name: "Alex", + scores: 80, + skills: ["HTM", "CSS", "JS"], + age: 18, + }, + { + name: "David", + scores: 75, + skills: ["HTM", "CSS"], + age: 22, + }, + { + name: "John", + scores: 85, + skills: ["HTML"], + age: 25, + }, + { + name: "Sara", + scores: 95, + skills: ["HTM", "CSS", "JS"], + age: 26, + }, + { + name: "Martha", + scores: 80, + skills: ["HTM", "CSS", "JS"], + age: 18, + }, + { + name: "Thomas", + scores: 90, + skills: ["HTM", "CSS", "JS"], + age: 20, + }, +]; +``` + +1. Desestructurar y asignar los elementos del array de constantes para e, pi, gravedad, humanBodyTemp, waterBoilingTemp. +2. Desestructurar y asignar los elementos del array de países a fin, est, sw, den, nor +3. Desestructurar el objeto rectángulo por sus propiedades o keys. + +### Ejercicios: Nivel 2 + +1. Iterar a través del array de usuarios y obtener todas las keys del objeto utilizando la desestructuración +2. Encuentra las personas que tienen menos de dos habilidades + +### Ejercicios: Nivel 3 + +1. Desestructurar el objeto países imprimir nombre, capital, población e idiomas de todos los países +2. Un desarrollador junior estructura el nombre del estudiante, las habilidades y la puntuación en un array de arrays que puede no ser fácil de leer. Desestructure la siguiente matriz nombre a nombre, array de habilidades a habilidades, array de puntuaciones a puntuaciones, puntuación de JavaScript a jsScore y puntuación de React a reactScore variable en una línea. + +```js +const student = ["David", ["HTM", "CSS", "JS", "React"], [98, 85, 90, 95]]; +console.log(name, skills, jsScore, reactScore); +``` + +```sh +David (4) ["HTM", "CSS", "JS", "React"] 90 95 +``` + +3. Escribe una función llamada _convertArrayToObject_ que pueda convertir el array en un objeto estructurado. + +```js +const students = [ + ["David", ["HTM", "CSS", "JS", "React"], [98, 85, 90, 95]], + ["John", ["HTM", "CSS", "JS", "React"], [85, 80, 85, 80]], +]; + +console.log(convertArrayToObject(students))[ + ({ + name: "David", + skills: ["HTM", "CSS", "JS", "React"], + scores: [98, 85, 90, 95], + }, + { + name: "John", + skills: ["HTM", "CSS", "JS", "React"], + scores: [85, 80, 85, 80], + }) +]; +``` + +4. Copie el objeto estudiante a newStudent sin mutar el objeto original. En el nuevo objeto añade lo siguiente ? + +- Añadir Bootstrap con el nivel 8 a los conjuntos de habilidades de front end +- Añadir Express con nivel 9 a los conjuntos de habilidades del back end +- Añadir SQL con nivel 8 a los conjuntos de habilidades de la base de datos +- Añadir SQL sin nivel a los conjuntos de habilidades de ciencia de datos + +```js +const student = { + name: "David", + age: 25, + skills: { + frontEnd: [ + { skill: "HTML", level: 10 }, + { skill: "CSS", level: 8 }, + { skill: "JS", level: 8 }, + { skill: "React", level: 9 }, + ], + backEnd: [ + { skill: "Node", level: 7 }, + { skill: "GraphQL", level: 8 }, + ], + dataBase: [{ skill: "MongoDB", level: 7.5 }], + dataScience: ["Python", "R", "D3.js"], + }, +}; +``` + +La salida del objeto copiado debería tener este aspecto: + +```js + { + name: 'David', + age: 25, + skills: { + frontEnd: [ + {skill: 'HTML',level: 10}, + {skill: 'CSS',level: 8}, + {skill: 'JS',level: 8}, + {skill: 'React',level: 9}, + {skill: 'BootStrap',level: 8} + ], + backEnd: [ + {skill: 'Node',level: 7}, + {skill: 'GraphQL',level: 8}, + {skill: 'Express',level: 9} + ], + dataBase: [ + { skill: 'MongoDB',level: 7.5}, + { skill: 'SQL',level: 8} + ], + dataScience: ['Python','R','D3.js','SQL'] + } + } + +``` + +🎉 ¡FELICITACIONES! 🎉 + +[<< Día 10](../dia_10_Sets_y_Maps/dia_10_sets_y_maps.md) | [Día 12 >>](../dia_12_Expresiones_Regulares/dia_12_expresiones_regulares.md) diff --git a/Spanish/dia_12_Expresiones_Regulares/dia_12_expresiones_regulares.md b/Spanish/dia_12_Expresiones_Regulares/dia_12_expresiones_regulares.md new file mode 100644 index 0000000..36d8c62 --- /dev/null +++ b/Spanish/dia_12_Expresiones_Regulares/dia_12_expresiones_regulares.md @@ -0,0 +1,540 @@ +
+

30 Días de JavaScript: Expresiones Regulares

+ + + + + Twitter Follow + + +Autor: +Asabeneh Yetayeh
+ Enero, 2020 + + +
+ +[<< Día 11](../dia_11_Desestructuracion_y_Spreading/dia_11_desestructuracion_y_spreading.md) | [Día 13>>](../dia_13_Metodos_del_Objeto_Console/dia_13_metodos_del_objeto_console.md) + +![Thirty Days Of JavaScript](../images/banners/day_1_12.png) + +- [📘 Día 12](#📘-día-12) + - [Expresiones Regulares](#expresiones-regulares) + - [Parámetros RegExp](#parámetros-regexp) + - [Patrón](#patrón) + - [Banderas](#banderas) + - [Creación de un patrón con el constructor RegExp](#creación-de-un-patrón-con-el-constructor-regexp) + - [Creación de un patrón sin el constructor RegExp](#creación-de-un-patrón-sin-el-constructor-regexp) + - [Métodos del objeto RegExp](#métodos-del-objeto-regexp) + - [Pruebas de coincidencia](#pruebas-de-coincidencia) + - [Array que contiene todas las coincidencias](#array-que-contiene-todas-las-coincidencias) + - [Sustitución de una subcadena](#sustitución-de-una-subcadena) + - [Corchetes](#corchetes) + - [Caracter Escape (\\) en RegExp](#caracter-escape--en-regexp) + - [Una o más veces(+)](#una-o-más-veces) + - [Punto(.)](#punto) + - [Cero o más veces(\*)](#cero-o-más-veces) + - [Cero o una vez (?)](#cero-o-una-vez) + - [Cuantificador en RegExp](#cuantificador-en-regexp) + - [Caret ^](#caret) + - [Coincidencia exacta](#coincidencia-exacta) + - [💻 Ejercicios](#💻-ejercicios) + - [Ejercicios: Nivel 1](#ejercicios-nivel-1) + - [Ejercicios: Nivel 2](#ejercicios-nivel-2) + - [Ejercicios: Nivel 3](#ejercicios-nivel-3) + +# 📘 Día 12 + +## Expresiones Regulares + +Una expresión regular o RegExp es un pequeño lenguaje de programación que ayuda a encontrar patrones en los datos. Una RegExp puede ser utilizada para comprobar si algún patrón existe en diferentes tipos de datos. Para usar RegExp en JavaScript, podemos usar el constructor RegExp o podemos declarar un patrón RegExp usando dos barras inclinadas seguidas de una bandera. Podemos crear un patrón de dos maneras. + +Para declarar una cadena de caracteres utilizamos una comilla simple, una comilla doble y un signo de retroceso; para declarar una expresión regular utilizamos dos barras inclinadas y una bandera opcional. La bandera puede ser g, i, m, s, u o y. + +### Parámetros RegExp + +Una expresión regular toma dos parámetros. Un patrón de búsqueda requerido y una bandera opcional. + +#### Patrón + +Un patrón puede ser un texto o cualquier forma de patrón que tenga algún tipo de similitud. Por ejemplo, la palabra "spam" en un correo electrónico podría ser un patrón que nos interesa buscar en un correo electrónico o un formato de número de teléfono puede ser de nuestro interés para buscar. + +#### Banderas + +Las banderas son parámetros opcionales en una expresión regular que determinan el tipo de búsqueda. Veamos algunas de las banderas: + +- g: una bandera global que significa buscar un patrón en todo el texto +- i: indicador de insensibilidad a las mayúsculas y minúsculas (busca tanto en minúsculas como en mayúsculas) +- m: multilínea + +### Creación de un patrón con el constructor RegExp + +Declarar una expresión regular sin bandera global y sin distinguir entre mayúsculas y minúsculas. + +```js +// sin bandera +let pattern = "love"; +let regEx = new RegExp(pattern); +``` + +Declarar una expresión regular con un indicador global y un indicador de insensibilidad a las mayúsculas y minúsculas. + +```js +let pattern = "love"; +let flag = "gi"; +let regEx = new RegExp(pattern, flag); +``` + +Declarar un patrón regex usando el objeto RegExp. Escribir el patrón y la bandera dentro del constructor RegExp + +```js +let regEx = new RegExp("love", "gi"); +``` + +### Creación de un patrón sin el constructor RegExp + +Declarar una expresión regular con un indicador global y un indicador de insensibilidad a las mayúsculas y minúsculas. + +```js +let regEx = /love/gi; +``` + +La expresión regular anterior es la misma que creamos con el constructor RegExp + +```js +let regEx = new RegExp("love", "gi"); +``` + +### Métodos del objeto RegExp + +Veamos algunos de los métodos RegExp + +#### Pruebas de coincidencia + +_test()_:Comprueba si hay una coincidencia en una cadena. Devuelve verdadero o falso. + +```js +const str = "I love JavaScript"; +const pattern = /love/; +const result = pattern.test(str); +console.log(result); +``` + +```sh +true +``` + +#### Array que contiene todas las coincidencias + +_match()_:Retorna un array que contiene todas las coincidencias, incluyendo los grupos de captura, o null si no se encuentra ninguna coincidencia. +Si no utilizamos una bandera global, match() retorna un array que contiene el patrón, el índice, la entrada y el grupo. + +```js +const str = "I love JavaScript"; +const pattern = /love/; +const result = str.match(pattern); +console.log(result); +``` + +```sh +["love", index: 2, input: "I love JavaScript", groups: undefined] +``` + +```js +const str = "I love JavaScript"; +const pattern = /love/g; +const result = str.match(pattern); +console.log(result); +``` + +```sh +["love"] +``` + +_search()_: Busca una coincidencia en una cadena. Devuelve el índice de la coincidencia, o -1 si la búsqueda falla. + +```js +const str = "I love JavaScript"; +const pattern = /love/g; +const result = str.search(pattern); +console.log(result); +``` + +```sh +2 +``` + +#### Sustitución de una subcadena + +_replace()_: Ejecuta una búsqueda de una coincidencia en una cadena, y reemplaza la subcadena coincidente con una subcadena de reemplazo. + +```js +const txt = + "Python es el lenguaje más bello que ha creado el ser humano.\ +Recomiendo python para un primer lenguaje de programación"; + +matchReplaced = txt.replace(/Python|python/, "JavaScript"); +console.log(matchReplaced); +``` + +```sh +JavaScript es el lenguaje más bello que ha creado el ser humano. Recomiendo python como primer lenguaje de programación +``` + +```js +const txt = + "Python es el lenguaje más bello que ha creado el ser humano.\ +Recomiendo python para un primer lenguaje de programación"; + +matchReplaced = txt.replace(/Python|python/g, "JavaScript"); +console.log(matchReplaced); +``` + +```sh +JavaScript es el lenguaje más bello que ha creado el ser humano. Recomiendo JavaScript para un primer lenguaje de programación +``` + +```js +const txt = + "Python es el lenguaje más bello que ha creado el ser humano.\ +Recomiendo python para un primer lenguaje de programación"; + +matchReplaced = txt.replace(/Python/gi, "JavaScript"); +console.log(matchReplaced); +``` + +```sh +JavaScript es el lenguaje más bello que ha creado el ser humano. Recomiendo JavaScript para un primer lenguaje de programación +``` + +```js +const txt = + "%So%y p%r%%of%%es%or%a% y m%e %% enc%an%ta en%se%ña%r.\ +N%o h%a%y n%a%d%a mas g%r%at%if%icante q%ue e%d%uc%a%r y c%a%p%ac%i%ta%r %a l%a g%e%n%t%e.\ +L%a e%n%%señ%anza m%e %p%ar%ec%e ma%s% i%n%te%r%esa%nt%e que %cu%alq%uie%r %otro t%ra%ba%jo.\ +E%s%t%o te mo%ti%v%a a s%er p%ro%fe%sor."; + +matches = txt.replace(/%/g, ""); +console.log(matches); +``` + +```sh +Soy profesora y me encanta enseñar. No hay nada más gratificante que educar y capacitar a la gente. La enseñanza me parece más interesante que cualquier otro trabajo. ¿Esto te motiva a ser profesor? +``` + +- []: Un conjunto de caracteres + - [a-c] significa, a o b o c + - [a-z] significa, cualquier letra de la a a la z + - [A-Z] significa, cualquier carácter de la A a la Z + - [0-3] significa, 0 o 1 o 2 o 3 + - [0-9] significa cualquier número del 0 al 9 + - [A-Za-z0-9] cualquier carácter que sea de la a a la z, de la A a la Z, del 0 al 9 +- \\: utiliza para evadir caracteres especiales + - \d significa: coincide cuando el string contiene dígitos (numeros del 0-9) + - \D significa: coincide cuando el string no contiene dígitos +- . : cualquier carácter excepto la nueva línea (\n) +- ^: comienza con + - r'^substring' eg r'^love', una frase que comienza con la palabra love + - r'[^abc] significa no a, no b, no c. +- $: termina con + - r'substring$' eg r'love$', la frase termina con una palabra love +- \*: cero o más veces + - r'[a]\*' significa un opcional o puede ocurrir muchas veces. +- +: una o más veces + - r'[a]+' significa al menos una o más veces +- ?: cero o una vez + - r'[a]?' significa cero veces o una vez +- \b: Buscador de palabras, coincide con el principio o el final de una palabra +- {3}: Exactamente 3 caracteres +- {3,}: Al menos 3 caracteres +- {3,8}: De 3 a 8 caracteres +- |: O bien + - r'apple|banana' significa tanto una manzana como un plátano +- (): Capturar y agrupar + +![Regular Expression cheat sheet](../images/regex.png) + +Usemos un ejemplo para aclarar los metacaracteres anteriores + +### Corchetes + +Usemos el corchete para incluir las minúsculas y las mayúsculas + +```js +const pattern = "[Aa]pple"; // este corchete significa A o a +const txt = + "Apple and banana are fruits. An old cliche says an apple a day keeps the doctor way has been replaced by a banana a day keeps the doctor far far away. "; +const matches = txt.match(pattern); + +console.log(matches); +``` + +```sh +["Apple", index: 0, input: "Apple and banana are fruits. An old cliche says an apple a day keeps the doctor way has been replaced by a banana a day keeps the doctor far far away.", groups: undefined] + +``` + +```js +const pattern = /[Aa]pple/g; // este corchete significa A o a +const txt = + "Apple and banana are fruits. An old cliche says an apple a day a doctor way has been replaced by a banana a day keeps the doctor far far away. "; +const matches = txt.match(pattern); + +console.log(matches); +``` + +```sh +["Apple", "apple"] +``` + +Si queremos buscar la banana, escribimos el patrón de la siguiente manera: + +```js +const pattern = /[Aa]pple|[Bb]anana/g; // este corchete significa A o a +const txt = + "Apple and banana are fruits. An old cliche says an apple a day a doctor way has been replaced by a banana a day keeps the doctor far far away. Banana is easy to eat too."; +const matches = txt.match(pattern); + +console.log(matches); +``` + +```sh +["Apple", "banana", "apple", "banana", "Banana"] +``` + +Utilizando el corchete y el operador or , conseguimos extraer Apple, apple, Banana y banana. + +### Caracter Escape (\\) en RegExp + +```js +const pattern = /\d/g; // d es un carácter especial que significa dígitos +const txt = "This regular expression example was made in January 12, 2020."; +const matches = txt.match(pattern); + +console.log(matches); // ["1", "2", "2", "0", "2", "0"], esto es lo que no queremos +``` + +```js +const pattern = /\d+/g; // d es un carácter especial que significa dígitos +const txt = "This regular expression example was made in January 12, 2020."; +const matches = txt.match(pattern); + +console.log(matches); // ["12", "2020"], esto es lo que no queremos +``` + +### Una o más veces(+) + +```js +const pattern = /\d+/g; // d es un carácter especial que significa dígitos +const txt = "This regular expression example was made in January 12, 2020."; +const matches = txt.match(pattern); +console.log(matches); // ["12", "2020"], esto es lo que no queremos +``` + +### Punto(.) + +```js +const pattern = /[a]./g; // este corchete significa a y . significa cualquier carácter excepto nueva línea +const txt = "Apple and banana are fruits"; +const matches = txt.match(pattern); + +console.log(matches); // ["an", "an", "an", "a ", "ar"] +``` + +```js +const pattern = /[a].+/g; // . cualquier carácter, + cualquier carácter una o más veces +const txt = "Apple and banana are fruits"; +const matches = txt.match(pattern); + +console.log(matches); // ['and banana are fruits'] +``` + +### Cero o más veces(\*) + +Cero o muchas veces. El patrón puede no ocurrir o puede ocurrir muchas veces. + +```js +const pattern = /[a].*/g; //. cualquier carácter, + cualquier carácter una o más veces +const txt = "Apple and banana are fruits"; +const matches = txt.match(pattern); + +console.log(matches); // ['and banana are fruits'] +``` + +### Cero o una vez (?) + +Cero o una vez. El patrón puede no ocurrir o puede ocurrir una vez. + +```js +const txt = + "I am not sure if there is a convention how to write the word e-mail.\ +Some people write it email others may write it as Email or E-mail."; +const pattern = /[Ee]-?mail/g; // ? significa que es opcional +matches = txt.match(pattern); + +console.log(matches); // ["e-mail", "email", "Email", "E-mail"] +``` + +### Cuantificador en RegExp + +Podemos especificar la longitud de la subcadena que buscamos en un texto, utilizando una llave. Veamos cómo utilizar los cuantificadores RegExp. Imaginemos que estamos interesados en una subcadena cuya longitud es de 4 caracteres + +```js +const txt = "This regular expression example was made in December 6, 2019."; +const pattern = /\\b\w{4}\b/g; // palabras de cuatro caracteres exactamente +const matches = txt.match(pattern); +console.log(matches); //['This', 'made', '2019'] +``` + +```js +const txt = "This regular expression example was made in December 6, 2019."; +const pattern = /\b[a-zA-Z]{4}\b/g; // palabras de cuatro caracteres exactos sin números +const matches = txt.match(pattern); +console.log(matches); //['This', 'made'] +``` + +```js +const txt = "This regular expression example was made in December 6, 2019."; +const pattern = /\d{4}/g; // un número y exactamente cuatro dígitos +const matches = txt.match(pattern); +console.log(matches); // ['2019'] +``` + +```js +const txt = "This regular expression example was made in December 6, 2019."; +const pattern = /\d{1,4}/g; // 1 to 4 +const matches = txt.match(pattern); +console.log(matches); // ['6', '2019'] +``` + +### Caret ^ + +- Comienza con + +```js +const txt = "This regular expression example was made in December 6, 2019."; +const pattern = /^This/; // ^ significa que comienza con +const matches = txt.match(pattern); +console.log(matches); // ['This'] +``` + +- Negación + +```js +const txt = "This regular expression example was made in December 6, 2019."; +const pattern = /[^A-Za-z,. ]+/g; // ^ en un conjunto de caracteres significa negación, no de la A a la Z, no de la a a la z, sin espacio, sin coma y sin punto +const matches = txt.match(pattern); +console.log(matches); // ["6", "2019"] +``` + +### Coincidencia exacta + +Debe tener ^ que empieza y $ que es el final. + +```js +let pattern = /^[A-Z][a-z]{3,12}$/; +let name = "Asabeneh"; +let result = pattern.test(name); + +console.log(result); // true +``` + +🌕 Estás llegando lejos. Sigue avanzando. Ahora, estás súper cargado con el poder de la expresión regular. Tienes el poder de extraer y limpiar cualquier tipo de texto y puedes dar sentido a los datos no estructurados. Acabas de completar los retos del día 12 y llevas 12 pasos de tu camino a la grandeza. Ahora haz algunos ejercicios para tu cerebro y para tus músculos. + +## 💻 Ejercicios + +### Ejercicios: Nivel 1 + +1. Calcula los ingresos anuales totales de la persona a partir del siguiente texto. 'Gana 4000 euros de sueldo al mes, 10000 euros de bonificación anual, 5500 euros de cursos online al mes'. +1. La posición de algunas partículas en el eje horizontal x -12, -4, -3 y -1 en la dirección negativa, 0 en el origen, 4 y 8 en la dirección positiva. Extrae estos números y encuentra la distancia entre las dos partes más lejanas. + +```js +points = ["-1", "2", "-4", "-3", "-1", "0", "4", "8"]; +sortedPoints = [-4, -3, -1, -1, 0, 2, 4, 8]; +distance = 12; +``` + +1. Escribir un patrón que identifique si una cadena es una variable JavaScript válida + + ```sh + is_valid_variable('first_name') # True + is_valid_variable('first-name') # False + is_valid_variable('1first_name') # False + is_valid_variable('firstname') # True + ``` + +### Ejercicios: Nivel 2 + +1. Escriba una función llamada _tenMostFrequentWords_ que obtenga las diez palabras más frecuentes de una cadena? + + ```js + paragraph = `I love teaching. If you do not love teaching what else can you love. I love Python if you do not love something which can give you all the capabilities to develop an application what else can you love.`; + console.log(tenMostFrequentWords(paragraph)); + ``` + + ```sh + [ + {word:'love', count:6}, + {word:'you', count:5}, + {word:'can', count:3}, + {word:'what', count:2}, + {word:'teaching', count:2}, + {word:'not', count:2}, + {word:'else', count:2}, + {word:'do', count:2}, + {word:'I', count:2}, + {word:'which', count:1}, + {word:'to', count:1}, + {word:'the', count:1}, + {word:'something', count:1}, + {word:'if', count:1}, + {word:'give', count:1}, + {word:'develop',count:1}, + {word:'capabilities',count:1}, + {word:'application', count:1}, + {word:'an',count:1}, + {word:'all',count:1}, + {word:'Python',count:1}, + {word:'If',count:1}] + ``` + + ```js + console.log(tenMostFrequentWords(paragraph, 10)); + ``` + + ```sh + [{word:'love', count:6}, + {word:'you', count:5}, + {word:'can', count:3}, + {word:'what', count:2}, + {word:'teaching', count:2}, + {word:'not', count:2}, + {word:'else', count:2}, + {word:'do', count:2}, + {word:'I', count:2}, + {word:'which', count:1} + ] + ``` + +### Ejercicios: Nivel 3 + +1. Escribe una función que limpie el texto. Limpia el siguiente texto. Después de la limpieza, cuente tres palabras más frecuentes en la cadena. + +```js +sentence = `%I $am@% a %tea@cher%, &and& I lo%#ve %tea@ching%;. There $is nothing; &as& mo@re rewarding as educa@ting &and& @emp%o@wering peo@ple. ;I found tea@ching m%o@re interesting tha@n any other %jo@bs. %Do@es thi%s mo@tivate yo@u to be a tea@cher!?`; +console.log(cleanText(sentence)); +``` + +````sh + I am a teacher and I love teaching There is nothing as more rewarding as educating and empowering people I found teaching more interesting than any other jobs Does this motivate you to be a teacher + ``` +2. Escriba una función que encuentre las palabras más frecuentes. Después de la limpieza, cuente tres palabras más frecuentes en la cadena. + +```js + console.log(mostFrequentWords(cleanedText)) + [{word:'I', count:3}, {word:'teaching', count:2}, {word:'teacher', count:2}] +```` + +🎉 ¡FELICITACIONES! 🎉 + +[<< Día 11](../dia_11_Desestructuracion_y_Spreading/dia_11_desestructuracion_y_spreading.md) | [Día 13 >>](../dia_13_Metodos_del_Objeto_Console/dia_13_metodos_del_objeto_console.md) diff --git a/Spanish/dia_13_Metodos_del_Objeto_Console/dia_13_metodos_del_objeto_console.md b/Spanish/dia_13_Metodos_del_Objeto_Console/dia_13_metodos_del_objeto_console.md new file mode 100644 index 0000000..a599353 --- /dev/null +++ b/Spanish/dia_13_Metodos_del_Objeto_Console/dia_13_metodos_del_objeto_console.md @@ -0,0 +1,358 @@ +
+

30 Días de JavaScript: Métodos del Objeto Console

+ + + + + Twitter Follow + + +Autor: +Asabeneh Yetayeh
+ Enero, 2020 + + +
+ +[<< Día 12](../dia_12_Expresiones_Regulares/dia_12_expresiones_regulares.md) | [Día 14>>](../dia_14_Manejo_de_Errores/dia_14_manejo_de_errores.md) + +![Thirty Days Of JavaScript](../images/banners/day_1_13.png) + +- [Día 13](#día-13) + - [Métodos del Objeto Console](#métodos-del-objeto-console) + - [console.log()](#consolelog) + - [console.warn()](#consolewarn) + - [console.error()](#consoleerror) + - [console.table()](#consoletable) + - [console.time()](#consoletime) + - [console.info()](#consoleinfo) + - [console.assert()](#consoleassert) + - [console.group()](#consolegroup) + - [console.count()](#consolecount) + - [console.clear()](#consoleclear) + - [Ejercicios](#ejercicios) + - [Ejercicios:Nivel 1](#ejerciciosnivel-1) + - [Ejercicios:Nivel 2](#ejerciciosnivel-2) + - [Ejercicios:Nivel 3](#ejerciciosnivel-3) + +# Día 13 + +## Métodos del Objeto Console + +En esta sección, trataremos sobre console y los métodos de los objetos console. Los principiantes generalmente no saben cuál usar: console.log(), document.write() o document.getElementById. + +Usamos métodos de objetos console para mostrar la salida en la consola del navegador y usamos document.write para mostrar la salida en el documento del navegador (view port). Ambos métodos se utilizan únicamente con fines de prueba y depuración. El método console es la herramienta de prueba y depuración más popular en el navegador. Usamos document.getElementById() cuando queremos interactuar con el DOM usando JavaScript. Trataremos el tema del DOM en otra sección. + +Además del famoso método console.log(), console proporciona otros métodos más. + +### console.log() + +Usamos console.log() para mostrar la salida en la consola del navegador. Podemos sustituir valores y también podemos estilizar la salida del registro usando %c. + +- Mostrando la salida en la consola del navegador + +```js +console.log("30 Days of JavaScript"); +``` + +```sh +30 Days of JavaScript +``` + +- Sustitución + +```js +console.log("%d %s of JavaScript", 30, "Days"); +``` + +```sh +30 Days of JavaScript +``` + +- CSS + +Podemos darle estilo al mensaje de registro usando css. Copia el siguiente código y pégalo en la consola del navegador para ver el resultado. + +```js +console.log("%c30 Days Of JavaScript", "color:green"); // la salida del registro es verde +console.log( + "%c30 Days%c %cOf%c %cJavaScript%c", + "color:green", + "", + "color:red", + "", + "color:yellow" +); // salida del registro texto verde rojo y amarillo +``` + +### console.warn() + +Usamos console.warn() para dar avisos en el navegador. Por ejemplo para informar o avisar de la depreciación de la versión de un paquete o de malas prácticas. Copia el siguiente código y pégalo en la consola del navegador para ver los mensajes de advertencia. + +```js +console.warn("This is a warning"); +console.warn( + "You are using React. Do not touch the DOM. Virtual DOM will take care of handling the DOM!" +); +console.warn("Warning is different from error"); +``` + +### console.error() + +El método console.error() muestra un mensaje de error. + +```js +console.error("This is an error message"); +console.error("We all make mistakes"); +``` + +### console.table() + +El método console.table() muestra los datos como una tabla en la consola. Muestra los datos en forma de tabla. El método console.table() toma un argumento requerido data, que debe ser un array o un objeto, y un parámetro adicional opcional columns. + +Empecemos con un simple array. El código siguiente muestra una tabla con dos columnas. Una columna índice para mostrar el índice y una columna valor para mostrar los nombres + +```js +const names = ["Asabeneh", "Brook", "David", "John"]; +console.table(names); +``` + +Comprobemos también el resultado de un objeto. Esto crea una tabla con dos columnas: una columna índice que contiene las claves y una columna valor que contiene los valores del objeto. + +```js +const user = { + name: "Asabeneh", + title: "Programmer", + country: "Finland", + city: "Helsinki", + age: 250, +}; +console.table(user); +``` + +Comprueba el resto de los ejemplos copiando y pegando en la consola del navegador. + +```js +const countries = [ + ["Finland", "Helsinki"], + ["Sweden", "Stockholm"], + ["Norway", "Oslo"], +]; +console.table(countries); +``` + +```js +const users = [ + { + name: "Asabeneh", + title: "Programmer", + country: "Finland", + city: "Helsinki", + age: 250, + }, + { + name: "Eyob", + title: "Teacher", + country: "Sweden", + city: "London", + age: 25, + }, + { + name: "Asab", + title: "Instructor", + country: "Norway", + city: "Oslo", + age: 22, + }, + { + name: "Matias", + title: "Developer", + country: "Denmark", + city: "Copenhagen", + age: 28, + }, +]; +console.table(users); +``` + +### console.time() + +Inicia un temporizador que se puede utilizar para controlar el tiempo que dura una operación. Puedes dar a cada temporizador un nombre único, y puedes tener hasta 10.000 temporizadores funcionando en una página determinada. Cuando llame a console.timeEnd() con el mismo nombre, el navegador mostrará el tiempo, en milisegundos, que ha transcurrido desde que se inició el temporizador. + +```js +const countries = [ + ["Finland", "Helsinki"], + ["Sweden", "Stockholm"], + ["Norway", "Oslo"], +]; + +console.time("Regular for loop"); +for (let i = 0; i < countries.length; i++) { + console.log(countries[i][0], countries[i][1]); +} +console.timeEnd("Regular for loop"); + +console.time("for of loop"); +for (const [name, city] of countries) { + console.log(name, city); +} +console.timeEnd("for of loop"); + +console.time("forEach loop"); +countries.forEach(([name, city]) => { + console.log(name, city); +}); +console.timeEnd("forEach loop"); +``` + +```sh +Finland Helsinki +Sweden Stockholm +Norway Oslo +Regular for loop: 0.34716796875ms +Finland Helsinki +Sweden Stockholm +Norway Oslo +for of loop: 0.26806640625ms +Finland Helsinki +Sweden Stockholm +Norway Oslo +forEach loop: 0.358154296875ms +``` + +De acuerdo con la salida anterior, el bucle for regular es más lento que el bucle for of o forEach. + +### console.info() + +Muestra un mensaje de información en la consola del navegador. + +```js +console.info("30 Days Of JavaScript challenge is trending on Github"); +console.info("30 Days Of fullStack challenge might be released"); +console.info("30 Days Of HTML and CSS challenge might be released"); +``` + +### console.assert() + +El método console.assert() escribe un mensaje de error en la consola si la afirmación es falsa. Si la afirmación es verdadera, no pasa nada. El primer parámetro es una expresión de aserción. Si esta expresión es falsa, se mostrará un mensaje de error de aserción fallida. + +```js +console.assert(4 > 3, "4 is greater than 3"); // no hay resultado +console.assert(3 > 4, "3 is not greater than 4"); // Aserción fallida: 3 no es mayor que 4 + +for (let i = 0; i <= 10; i += 1) { + let errorMessage = `${i} is not even`; + console.log("the # is " + i); + console.assert(i % 2 === 0, { number: i, errorMessage: errorMessage }); +} +``` + +### console.group() + +El console.group() puede ayudar a agrupar diferentes grupos de registro. Copie el siguiente código y péguelo en la consola del navegador para los grupos. + +```js +const names = ["Asabeneh", "Brook", "David", "John"]; +const countries = [ + ["Finland", "Helsinki"], + ["Sweden", "Stockholm"], + ["Norway", "Oslo"], +]; +const user = { + name: "Asabeneh", + title: "Programmer", + country: "Finland", + city: "Helsinki", + age: 250, +}; +const users = [ + { + name: "Asabeneh", + title: "Programmer", + country: "Finland", + city: "Helsinki", + age: 250, + }, + { + name: "Eyob", + title: "Teacher", + country: "Sweden", + city: "London", + age: 25, + }, + { + name: "Asab", + title: "Instructor", + country: "Norway", + city: "Oslo", + age: 22, + }, + { + name: "Matias", + title: "Developer", + country: "Denmark", + city: "Copenhagen", + age: 28, + }, +]; + +console.group("Names"); +console.log(names); +console.groupEnd(); + +console.group("Countries"); +console.log(countries); +console.groupEnd(); + +console.group("Users"); +console.log(user); +console.log(users); +console.groupEnd(); +``` + +### console.count() + +Imprime el número de veces que se llama a console.count(). Toma un parámetro de etiqueta de cadena. Es muy útil para contar el número de veces que se llama a una función. En el siguiente ejemplo, el método console.count() se ejecutará tres veces + +```js +const func = () => { + console.count("Function has been called"); +}; +func(); +func(); +func(); +``` + +```sh +Function has been called: 1 +Function has been called: 2 +Function has been called: 3 +``` + +### console.clear() + +El console.clear() limpia la consola del navegador. + +🌕 Sigue con el buen trabajo. Sigue esforzándote, ¡el cielo es el límite! Acabas de completar el día 13 de desafíos y llevas 13 pasos de tu camino hacia la grandeza. Ahora haz algunos ejercicios para tu cerebro y para tus músculos. + +## Ejercicios + +### Ejercicios:Nivel 1 + +1. Mostrar la matriz de países como una tabla +2. Mostrar el objeto países como una tabla +3. Utilice console.group() para agrupar los registros + +### Ejercicios:Nivel 2 + +1. 10 > 2 \* 10 use console.assert() +2. Escribe un mensaje de advertencia utilizando console.warn() +3. Escribe un mensaje de error utilizando console.error() + +### Ejercicios:Nivel 3 + +1. Comprueba la diferencia de velocidad entre los siguientes bucles: while, for, for of, forEach + +🎉 ¡FELICITACIONES! 🎉 + +[<< Día 12](../dia_12_Expresiones_Regulares/dia_12_expresiones_regulares.md) | [Día 14>>](../dia_14_Manejo_de_Errores/dia_14_manejo_de_errores.md) diff --git a/Spanish/dia_14_Manejo_de_Errores/dia_14_manejo_de_errores.md b/Spanish/dia_14_Manejo_de_Errores/dia_14_manejo_de_errores.md new file mode 100644 index 0000000..70ec130 --- /dev/null +++ b/Spanish/dia_14_Manejo_de_Errores/dia_14_manejo_de_errores.md @@ -0,0 +1,193 @@ +
+

30 Días de JavaScript: Manejo de Errores

+ + + + + Twitter Follow + + +Autor: +Asabeneh Yetayeh
+ Enero, 2020 + + +
+ +[<< Día 13](../dia_13_Metodos_del_Objeto_Console/dia_13_metodos_del_objeto_console.md) | [Día 15>>](..) + +![Thirty Days Of JavaScript](../images/banners/day_1_14.png) + +- [Día 14](#día-14) + - [Manejo de Errores](#manejo-de-errores) + - [Tipo de Error](#tipo-de-error) + - [Ejercicios](#ejercicios) + - [Ejercicios:Nivel 1](#ejerciciosnivel-1) + - [Ejercicios: Nivel 2](#ejerciciosnivel-2) + - [Ejercicios:Nivel 3](#ejerciciosnivel-3) + +# Día 14 + +## Manejo de Errores + +JavaScript es un lenguaje de tipado libre. Algunas veces obtendrá un error en tiempo de ejecución cuando intente acceder a una variable no definida o llamar a una función no definida, etc. + +JavaScript, al igual que python o Java, proporciona un mecanismo de gestión de errores para capturar los errores en tiempo de ejecución mediante el bloque try-catch-finally. + +```js +try { + // código que puede arrojar un error +} catch (err) { + // código a ejecutar si se produce un error +} finally { + // código que se ejecutará independientemente de que se produzca un error o no +} +``` + +**try**: envuelve el código sospechoso que puede arrojar un error en un bloque try. La sentencia try nos permite definir un bloque de código para que se compruebe si hay errores mientras se ejecuta. + +**catch**: escribe código para hacer algo en el bloque catch cuando se produce un error. El bloque catch puede tener parámetros que le darán información sobre el error. El bloque Catch se utiliza para registrar un error o mostrar mensajes específicos al usuario. + +**finally**: El bloque finally se ejecutará siempre, independientemente de que se produzca un error. El bloque finally puede utilizarse para completar la tarea restante o para restablecer las variables que puedan haber cambiado antes de que se produzca el error en el bloque try. + +**Example:** + +```js +try { + let lastName = "Yetayeh"; + let fullName = fistName + " " + lastName; +} catch (err) { + console.log(err); +} +``` + +```sh +ReferenceError: fistName no está definido + at :4:20 +``` + +```js +try { + let lastName = "Yetayeh"; + let fullName = fistName + " " + lastName; +} catch (err) { + console.error(err); // podemos utilizar console.log() o console.error() +} finally { + console.log("In any case I will be executed"); +} +``` + +```sh +ReferenceError: fistName no está definido + at :4:20 +En cualquier caso se ejecutará +``` + +El bloque de captura toma un parámetro. Es habitual pasar e, err o error como parámetro al bloque catch. Este parámetro es un objeto y tiene las claves nombre y mensaje. Utilicemos el nombre y el mensaje. + +```js +try { + let lastName = "Yetayeh"; + let fullName = fistName + " " + lastName; +} catch (err) { + console.log("Name of the error", err.name); + console.log("Error message", err.message); +} finally { + console.log("In any case I will be executed"); +} +``` + +```sh +Name of the error ReferenceError +Error message fistName is not defined +In any case I will be executed +``` + +throw: la sentencia throw nos permite crear un error personalizado. Podemos pasar una cadena, un número, un booleano o un objeto. Utilice la sentencia throw para lanzar una excepción. Cuando se lanza una excepción, la expresión especifica el valor de la excepción. Cada una de las siguientes acciones lanza una excepción: + +```js +throw "Error2"; // genera una excepción con un valor de cadena +throw 42; // genera una excepción con el valor 42 +throw true; // genera una excepción con el valor true +throw new Error("Required"); // genera un objeto de error con el mensaje de Requerido +``` + +```js +const throwErrorExampleFun = () => { + let message; + let x = prompt("Enter a number: "); + try { + if (x == "") throw "empty"; + if (isNaN(x)) throw "not a number"; + x = Number(x); + if (x < 5) throw "too low"; + if (x > 10) throw "too high"; + } catch (err) { + console.log(err); + } +}; +throwErrorExampleFun(); +``` + +### Tipo de Error + +- ReferenceError: Se ha producido una referencia ilegal. Se lanza un ReferenceError si utilizamos una variable que no ha sido declarada. + +```js +let firstName = "Asabeneh"; +let fullName = firstName + " " + lastName; + +console.log(fullName); +``` + +```sh +Uncaught ReferenceError: lastName is not defined + at :2:35 +``` + +- SyntaxError: Se ha producido un error de sintaxis + +```js +let square = 2 x 2 +console.log(square) + +console.log('Hello, world") +``` + +```sh +Uncaught SyntaxError: Unexpected identifier +``` + +- TypeError: Se ha producido un error sobre el tipo + +```js +let num = 10; +console.log(num.toLowerCase()); +``` + +```sh +Uncaught TypeError: num.toLowerCase is not a function + at :2:17 +``` + +Estos son algunos de los errores más comunes a los que te puedes enfrentar cuando escribes un código. Entender los errores puede ayudarte a saber qué errores has cometido y te ayudará a depurar tu código rápidamente. + +🌕 Usted es impecable. Ahora, sabes cómo manejar los errores y puedes escribir una aplicación robusta que maneje entradas inesperadas del usuario. Acabas de completar los desafíos del día 14 y llevas 14 pasos en tu camino hacia la grandeza. Ahora haz algunos ejercicios para tu cerebro y para tus músculos. + +## Ejercicios + +### Ejercicios:Nivel 1 + +Practica + +### Ejercicios:Nivel 2 + +Practica + +### Ejercicios:Nivel 3 + +Practica + +🎉 ¡FELICITACIONES! 🎉 + +[<< Día 13](../dia_13_Metodos_del_Objeto_Console/dia_13_metodos_del_objeto_console.md) | [Día 15>>](..) diff --git a/Turkish/16_Day_JSON/16_day_json.md b/Turkish/16_Day_JSON/16_day_json.md new file mode 100644 index 0000000..11b6459 --- /dev/null +++ b/Turkish/16_Day_JSON/16_day_json.md @@ -0,0 +1,598 @@ +
+

30 Days Of JavaScript: JSON

+ + + + + Twitter Follow + + +Author: +Asabeneh Yetayeh
+ January, 2020 + + +
+ +[<< 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)