Merge pull request #495 from EmmanuelArenas/spanish-translation

Spanish translation day 8 and 9
pull/499/head
Asabeneh 2 years ago committed by GitHub
commit 270b352403
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -14,7 +14,7 @@
</div> </div>
[<< Day 6](../dia_06_Bucles/dia_06_bucles.md) | [Día 8 >>](../08_Day_Objects/08_day_objects.md) [<< 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) ![Thirty Days Of JavaScript](../images/banners/day_1_7.png)
@ -699,4 +699,4 @@ Será cubierto en otra sección.
1. Escriba una función llamada reverseCountries, toma el array de países y primero copia el array y retorna el array original invertido 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! 🎉 🎉 ¡FELICITACIONES! 🎉
[<< Day 6](../dia_06_Bucles/dia_06_bucles.md) | [Day 8 >>](../08_Day_Objects/08_day_objects.md) [<< Day 6](../dia_06_Bucles/dia_06_bucles.md) | [Day 8 >>](../dia_08_Objetos/dia_08_objetos.md)

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

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