Introducción a JavaScript
¿Por qué aprender JavaScript?
¡Hola Mundo! en Mac
¡Hola Mundo! en Windows
Anatomía de una variable
Tipos de datos en JavaScript
Creación de strings
Operadores aritméticos
Conversión de tipos: Type Casting y Coerción
Conversión de tipos explícita e implícita
Estructuras de Control y Lógica
Operadores de comparación
Operadores lógicos
Ejecución condicional: if
Ejercicio: Adivina el número
Ejecución condicional: switch
Loop: for
Loop: for of
Loop: for in
Loop: while
Loop: do while
Funciones y This
Anatomía de una función
Funciones vs Métodos
Funciones puras e impuras
Arrow function y enlace léxico
Contextos de ejecución y scope chain
¿Qué es Closure?
Preguntas a Desarrolladores Senior: ¿Por qué aprender Desarrollo Web?
Manipulación de Arrays
Introducción a Arrays
Mutabilidad e inmutabilidad de Arrays
Modificación básica del final con push( ), pop( )
Iteración con map( ) y forEach( )
Filtrado y reducción con filter( ) y reduce( )
Búsqueda de elementos con find( ) y findIndex( )
Crear copias con slice( )
Spread operator: casos de uso
Programación Orientada a Objetos
Anatomía de un Objeto
Trabajando con objetos en JavaScript
Función constructora
¿Qué es una clase?
Prototipos y herencias
Herencia en la práctica
Prototipos en la práctica
this en JavaScript
Proyecto: Crea una red social
Proyecto: Crea una red social parte 2
Asincronía en JavaScript
¿Cómo funciona el JavaScript Engine?
Promesas en JavaScript
Usando Async y await en JavaScript
For await of
¿Cómo funciona la web?
¿Cómo funciona HTTP?
Método GET en JavaScript
Método POST en JavaScript
Método DELETE en JavaScript
Importancia del id en el método DELETE
ECMAScript 6 y tus siguientes pasos
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
What is the loop for-of method and how does it work?
The loop for-of method is a powerful programming tool that allows you to iterate over iterable objects. Although it may seem complicated at first, its application becomes intuitive once you understand how it works and its practical applications. The name "for-of" is already quite descriptive: it's about traversing element by element of a collection. In this content, I will teach you how to use it effectively.
On what kind of objects is for-of used?
The for-of is used on iterable objects, such as arrays and strings. These are elements that, by their nature, are arranged in the form of a list that we can traverse or iterate through. Thanks to its structure, the for-of allows us to execute code repeatedly for each element present in these collections.
What is the structure of for-of?
To implement a for-of, you must follow a basic structure:
- Start with the reserved word
for. - Add parentheses
(), where a variable representing each element is defined. - Use the term
offollowed by the iterable object you are traversing. - Finally, open braces
{}to include the block of code to be executed for each element.
Here's an example in code:
let basket = ['apple', 'pear', 'orange', 'grape'];
for (let fruit of basket) { console.log(fruit);}In this case, the for-of will traverse through each item in the basket list and print "apple", "pear", "orange" and "grape" in the browser console, one by one.
What are the advantages of using for-of?
- Simplicity and readability: Its syntax is clear and straightforward, making it easy to follow the code.
- Versatility: It can be used for any iterable object, allowing a wide range of applications.
- Avoids common errors: By automatically handling the indexes that control iteration, potential errors are minimized compared to more manual methods.
What are the important things to remember?
- Limitations to iterable objects: Only iterable objects such as arrays and strings can be used, it does not apply to non-iterable objects.
- Practical and specific use: Remember that
for-ofis ideal for cases where you want to access values directly, and not indexes as withfor-in.
Understanding and using for-of is a valuable skill that can significantly improve the efficiency and clarity of your code, so keep practicing and master its use to become an iteration expert!
Contributions 29
Questions 3
Sort by:
El ciclo `for... of` permite operar sobre un *objeto iterable*, es posible que en algún momento te encuentres con un error del estilo [TypeError: 'x' is not iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/is_not_iterable), que nos indica que la estructura que estamos tratando de utilizar en nuestro ciclo no es iterable, es por esto que debemos tener claro lo que hace que un objeto sea iterable.
En esencia, un objeto iterable es aquel que tiene un [protocol de iteración definido](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterator_protocol), los más comunes que encontramos son los Arrays y las Strings. (En lenguaje técnico si el objeto tiene un `Symbol.iterator`, entonces este es iterable)
**OJO 👀** lo que llamamos comunmente en JS como [objetos](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object), esas variables que tienen una estructura `{}`, NO son iterables, para explorar estos objetos, podemos usar el método `for... in` el cual vemos en la siguiente clase!
> 💡 [Aquí encuentras la documentación sobre el ciclo for... of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)
no queda claro como se usa, falta explicación
Los **maps** y **sets** también son objetos iterables, por lo que se podrían usar también el for of en esos tipos de datos.
## Loop For of
El bucle `for...of` en JavaScript es una estructura de control introducida en ECMAScript 6 (ES6) que simplifica la iteración sobre elementos iterables como arrays, strings, sets, maps, entre otros.
A diferencia del bucle `for` tradicional que se basa en índices numéricos, `for...of` recorre cada elemento del iterable directamente, proporcionando una sintaxis más simple y legible.
### Sintaxis del Bucle `for...of`
La sintaxis básica de `for...of` es la siguiente:
`for (variable of iterable) {`
` // Código a ejecutar para cada elemento`
`}`
* **variable**: Una variable que se asigna al valor de cada elemento en cada iteración.
* **iterable**: Un objeto iterable como un array, string, set, map, etc.
### Ejemplo Básico con Array
`let colores = ["rojo", "verde", "azul"];`
`for (let color of colores) {`
` console.log(color);`
`}`
Este ejemplo imprimirá cada color del array `colores` en cada iteración.
### Limitaciones
* **No Accede a Índices Directamente**: A diferencia del bucle `for` tradicional, `for...of` no proporciona acceso directo a los índices del iterable. Si necesitas los índices, puedes usar el método `entries()` en conjunción con `for...of`.
Existe una alternativa a for of, y es **forEach()**.
.
Su estructura es la siguiente, aplicaré el mismo ejemplo de la clase pero adaptado a forEach()...
.
```js
let canasta = ['manzana', 'pera', 'naranja', 'uva'];
canasta.forEach((fruta) => {
console.log(fruta);
});
```
**APUNTES:**
```js
//Declaración de la lista 'canasta' -> array que contiene 5 elementos
let canasta = ["manzana","pera","naranja","uva", "kiwi"];
//Inicialización del contador: se inicializa en 1, se enumera las frutas
let i = 1;
//Este bucle 'for...of' recorre cada elemento del array en cada iteración
for(fruta of canasta){
console.log(`${i}. ${fruta}`);
i++; //Después de imprimir cada fruta 'i' se incrementa en 1 en la siguiente iteración
}
``````js
1. manzana
2. pera
3. naranja
4. uva
5. kiwi
```
Aqui mi prueba con un objeto:
Wow, no conocia que se podia iterar en strings. **Aquí les va un ejemplo:**
.
```js
let abecedario = 'abcdefghijklmnñopqrstuvwxyz';
for (letra of abecedario) {
console.log(letra);
};
```
La sentencia sentencia ***for...of*** ejecuta un bloque de código para cada elemento de un objeto iterable, como lo son: String, Array, objetos similares a array.
Ejemplo:
```js
//for of
let menu = ['pambazo','quesadilla','pizza','tacos']
for (comida of menu){
console.log(comida);
}
```
Es como un
`for object in objects:`
`print(object)`
de python
For of, funciona en objetos iterables como arrays o strings, la diferencia con el for normal
Es que no debes definir contadores, no debes establecer condiciones, el ciclo se lee directamente con for of, es solo para bucles que necesites escribir de forma rapida, y solo permite leer, no ofrece ventajas como saltarse numeros o hacerlo a la inversa como for normal
El bucle `for...of` efectivamente itera sobre objetos iterables como arrays o strings sin necesidad de definir contadores o condiciones de finalización. Esto lo hace más limpio y directo en comparación con el `for` tradicional, donde debes manejar el índice y las condiciones del bucle. En el `for...of`, simplemente declaras la variable para cada elemento y el iterable, facilitando la lectura y reduciendo el riesgo de errores. Es una herramienta útil para simplificar el código en situaciones donde no necesitas el índice.
```js
let semana = ["lunes", "martes", "miercoles", "jueves", "viernes", "sabado", "domingo"]
function escribirDiaDeLaSemana(){
for (dia of semana)
console.log(dia)
}
escribirDiaDeLaSemana()
```
[Javascript for... of Loop](https://www.programiz.com/javascript/for-of)
Ejemplo de como hacerlo con objetos en for of
¿En qué momento se definió a los elementos como "frutas"? Es decir, se asume por default: javascrip sabe que son frutas o, en qué parte del código se determina??
```js
let canasta = ['manzanas','peras','naranjas','uvas','piñas','papayas'];
let i = 0;
for(fruta of canasta){
console.log(`${i+=1}. ${fruta}`);
}
```
```js
let materias = ["desarrollo web", "analista de sistemas", "ingeniero de computación", "programador", "diseño web"]
for (const materia of materias) {
if (materia === "programador") {
console.log(`encontre la materia: ${materia}, salgo del ciclo`)
break;
}
console.log(`${materia}`)
}
```let materias = \["desarrollo web", "analista de sistemas", "ingeniero de computación", "programador", "diseño web"]
for (const materia of materias) { if (materia === "programador") { console.log(`encontre la materia: ${materia}, salgo del ciclo`) break; } console.log(`${materia}`)}
let canasta = \["manzana","pera","naranja","uva"];/\* lista original \*/
for(frutas of canasta) { console.log(frutas);
canasta.push("mangos"); /\* agrega una fruta adicional al final de la lista \*/ console.log(canasta);
canasta.unshift("kiwi"); /\* agrega una fruta al inicio de la lista \*/ console.log(canasta);
canasta.pop();/\* aqui elimina el ultimo elemento de la lista \*/ console.log(canasta)
canasta.shift(); console.log(canasta); /\* aqui elimina el primer elemento de la lista \*/
/\* aqui eliminamos el elemento que escojamos \*/ let index = canasta.indexOf("uva"); if (index !== -1) { canasta.splice(index, 1); // Elimina "pera" } console.log(canasta);
canasta.splice(2, 0, "fresa"); // Inserta "fresa" en la posición 2 console.log(canasta);
canasta.splice(0, 1, "durasno"); // quitamos manzano y la renplazamos por durasno console.log(canasta);
break;
}
## Método `for...of` en JavaScript
* El método `for...of` es una forma sencilla y explícita de iterar sobre elementos de objetos iterables.
* Es especialmente útil para trabajar con arrays y strings.
* Permite ejecutar un bloque de código para cada elemento de una lista o string.
## Estructura del Método `for...of`
* La sintaxis básica es: `for (variable of objetoIterable) { código a ejecutar }`.
* `variable` representa el elemento actual de la iteración.
* `objetoIterable` es el array o string sobre el que se está iterando.
### Ejemplo de Código
let canasta = \["manzana", "pera", "naranja", "uva"];
for (let fruta of canasta) {
console.log(fruta);
}
### Explicación del Código
* Declaramos una lista de frutas: `canasta`.
* Usamos el método `for...of` para iterar sobre cada fruta en `canasta`.
* `console.log(fruta);` imprime la fruta actual en la consola.
## Ventajas del Método `for...of`
* **Simplicidad**: La sintaxis es directa y fácil de entender.
* **Legibilidad**: El código es más legible en comparación con los loops tradicionales.
* **Eficiencia**: Es eficiente para iterar sobre arrays y strings.
### Ejemplo Práctico
* Supongamos que tenemos una lista de frutas y queremos imprimir cada fruta en la consola.
let frutas = \["manzana", "pera", "naranja", "uva"];
for (let fruta of frutas) {
console.log(fruta);
}
### Explicación del Ejemplo
* Declaramos una lista de frutas: `frutas`.
* Usamos `for (let fruta of frutas) { console.log(fruta); }` para iterar sobre cada fruta.
* La variable `fruta` toma el valor de cada elemento en `frutas` y se imprime en la consola.
## Próximos Pasos
* Practicar con el método `for...of` para familiarizarse con su uso en diferentes escenarios.
* Explorar otras funciones de iteración en JavaScript como `forEach`, `map`, `filter` y `reduce`.
* Aplicar `for...of` en proyectos más complejos para ver su utilidad en contextos reales.
¿Cómo alterar los elementos de la lista a medida que recorremos la misma con el loop for...of?
.
.
```js
const bookshelf = ['A', 'B', 'C', 'D']
for (book of bookshelf){
if(bookshelf.indexOf(book) % 2 == 0){
bookshelf[bookshelf.indexOf(book)] = book + ' → øþł' // modifying the characters of an array of strings
}
}
console.log(bookshelf)
// [ 'A → øþł', 'B', 'C → øþł', 'D' ]
```.
Usamos la concatenacion para cambiar cada string que cumple la condición de que nuestro indice del book sea par, esto añadiendolo en su posición con indexOf (método de listas) en el array de libros
Así fue como utilicé este for. Mi principal tarea es poder acceder a un array para posteriormente buscar el objeto que contenga un ID específico entregado por un usuario.
```js
/**
* Mostramos por pantalla la tarea que contenga el ID pasado por el usuario.
* @param {number} taskId
*/
function listTaskById(taskId) {
if (taskId < 1 && taskId > arrOfTasks.length) {
alert("Haz ingresado un ID erróneo, por favor ingrese un ID válido");
return;
}
for (let value of arrOfTasks) {
if (value.id === taskId) {
alert(`=== Tarea ${taskId} ===\n${value.name}`);
return;
}
}
alert("Haz ingresado un ID inexistente.");
}
```
Este fue mi ejercicio practico
![]()
Want to see more contributions, questions and answers from the community?