JavaScript Loops: Understanding for, for…in, and for…of Loops
JavaScript Loops: Understanding for, for…in, and for…of Loops
Learn about JavaScript loops, including for loops, for…in loops, and for…of loops. Discover how to iterate over arrays, objects, and strings, and choose the right loop for your needs.
Table of Contents
For loop in JavaScript
A “for” loop in JavaScript is used to execute a block of code repeatedly for a specific number of times or as long as a certain condition is met.
It consists of three parts:
Initialization:
Initialize a variable (often called a counter) before the loop starts.
Condition:
Define a condition that must be true for the loop to continue running.
Iteration:
Specify how the counter variable should change after each iteration of the loop.
Here’s the basic syntax of a “for” loop:
for (initialization; condition; iteration) {
// Code to be executed in each iteration
}
Here’s an example of a “for” loop that counts from 1 to 5 and logs the numbers to the console:
for (let i = 1; i <= 5; i++) {
console.log(i);
}
In this example:
- let i = 1 initializes the counter variable i to 1.
- i <= 5 is the condition that checks whether i is less than or equal to 5. If this condition is true, the loop continues; otherwise, it terminates.
- i++ is the iteration part. It increments the value of i by 1 after each iteration.
The output of this loop will be:
1
2
3
4
5
You can adjust the initialization, condition, and iteration parts to create different types of “for” loops depending on your specific needs.
For example, you can count backward, skip numbers, or use different variable names.
Here’s an example of a “for” loop that counts backward from 5 to 1:
for (let i = 5; i >= 1; i--) {
console.log(i);
}
This loop will output:
5
4
3
2
1
complete code example in html
Here’s a complete HTML example that includes JavaScript code using a “for” loop to display numbers from 1 to 5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>For Loop Example</title>
</head>
<body>
<h1>Counting from 1 to 5</h1>
<ul id="numberList"></ul>
<script>
// JavaScript code
// Get a reference to the <ul> element where we will display the numbers
const numberList = document.getElementById("numberList");
// Use a for loop to generate numbers from 1 to 5 and add them to the list
for (let i = 1; i <= 5; i++) {
// Create a new <li> element for each number
const listItem = document.createElement("li");
// Set the text content of the <li> element to the current number
listItem.textContent = i;
// Append the <li> element to the <ul> element
numberList.appendChild(listItem);
}
</script>
</body>
</html>
In this example:
- We start with the standard HTML structure, including a <head> section with metadata and a <body> section where we’ll display the numbers.
- Inside the <body> section, we have a heading <h1> that says “Counting from 1 to 5” and an empty <ul> element with the id attribute set to “numberList.” We’ll use this <ul> element to display the numbers.
- In the <script> section, we write the JavaScript code that generates the numbers and adds them to the list. Here’s a breakdown of the JavaScript code:
- We first get a reference to the <ul> element with the id “numberList” using document.getElementById.
- Then, we use a “for” loop to iterate from 1 to 5.
- In each iteration, we create a new <li> element using document.createElement.
- We set the text content of the <li> element to the current value of i (the current number in the loop).
- Finally, we append the <li> element to the <ul> element, adding it to the list.
When you open this HTML file in a web browser, it will display the numbers from 1 to 5 as an unordered list.
For Loop expressions
A “for” loop in JavaScript consists of three expressions:
Initialization Expression:
This expression is evaluated once at the beginning of the loop and is typically used to initialize a counter variable. It is executed before the loop begins.
For example:
for (let i = 0; …)
In this case, let i = 0 is the initialization expression.
Condition Expression:
This expression is evaluated before each iteration of the loop. If it evaluates to true, the loop continues; if it evaluates to false, the loop terminates.
For example:
for (…; i < 10; …)
Here, i < 10 is the condition expression.
Iteration Expression:
This expression is executed after each iteration of the loop and is used to update the loop control variable. It is executed before the condition is checked again. For example:
for (…; …; i++)
In this case, i++ is the iteration expression, which increments the loop variable i by 1 in each iteration.
Here’s the full “for” loop structure with all three expressions:
for (Initialization Expression; Condition Expression; Iteration Expression) {
// Code to be executed in each iteration
}
You can customize each expression to suit your specific looping requirements. For example, you can initialize the loop variable to any value, check for different conditions, and update the loop variable in various ways.
Initialization Expression: complete code example
Here’s a complete HTML example that demonstrates the initialization expression in a “for” loop:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Initialization Expression Example</title>
</head>
<body>
<h1>Using Initialization Expression in a For Loop</h1>
<ul id="numberList"></ul>
<script>
// JavaScript code
// Get a reference to the <ul> element where we will display the numbers
const numberList = document.getElementById("numberList");
// Initialize the loop variable outside of the for loop
let i = 0;
// Use a for loop with an initialization expression to generate numbers from 0 to 4 and add them to the list
for (; i < 5; i++) {
// Create a new <li> element for each number
const listItem = document.createElement("li");
// Set the text content of the <li> element to the current number
listItem.textContent = i;
// Append the <li> element to the <ul> element
numberList.appendChild(listItem);
}
</script>
</body>
</html>
In this example:
- we’ve initialized the loop variable i outside of the “for” loop with the value 0.
- Then, in the “for” loop, we’ve omitted the initialization expression portion because we’ve already initialized i outside the loop.
- The loop will start with the initialized value of i.
- The rest of the code is similar to the previous example: it generates numbers from 0 to 4 and adds them to an unordered list (<ul>) within an HTML document.
When you run this HTML file in a web browser, it will display the numbers from 0 to 4 in a list.
Condition Expression: complete code example
Here’s a complete HTML example that demonstrates the condition expression in a “for” loop:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Condition Expression Example</title>
</head>
<body>
<h1>Using Condition Expression in a For Loop</h1>
<ul id="numberList"></ul>
<script>
// JavaScript code
// Get a reference to the <ul> element where we will display the numbers
const numberList = document.getElementById("numberList");
// Use a for loop with a condition expression to generate numbers from 1 to 10 (inclusive) and add them to the list
for (let i = 1; i <= 10; i++) {
// Create a new <li> element for each number
const listItem = document.createElement("li");
// Set the text content of the <li> element to the current number
listItem.textContent = i;
// Append the <li> element to the <ul> element
numberList.appendChild(listItem);
}
</script>
</body>
</html>
In this example:
- we use the condition expression i <= 10 in the “for” loop.
- The loop initializes i to 1, and it continues to execute as long as the condition i <= 10 is true.
- It stops when i becomes greater than 10.
- This code generates numbers from 1 to 10 and adds them to an unordered list (<ul>) within an HTML document.
When you run this HTML file in a web browser, it will display the numbers from 1 to 10 in a list.
Iteration Expression: complete code example
Here’s a complete HTML example that demonstrates the iteration expression in a “for” loop:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iteration Expression Example</title>
</head>
<body>
<h1>Using Iteration Expression in a For Loop</h1>
<ul id="numberList"></ul>
<script>
// JavaScript code
// Get a reference to the <ul> element where we will display the numbers
const numberList = document.getElementById("numberList");
// Use a for loop with an iteration expression to generate even numbers from 2 to 10 and add them to the list
for (let i = 2; i <= 10; i += 2) {
// Create a new <li> element for each number
const listItem = document.createElement("li");
// Set the text content of the <li> element to the current even number
listItem.textContent = i;
// Append the <li> element to the <ul> element
numberList.appendChild(listItem);
}
</script>
</body>
</html>
In this example:
- we use the iteration expression i += 2 in the “for” loop.
- The loop initializes i to 2, and after each iteration, it increments i by 2. This means that i will take on values 2, 4, 6, 8, and 10, generating even numbers from 2 to 10.
- These even numbers are then added to an unordered list (<ul>) within an HTML document.
When you run this HTML file in a web browser, it will display the even numbers from 2 to 10 in a list.
Loop Scope
In JavaScript, the scope of variables declared inside a loop depends on how those variables are declared.
There are two common ways to declare variables in a loop:
1-Using the var keyword
2-Using the let or const keywords.
The scope of these variables differs:
Scope of Variables Declared with var:
Variables declared with var within a loop are function-scoped, meaning they are visible throughout the entire function in which the loop resides, regardless of block-level scope.
This can lead to unexpected behavior in certain cases.
Here’s an example:
function exampleFunction() {
for (var i = 0; i < 3; i++) {
// Variable 'i' is function-scoped
console.log(i); // Outputs 0, 1, 2
}
console.log(i); // Outputs 3 (still accessible outside the loop)
}
exampleFunction();
In this example, the variable i declared with var is accessible both inside and outside the loop.
Scope of Variables Declared with let or const:
Variables declared with let or const within a loop are block-scoped, meaning they are only accessible within the block where they are declared (in this case, within the loop block).
Here’s an example:
function exampleFunction() {
for (let i = 0; i < 3; i++) {
// Variable 'i' is block-scoped
console.log(i); // Outputs 0, 1, 2
}
// Variable 'i' is not accessible here
// console.log(i); // Would result in an error
}
exampleFunction();
- In this example, the variable i declared with let is only accessible inside the loop block.
- Using let or const is generally recommended for variables in modern JavaScript because it provides more predictable and safer scoping behavior, especially within loops and block-level code.
Keep in mind that the introduction of let and const in ES6 (ECMAScript 2015) helped address many scope-related issues associated with var.
Therefore, it’s advisable to avoid using var for variable declarations in modern JavaScript code.
Scope of Variables Declared with var : complete code example
Here’s a complete code example that demonstrates the scope of variables declared with var in JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scope of Variables Declared with var</title>
</head>
<body>
<h1>Scope of Variables Declared with var</h1>
<script>
// JavaScript code
function exampleFunction() {
for (var i = 0; i < 3; i++) {
// Variable 'i' is function-scoped
console.log(i); // Outputs 0, 1, 2
}
// Variable 'i' is still accessible here
console.log("Outside the loop:", i); // Outputs 3
}
exampleFunction();
</script>
</body>
</html>
In this example:
- We have an HTML document with a title and a heading.
- In the JavaScript section, we define a function named exampleFunction.
- Inside exampleFunction, we use a for loop with the variable i declared using the var keyword. This variable is function-scoped, so it’s accessible both inside and outside the loop.
- Inside the loop, we log the value of i in each iteration, and you will see it outputs 0, 1, and 2.
- After the loop, we log the value of i outside the loop, and it still retains its value of 3.
When you run this HTML file in a web browser and inspect the console, you will see the scope of the variable i declared with var. It’s available both inside and outside the loop and is function-scoped.
The output:
Outside the loop:3
Scope of Variables Declared with let or const : complete code example
Here’s a complete code example that demonstrates the scope of variables declared with let or const in JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scope of Variables Declared with let or const</title>
</head>
<body>
<h1>Scope of Variables Declared with let or const</h1>
<script>
// JavaScript code
function exampleFunction() {
for (let i = 0; i < 3; i++) {
// Variable 'i' is block-scoped
console.log(i); // Outputs 0, 1, 2
}
// Variable 'i' is not accessible here
// console.log("Outside the loop:", i); // Would result in an error
}
exampleFunction();
</script>
</body>
</html>
In this example:
- We have an HTML document with a title and a heading.
- In the JavaScript section, we define a function named exampleFunction.
- Inside exampleFunction, we use a for loop with the variable i declared using the let keyword. Variables declared with let are block-scoped, which means they are only accessible within the block in which they are declared. In this case, the block is the loop, so the variable i is only accessible inside the loop.
- Inside the loop, we log the value of i in each iteration, and you will see it outputs 0, 1, and 2.
- If you uncomment the code to log i outside the loop, it will result in an error because the variable i is not accessible outside the block.
When you run this HTML file in a web browser and inspect the console, you will see the scope of the variable i declared with let. It is block-scoped, meaning it’s only available inside the loop block.
JavaScript For In
The for…in loop in JavaScript is used to iterate over the properties of an object. It allows you to loop through the enumerable properties of an object, including properties inherited from its prototype chain. This loop is often used with objects, not with arrays or other iterable structures.
Here’s the basic syntax of the for…in loop:
for (variable in object) {
// Code to be executed for each property of the object
}
variable: A variable that represents the current property name in each iteration.
object: The object whose properties you want to iterate over.
Here’s an example of how to use the for…in loop to loop through the properties of an object:
const person = {
firstName: "Omar",
lastName: "Abou Baker",
age: 19,
};
for (let key in person) {
console.log(key + ": " + person[key]);
}
- In this example, the for…in loop iterates over the properties of the person object.
- For each iteration, the key variable represents the property name, and person[key] retrieves the corresponding value.
The loop will output:
firstName: Omar
lastName: Abubaker
age: 19
It’s important to note that the order of properties in a for…in loop is not guaranteed to be in any specific order. If you need to iterate over object properties in a specific order, you may want to consider using other methods like Object.keys(), Object.values(), or Object.entries() in combination with a for…of loop or a simple for loop.
Complete code example
Here’s a complete code example that demonstrates the use of a for…in loop to iterate over the properties of an object and display their names and values:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>for...in Loop Example</title>
</head>
<body>
<h1>Using for...in Loop to Iterate Over Object Properties</h1>
<script>
// JavaScript code
// Define an object with some properties
const person = {
firstName: "Omar",
lastName: " Abubaker ",
age: 19,
};
// Iterate over the properties of the 'person' object using a for...in loop
for (let key in person) {
// Check if the property is directly owned by the object (not inherited)
if (person.hasOwnProperty(key)) {
console.log(key + ": " + person[key]);
}
}
</script>
</body>
</html>
In this example:
- We define an object named person with three properties: firstName, lastName, and age.
- Within the <script> tag, we use a for…in loop to iterate over the properties of the person object.
- Inside the loop, we check if each property is directly owned by the object using person.hasOwnProperty(key). This check ensures that we only display properties that are not inherited from the object’s prototype chain.
- For each property that passes the hasOwnProperty check, we log the property name (key) and its corresponding value (person[key]) to the console.
When you run this HTML file in a web browser and inspect the console, you will see the properties and their values displayed:
firstName: Omar
lastName: Abubaker
age: 19
This demonstrates how to use a for…in loop to iterate over the properties of an object and perform specific actions with them.
For In Over Arrays
Using a for…in loop to iterate over arrays in JavaScript is generally not recommended. While it’s technically possible, it has some limitations and potential issues, especially when it comes to iterating over array elements.
Instead, you should consider using a for…of loop or array-specific methods like forEach, map, filter, and others, which are better suited for working with arrays.
Here’s a brief explanation of why for…in is not the best choice for arrays:
Order of Iteration: for…in loops may not iterate over array elements in a predictable order. It is designed for iterating over object properties, and arrays in JavaScript are objects with numeric keys (indices). This means that the loop might not visit elements in the order you expect.
Enumerable Properties:
In addition to iterating over array elements, for…in can also iterate over other enumerable properties that may be added to the array or its prototype chain. This can lead to unexpected behavior.
May Not Iterate All Elements: for…in may not iterate over all array elements, especially if you modify the array’s prototype or properties. It can skip elements or iterate over non-numeric properties.
Here’s an example of how for…in could be used with an array:
const myArray = [1, 2, 3];
for (let index in myArray) {
console.log(myArray[index]);
}However, it’s generally better to use a for…of loop for arrays:
const myArray = [1, 2, 3];
for (const element of myArray) {
console.log(element);
}
Or use array-specific methods like forEach, which provide better readability and control:
const myArray = [1, 2, 3];
myArray.forEach((element) => {
console.log(element);
});
Using for…of or array methods like forEach is considered a more idiomatic and safer way to work with arrays in JavaScript.
Complete code examples
Here are complete code examples demonstrating how to iterate over arrays using both a for…in loop (not recommended) and a for…of loop (recommended):
Using a for…in Loop (Not Recommended):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using for...in Loop with Arrays (Not Recommended)</title>
</head>
<body>
<h1>Using for...in Loop with Arrays (Not Recommended)</h1>
<script>
// JavaScript code
const myArray = [1, 2, 3];
for (let index in myArray) {
if (myArray.hasOwnProperty(index)) { // Check if the property is owned by the object
console.log(myArray[index]);
}
}
</script>
</body>
</html>
In this example:
- we use a for…in loop to iterate over the elements of the array myArray. We also include a check using hasOwnProperty to ensure we only access properties directly owned by the array.
- However, this approach is not recommended for arrays due to the reasons mentioned earlier.
Using a for…of Loop (Recommended):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using for...of Loop with Arrays (Recommended)</title>
</head>
<body>
<h1>Using for...of Loop with Arrays (Recommended)</h1>
<script>
// JavaScript code
const myArray = [1, 2, 3];
for (const element of myArray) {
console.log(element);
}
</script>
</body>
</html>
- we use a for…of loop to iterate over the elements of the array myArray.
- This is the recommended way to iterate over arrays in JavaScript because it is more predictable and easier to read.
- When you run these HTML files in a web browser and inspect the console, you will see that both examples print the elements of the array [1, 2, 3], but the second example using for…of is the preferred and more idiomatic way to work with arrays.
Here are additional complete code examples that demonstrate how to iterate over arrays using a for…of loop, and I’ll include a few scenarios where you might want to use array-specific methods for various operations:
Using a for…of Loop to Iterate Over an Array:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using for...of Loop with Arrays</title>
</head>
<body>
<h1>Using for...of Loop with Arrays</h1>
<script>
// JavaScript code
const myArray = [10, 20, 30, 40, 50];
// Iterate over the array and log each element
for (const element of myArray) {
console.log(element);
}
</script>
</body>
</html>
This example demonstrates the basic usage of a for…of loop to iterate over the elements of an array and log each element to the console.
Using Array Methods for Common Operations:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array Operations with forEach and map</title>
</head>
<body>
<h1>Array Operations with forEach and map</h1>
<script>
// JavaScript code
const numbers = [1, 2, 3, 4, 5];
// Using forEach to perform an operation on each element
numbers.forEach((number) => {
console.log(`Square of ${number}: ${number * number}`);
});
// Using map to create a new array based on the original
const squaredNumbers = numbers.map((number) => {
return number * number;
});
console.log("Squared numbers:", squaredNumbers);
</script>
</body>
</html>
In this example, we use the forEach method to iterate over each element of the numbers array and log the square of each number to the console. Then, we use the map method to create a new array that contains the squares of the original numbers.
These are common array operations, and using array methods like forEach, map, filter, and others can make your code more readable and maintainable when working with arrays.
Array.forEach()
- The forEach() method in JavaScript is a built-in array method used for iterating over the elements of an array.
- It allows you to execute a provided function once for each element in the array.
- This method is often used when you want to perform an operation on each element of an array, such as printing the elements, updating them, or performing other tasks without creating a new array.
Here’s the basic syntax of the forEach() method:
array.forEach(function(currentValue, index, array) {
// Code to be executed on each element
}, thisValue);
currentValue: The current element being processed in the array.
index: The index of the current element being processed.
array: The array on which forEach() is called.
thisValue (optional): A value to use as this when executing the callback function (the first argument). If omitted, this refers to the global object.
Here’s an example of how to use forEach() to iterate over an array and print each element:
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number, index, array) {
console.log(`Element at index ${index}: ${number}`);
});
In this example, the callback function is used to print each element along with its index.
- The forEach() method is often preferred when you want to perform an action for each item in an array, but you don’t need to create a new array or modify the existing one.
- It provides a clean and concise way to loop through array elements.
complete code example
Here’s a complete code example that demonstrates how to use the forEach() method to iterate over an array and print each element:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array.forEach() Example</title>
</head>
<body>
<h1>Using Array.forEach() to Print Array Elements</h1>
<script>
// JavaScript code
const numbers = [1, 2, 3, 4, 5];
// Use forEach() to iterate over the array and print each element
numbers.forEach(function(number, index, array) {
console.log(`Element at index ${index}: ${number}`);
});
</script>
</body>
</html>
In this example:
- We define an array called numbers containing five integer elements.
- Inside the <script> tag, we use the forEach() method on the numbers array to iterate over its elements.
- The callback function provided to forEach() takes three parameters: number (the current element), index (the index of the current element), and array (the array being iterated).
- Inside the callback function, we use console.log() to print each element along with its index.
When you run this HTML file in a web browser and inspect the console, you will see that it prints each element of the numbers array with its corresponding index:
mathematica
Element at index 0: 1
Element at index 1: 2
Element at index 2: 3
Element at index 3: 4
Element at index 4: 5
This demonstrates how to use the forEach() method to iterate over an array and perform a specific action on each element.
JavaScript For Of
- The for…of loop in JavaScript is used to iterate over the values or elements of iterable objects, such as arrays, strings, maps, sets, and more.
- Unlike the for…in loop, which iterates over the keys or indices of an object, the for…of loop provides a more convenient and readable way to work with the actual values stored in the iterable.
Here’s the basic syntax of the for…of loop:
for (const element of iterable) {
// Code to be executed for each element
}
element: A variable that represents the current value or element in the iterable.
iterable: The iterable object you want to loop through.
Here’s an example of how to use the for…of loop to iterate over an array:
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
console.log(number);
}
In this example, the for…of loop iterates over the elements of the numbers array, and the number variable represents each element in each iteration. It’s a cleaner and more concise way to work with arrays compared to traditional for loops.
You can also use the for…of loop with other iterable objects, such as strings, maps, sets, and more:
const myString = "Hello";
for (const char of myString) {
console.log(char);
}
In this case, the for…of loop iterates over the characters in the string “Hello.”
The for…of loop is particularly useful when you want to work with the values stored in an iterable object, making your code more readable and less error-prone.
complete code example
Here’s a complete code example that demonstrates how to use the for…of loop to iterate over an array and print its elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>for...of Loop Example with Arrays</title>
</head>
<body>
<h1>Using for...of Loop to Iterate Over an Array</h1>
<script>
// JavaScript code
const numbers = [1, 2, 3, 4, 5];
// Use for...of to iterate over the array and print each element
for (const number of numbers) {
console.log(number);
}
</script>
</body>
</html>
In this example:
- We define an array called numbers containing five integer elements.
- Inside the <script> tag, we use the for…of loop to iterate over the elements of the numbers array.
- The number variable represents each element in each iteration.
- Inside the loop, we use console.log() to print each element to the console.
When you run this HTML file in a web browser and inspect the console, you will see that it prints each element of the numbers array:
1
2
3
4
5
This demonstrates how to use the for…of loop to iterate over an array and work with its values in a clean and concise manner.
Looping over a String
- You can use a for…of loop to loop over the characters in a string.
- Each iteration of the loop will give you access to one character at a time.
Here’s a complete code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Looping Over a String</title>
</head>
<body>
<h1>Looping Over a String</h1>
<script>
// JavaScript code
const myString = "Hello, World!";
// Use for...of to iterate over the characters in the string
for (const char of myString) {
console.log(char);
}
</script>
</body>
</html>
In this example:
- We define a string myString containing the text “Hello, World!”.
- Inside the <script> tag, we use the for…of loop to iterate over the characters in the myString string.
- The char variable represents each character in each iteration.
- Inside the loop, we use console.log() to print each character to the console.
When you run this HTML file in a web browser and inspect the console, you will see that it prints each character of the string “Hello, World!” one by one:
H
e
l
l
o
,
W
o
r
l
d
!
This demonstrates how to use a for…of loop to loop over the characters in a string, which can be useful for various string manipulation tasks.
Quiz with answers
Here’s a multiple-choice quiz related to the concepts discussed in this lesson about JavaScript loops. Please select the correct answer for each question:
1-What is the purpose of a “for…of” loop in JavaScript?
a) To iterate over the keys of an object.
b) To iterate over the values or elements of an iterable object.
c) To execute a block of code a specified number of times.
Answer: b) To iterate over the values or elements of an iterable object.
2-Which type of loop is used to iterate over the properties of an object?
a) for loop
b) for…of loop
c) for…in loop
Answer: c) for…in loop
3-How is the scope of variables declared with “var” different from variables declared with “let” or “const” inside a loop?
a) Variables declared with “var” are block-scoped.
b) Variables declared with “let” or “const” are function-scoped.
c) Variables declared with “var” are function-scoped, while variables declared with “let” or “const” are block-scoped.
Answer: c) Variables declared with “var” are function-scoped, while variables declared with “let” or “const” are block-scoped.
4-Which array method is used for iterating over array elements and applying a function to each element?
a) map()
b) filter()
c) forEach()
Answer: c) forEach()
5-What does the “for…in” loop in JavaScript primarily iterate over?
a) Values of an array
b) Values of an object
c) Keys or indices of an object
Answer: c) Keys or indices of an object
6-What is the primary advantage of using a “for…of” loop over a traditional “for” loop when iterating over an array?
a) “for…of” loops are faster.
b) “for…of” loops provide more precise control over the loop index.
c) “for…of” loops provide a cleaner and more readable syntax.
Answer: c) “for…of” loops provide a cleaner and more readable syntax.
7-Which type of loop is best suited for iterating over the elements of an array and performing a specific action on each element?
a) for loop
b) for…in loop
c) for…of loop
Answer: c) for…of loop
8-When using a “for…in” loop to iterate over the properties of an object, why is it important to check the ownership of properties using hasOwnProperty()?
a) To ensure that inherited properties are included in the iteration.
b) To prevent certain properties from being iterated over.
c) To only iterate over properties that are directly owned by the object.
Answer: c) To only iterate over properties that are directly owned by the object.
9-Which loop is suitable for situations where you need to execute a block of code a specific number of times?
a) for loop
b) for…of loop
c) while loop
Answer: a) for loop
10-Which of the following is an example of a common use case for the “forEach()” method?
a) Creating a new array based on the original array’s elements.
b) Filtering the elements of an array based on a condition.
c) Performing an action on each element of an array without creating a new array.
Answer: c) Performing an action on each element of an array without creating a new array.
11-In a “for…of” loop, what does the “iterable” refer to?
a) The current element being processed in the loop.
b) The number of iterations the loop should perform.
c) The object over which the loop iterates.
Answer: c) The object over which the loop iterates.
12-Which loop is commonly used when you need to iterate over the elements of a string?
a) for loop
b) for…in loop
c) for…of loop
Answer: c) for…of loop
13-When using a “for…of” loop to iterate over an iterable, what is the variable on the left side of the “of” keyword typically used for?
a) Storing the current index.
b) Storing the current value or element.
c) Specifying the number of iterations.
Answer: b) Storing the current value or element.
14-Which loop should you use to ensure predictable and reliable iteration over the elements of an array?
a) for loop
b) for…in loop
c) for…of loop
Answer: c) for…of loop
15-What is the primary advantage of using array-specific methods like “forEach()” or “map()” over traditional “for” loops when working with arrays?
a) Array-specific methods are faster.
b) Array-specific methods provide better support for complex conditions.
c) Array-specific methods provide cleaner and more concise code.
Answer: c) Array-specific methods provide cleaner and more concise code.
16-Which of the following best describes the behavior of a “for…of” loop when used with a non-iterable object?
a) It throws an error.
b) It iterates over the object’s properties.
c) It treats the object as an empty iterable and doesn’t execute the loop.
Answer: a) It throws an error.
17-When using a “for…in” loop to iterate over the properties of an object, what should you typically check to avoid iterating over inherited properties?
a) The type of the properties (e.g., number, string).
b) Whether the properties have been modified.
c) Whether each property is directly owned by the object.
Answer: c) Whether each property is directly owned by the object.
18-Which type of variable scope is associated with variables declared using “var” inside a loop?
a) Block scope.
b) Function scope.
c) Global scope.
Answer: b) Function scope.
19-Which loop is used to execute a block of code repeatedly as long as a specified condition is true?
a) for loop.
b) for…in loop.
c) while loop.
Answer: c) while loop.
20-In a “for…of” loop, what happens when the iterable being looped over is an empty array?
a) The loop throws an error.
b) The loop does not execute, and no iterations occur.
c) The loop executes once with the value “undefined.”
Answer: b) The loop does not execute, and no iterations occur.
21-In a “for…of” loop, can you access the index (position) of the current element in the iterable directly?
a) Yes, you can access it using a separate variable.
b) No, “for…of” loops do not provide direct access to the index.
c) Yes, you can access it using the “index” keyword.
Answer: b) No, “for…of” loops do not provide direct access to the index.
22-When using a “for…of” loop to iterate over a string, how does it treat spaces and other whitespace characters?
a) It treats them as regular characters.
b) It skips them and only iterates over non-whitespace characters.
c) It throws an error when encountering whitespace characters.
Answer: a) It treats them as regular characters.
23-Which of the following is NOT an iterable object in JavaScript?
a) Arrays
b) Strings
c) Numbers
Answer: c) Numbers
24-Which loop is ideal for iterating over the properties of an object and performing operations on them?
a) for loop
b) for…in loop
c) for…of loop
Answer: b) for…in loop
25-What is the primary advantage of using “for…of” loops over “for…in” loops when working with arrays?
a) “for…of” loops provide access to both keys and values.
b) “for…of” loops guarantee iteration order.
c) “for…of” loops are faster.
Answer: b) “for…of” loops guarantee iteration order.
26-In a “for…in” loop, what is the typical use case for iterating over object properties?
a) To modify the values of the properties.
b) To create a new object with filtered properties.
c) To inspect or perform actions on the properties.
Answer: c) To inspect or perform actions on the properties.
27-Which type of loop is used when you want to execute a block of code at least once and then check a condition for further execution?
a) for loop
b) for…in loop
c) do…while loop
Answer: c) do…while loop
28-When using a “for…of” loop to iterate over an iterable object, can you directly modify the elements of the iterable?
a) Yes, you can modify them within the loop.
b) No, the elements are read-only within the loop.
c) You can modify them, but only if the iterable is an array.
Answer: a) Yes, you can modify them within the loop.
29-Which loop is suitable for situations where you need to perform a specific action on each element of an array without creating a new array?
a) for loop
b) for…in loop
c) forEach() method
Answer: c) forEach() method
30-When using a “for…of” loop with a string, how does it treat characters with special meanings, such as escape sequences (‘\n’, ‘\t’, etc.)?
a) It treats them as regular characters.
b) It throws an error when encountering special characters.
c) It interprets them as their special meanings (e.g., ‘\n’ as a newline).
Answer: a) It treats them as regular characters.
References of this lesson
For the most up-to-date and comprehensive information on JavaScript loops, I recommend consulting reputable online resources such as:
Mozilla Developer Network (MDN) JavaScript Guide:
W3Schools JavaScript Loops Tutorial:
JavaScript.info Loops and Iteration:
Your again gets an incredible workout, and, as you might expect, this exercise also strengthens the important lower back muscle, the QL.
Goal for hypertrophy and endurance with this move, targeting eight
to twenty reps. Carry Out every pull-up set, followed by every barbell row set, after
which move on to the circuit. This again workout features two exercises
before getting into the exercise. To goal power with these, lift heavier,
sticking to the 6-7 rep range. Grouping the back and shoulders collectively may not be the commonest muscle
pairing, however when accomplished accurately, it is highly effective.
This is basically due to the again being a larger pulling muscle and the shoulders a smaller pushing muscle.
Pull the cables toward your abdomen by bringing your elbows to your sides.
Return to the starting place to finish a rep.
You can construct muscle mass with the seated cable row
by doing 10 to fifteen reps of moderately heavy load for 3 to
5 sets. Alternatively, lower the load, and practice to near failure (up
to 25 reps). Generally speaking, there are extra focused workouts for
developing pure back strength, so avoid coaching seated cable rows with super-low reps and excessively
heavy weights.
For the other muscle, use larger reps so you’re fatiguing your
muscle tissue without slicing into your restoration. You can alternate between back and shoulder strength
and size for the best of each weight-lifting worlds. The
high machine row lies between the barbell bent-over row and
the pull-up, activating the lats, teres main, traps, rhomboids, and biceps.
In Contrast To dumbbells or barbells, the Shrug Machine targets the upper trapezius muscles and minimizes the involvement of other muscle
groups. The Pec Deck Machine is historically used for chest
workout routines however could be tailored for
a Reverse Fly to focus on your higher again and shoulder
muscular tissues. Use a cable pulley machine to drag the load straight towards your
forehead. This exercise prevents muscular imbalance and builds overall shoulder strength.
You can add loads of single-arm workouts to correct potential imbalances when doing a shoulder exercise with a cable machine.
Even though you won’t see many people utilizing the cable machine for shoulder presses, mixing in your shoulder workout is a unbelievable train for additional variety.
This section will present over 20 cable shoulder workout routines with
illustrations and descriptions to build, strengthen, and form the delts.
Not Like dumbbells, the resistance doesn’t diminish to zero on the end of
the rep. But since back and shoulder muscle tissue are involved in contrasting actions (pulling and
pushing), supersets involving them can be pretty
efficient. Based Mostly on that precept, we’ve devised a superset routine for your again and shoulder day.
Are you in search of a chest, shoulder, and tricep exercise to realize upper physique mass and strength?
This is a blueprint for building your pushing muscular
tissues with a choice of the most effective bodybuilding workout routines available.
Adding these dumbbell workouts can additionally be highly beneficial for pain management.
The bent-over reverse fly is a fantastic exercise that targets the rear deltoid muscle
tissue. Usually, the anterior deltoid muscle tissue get more attention than the rear delts, and this exercise helps to stability this out.
There are quite a few methods to improve your upper body energy whereas growing your
shoulder muscles and back using dumbbells. A good shoulder exercise
kicks off with an enormous pressing train, such as an overhead press, push press, or incline bench
press.
Not to mention, they can make a gown or a t-shirt look much more impressive to your mates.
If your shoulders are a weak point or you have not educated them as much in the past, you could consider coaching them earlier within the session. When choosing to work out both shoulders and again on the same day,
there are a few things you want to take into consideration when programming it in.
Whilst you might be switching to coach a second muscle group, you are nonetheless challenging your vitality techniques as nicely through doing this.
You improve your anaerobic endurance fitness levels by doing this.
When you prepare two separate and unrelated muscle groups
together, you ought to use a training approach
called supersetting. Research suggests that exercise order
no matter whether or not it’s a multi-joint or single-joint train doesn’t matter too much as eventualities produce comparable positive aspects.
The next step is to maneuver into an energetic warm-up particularly tailor-made in the course of the workouts you’ll be performing throughout your shoulder
workout routine. For example, should you plan on doing pull-ups then knock out a
couple of lat pulldowns to prime the tissues and establish the mind-muscle connection. Chin-ups and pull-ups are compound actions that have interaction multiple muscle groups in your again, shoulders, arms,
and core, including your lats, traps, and biceps. The two exercises activate related muscle teams, but chin-ups permit your biceps
to help the motion with higher force in comparability with pull-ups.
Each variations are helpful in training again and shoulder muscles, and the selection usually comes down to personal choice.
The lateral head of the deltoid has one job solely — to lift your arms to the facet, from the side
of the physique to some extent where the humerus is nearly perpendicular to the torso.
The greatest exercise to simulate this movement
is the standing one-arm side lateral increase.
References:
Bodybuilding Supplements That Work Like Steroids
70918248
References:
anabolic steroids health risks (Sammy)
70918248
References:
after stopping steroids; Hannah,