You certainly can't know JavaScript or any other programming language without knowing about Loops.
Loops are very useful when you want to run the same block of code over and over again while using a different value each time.
In JavaScript, loops are used to perform repeated tasks based on a condition. Conditions usually take the form of booleans which return either true or false . A loop will continue running until the defined condition returns false .
JavaScript supports mainly four types of loops :
And I'll be explaining each of them 🙂
for ( expression1 ; expression2 ; expression3 ; ){
// Block of code to run
}
By using the for statement, you'll create a loop with three optional expressions just as in the syntax above.
Expression1 is executed before the block of code is run and it's used to initialize the variable which would be used in the loop.
Expression2 is used to set the condition for the loop to run. If it returns true, the loop will continue but if it returns false, the loop terminates.
Expression3 is used to update the initial value of the initial variable after every successful code execution. It can do a positive or negative increment or any other thing.
let count = "" ;
for ( let i = 0 ; i <= 5 ; i++){
count+= i + " " ;
}
console.log( count ); // Prints 1 2 3 4 5
The code above creates a loop that counts from 1 to 5. The value of the initial variable is set to zero; let i = 0 ; , then the value is continuously increased by one provided the condition which requires that the value doesn't exceed 5, is met .
for( variable of interable ){
// Block of code to run
}
The for/of loop is used to loop through the values of an interable object.
By using this loop, you can be able to interate over interables such as strings, arrays, maps, sets and more.
From the syntax above;
variable accesses the items in the interable. At the start of the loop, it holds the value of the first property of the interable and for every interation, the value of the next property is assigned to the variable.
interable is the object with interable properties you want to loop over.
let username = "charlrific" ;
let output = "" ;
for ( let x of username ){
output+= x + " " ;
}
console.log(output); // Prints c h a r l r i f i c
const numbers = [1, 2, 3, 4, 5];
let output = "" ;
for ( let x of numbers ){
output+= x ;
}
console.log(output);
// Prints 15
for ( key in object ){
// Block of code to run
}
The for/in loop in JavaScript allows you to iterate over all property keys of an object. In each iteration of the loop, a key is assigned to the key variable. The loop continues for all object properties.
From the syntax above;
const user = {
username : "charlrific",
name : "Charles",
reputation : 59
};
let output = "" ;
for ( let x in user ){
output+= user[x] + " " ;
}
console.log( output );
// Prints 'charlrific Charles 59'
for/in Loops can also loop over the properties of an array or a string.
const numbers = [ 1, 2, 3, 4, 5];
let sum = "" ;
for ( let x in numbers ){
sum+= numbers[x] ;
}
console.log(sum); // Prints 15
while (condition) {
// Block of code to run
}
The while loop is just like the for loop without the first and third expressions. This loop would continue to execute a block of code as long as a specified condition is true.
let output = "" ;
while ( i <= 5 ) {
output += i + " " ;
i++ ;
}
console.log(output); // Prints ' 1 2 3 4 5 '
do/while loop is a variation of the while loop. But in this case, the code will always be executed once before the condition is tested.
do {
// Block of code to run
}
while ( condition ) ;
let output = "" ;
let i = 0 ;
do {
output = i + " " ;
i++ ;
}
while ( i <= 5 ) ;
console.log(output); // Prints ' 1 2 3 4 5 '
When using loops, it's very important that you include the code to update the variable used in the condition, for instance;i++, otherwise the loop will never end!
Loops are very important and useful tools in JavaScript and knowing just the right way to apply them can make your coding experience a lot better🙂.
Thanks for stopping by!❤️