This content originally appeared on DEV Community and was authored by Mysterio
Hello guys Today i am going to discuss Loops in javascript
What is a loop?
Loops can execute a block of code a number of times until a given condition returns false and the loop breaks.
Loops are handy, if you want to run the same code over and over again, each time with a different value.
Example -
Suppose we have an array -
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
We want to print the element of this array So ,
Instead of writing:
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
You can write:
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
Output -
BMW
Volvo
Saab
Ford
Fiat
Audi
Different Kinds of Loops -
JavaScript supports different kinds of loops:
- for - loops through a block of code a number of times
- for/in - loops through the properties of an object
- for/of - loops through the values of an iterable object
- while - loops through a block of code while a specified condition is true
- do/while - also loops through a block of code while a specified condition is true
The For Loop -
The for loop has the following syntax:
for (initialization; condition;increment/decrement) {
// code block to be executed
}
- initialization - The initial value of the loop
- condition - To check that the condition is satisfied or not to come out of the loop
- increment/decrement - To increase or decrese the value and get to the next iteration.
Example -
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
Output -
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
From the example above, you can read:
Statement 1 sets a variable before the loop starts (let i = 0).
Statement 2 defines the condition for the loop to run (i must be less than 5).
Statement 3 increases a value (i++) each time the code block in the loop has been executed.
The For In Loop -
The JavaScript for in statement loops through the properties of an Object
Syntax
for (key in object) {
// code block to be executed
}
Example -
const person = {fname:"John", lname:"Doe", age:25};
let text = "";
for (let x in person) {
text += person[x];
}
Output -
John Doe 25
Example Explained
- The for in loop iterates over a person object
- Each iteration returns a key (x)
- The key is used to access the value of the key
- The value of the key is person[x]
The For Of Loop -
The JavaScript for of statement loops through the values of an iterable object.
It lets you loop over iterable data structures such as Arrays, Strings, Maps, NodeLists, and more.
Syntax
for (variable of iterable) {
// code block to be executed
}
variable - For every iteration the value of the next property is assigned to the variable. Variable can be declared with const, let, or var.
iterable - An object that has iterable properties.
Example -
const cars = ["BMW", "Volvo", "Mini"];
let text = "";
for (let x of cars) {
text += x;
}
Output -
BMW
Volvo
Mini
The While Loop -
The while loop loops through a block of code as long as a specified condition is true.
Syntax
while (condition) {
// code block to be executed
}
Example
In the following example, the code in the loop will run, over and over again, as long as a variable (i) is less than 10:
while (i < 10) {
text += "The number is " + i;
i++;
}
Output -
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
NOTE - If you forget to increase the variable used in the condition, the loop will never end. This will crash your browser.
Do While Loop -
The do while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.
Syntax
do {
// code block to be executed
}
while (condition);
Example
The example below uses a do while loop. The loop will always be executed at least once, even if the condition is false, because the code block is executed before the condition is tested.
do {
text += "The number is " + i;
i++;
}
while (i < 10);
Output -
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
Array.forEach() -
The forEach() method calls a function (a callback function) once for each array element.
Example-
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt += value;
}
Output-
45
4
9
16
25
Note that the function takes 3 arguments:
- The item value
- The item index
- The array itself
The example above uses only the value parameter. It can be rewritten to:
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);
function myFunction(value) {
txt += value;
}
THANK YOU FOR READING THIS POST AND IF YOU WANT TO GIVE ANY SUGGESTION OR FIND ANY ERROR PLEASE MENTION IT IN THE COMMENT SECTION
SOURCE - https://www.w3schools.com/js/js_loop_for.asp
This content originally appeared on DEV Community and was authored by Mysterio
Mysterio | Sciencx (2021-12-02T17:41:26+00:00) Loops in Javascript. Retrieved from https://www.scien.cx/2021/12/02/loops-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.