Last week we learned about
Arrays
and
Objects
const colors = ["Red", "Blue", "Green", "Yellow"];
console.log(colors[0]);
const cars = [{
name: "Fiat",
model: "IV-MODEL",
color: "white"
},{
name: "Mercedes-Benz",
model: "MOTORWAGEN 1886",
color: "red"
}];
console.log('Car:', cars[1]);
console.log('Car Name:', cars[1].name);
Now, you need to show all the items that you have stored in your array
const colors = ["Red", "Blue", "Green", "Yellow"];
console.log(colors[0]);
console.log(colors[1]);
console.log(colors[2]);
console.log(colors[3]);
BUT... what happend if the array have 30 or even more items 🤯
const colors = ["Red", "Blue", "Green",...,"Purple"];
console.log(colors[0]);
console.log(colors[1]);
.
.
.
console.log(colors[15]);
Don't worry, there exists a better solution for that!! 🎉
LOOPS
What are Loops?
-
Loops are mainly used for iterating over arrays or objects if you have to run the same code several times.
const colors = ["Red", "Blue", "Green","Yellow", "Orange", "Purple", "Pink"];
//to print the items always is running items[0] -> just the index is changing
console.log(colors[0]); // index: 0
console.log(colors[1]); // index: 1
console.log(colors[2]); // index: 2
console.log(colors[3]); // index: 3
console.log(colors[4]); // index: 4
console.log(colors[5]); // index: 5
console.log(colors[6]); // index: 6
Solution
const colors = ["Red", "Blue", "Green","Yellow", "Orange", "Purple", "Pink"];
for (let i = 0; i < colors.length; i++) {
console.log(colors[i]);
}
For Loop structure
for (let i = 0; i < 10; i++) {
  // code block to be executed
}
for ([1. initialization]; [2. condition]; [3. increment]){
  // code block to be executed
}
- let i= 0: Initializes the counter variable i.
- i < 10: Defines the condition for executing the code block.
- i++: Increments the loop counter (i) each time the loop runs.
Examples
Print numbers from 1 to 20
for (let i = 0; i < 20; i++) {
console.log(i + 1)
}
Print list of color
const colors = ["Red", "Blue", "Green","Yellow", "Orange", "Purple", "Pink"];
for (let i = 0; i < colors.length; i++) {
console.log(colors[i]);
}
Print teachers' full name.
const teachers = [{
name: "Travis",
lastname: "Shears"
},{
name: "Anna",
lastname: "Berezhkova"
},{
name: "Tobias",
lastname: "Timm"
},{
name: "Ivan",
lastname: "Timofeev"
}];
for (let i = 0; i < teachers.length; i++) {
console.log(`Teacher ${i + 1}: ${teachers[i].name} ${teachers[i].lastname}`)
}
Render 4 buttons in your screen
[1] [2] [3] [4]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Button</title>
</head>
<body>
<p>Buttons</p>
<div id="container"></div>
<script>
const buttonsContainer = document.getElementById('container');
for(let i=0; i < 4; i++) {
const buttonElement = document.createElement('button');
buttonElement.innerText = i + 1;
buttonsContainer.appendChild(buttonElement)
}
</script>
</body>
</html>
Array Iteration Methods
- Array.forEach(): Calls a function once for each array element.
const numbers = [45, 4, 9, 16, 25];
numbers.forEach(function(number) {
console.log(number);
});
Array.map(): Creates a new array with the result of the function on every element of the array.
const numbers = [1, 4, 9, 16];
const result = numbers.map(function(number) {
return number * 2
});
console.log(result)
More array methods..
