JavaScript Course Loops in JavaScript
Last Updated :
10 Mar, 2023
Looping in programming languages is a feature that facilitates the execution of a set of instructions/functions repeatedly while some condition evaluates to true. For example, suppose we want to print “Hello World” 10 times.
Example: In this example we will print the same things, again and again, to understand the work of Loops.
<script>
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
</script>
|
The above code will simply output the sentence ‘Hello World’ to the screen 10 times. Though this method is something I wouldn’t recommend. Though one might argue that you can write console.log ’10’ times, what about printing about the console.log ‘100’ or say ‘10000’ times? The above approach in these cases is just not what anyone would recommend that’s why we make use of loops.
Javascript provides different types of loops.
JavaScript Loops: These are the majorly used loops in javascript.
- while loop
- do..while loop
- for loop
Note: Javascript also includes for..in, for..each, for..of loop though they are beyond the scope of this course.
JavaScript while Loop: A while loop is a control flow statement that allows code to be executed repeatedly based on a given Boolean condition. The while loop can be thought of as a repeating if statement.
while(condition){
do..this;
}
The condition/expression we pass inside the parenthesis of the while loop must evaluate to true otherwise the statements we write inside the block of the while loop will not be executed.
Example:
<script>
let i = 0;
while( i < 5){
console.log('Hello World');
i++;
}
</script>
|
Output:
Hello World
Hello World
Hello World
Hello World
Hello World
The above code simply prints ‘Hello world’ to the screen and all we did is initialized a variable ‘i’ with value ‘0’ assigned to it, then we say that till the value of this variable ‘i’ is less than ’10’ keep doing whatever is written inside the block of the while loop. It is important to increase the value of this variable ‘i’ otherwise it will go into ‘infinite’ loop. Now consider a scenario where we pass something inside the parenthesis which doesn’t evaluate to true, in that case, nothing will be executed which is inside the code block.
Example:
<script>
let i = 5;
while( i < 4 ){
console.log('Hello World');
i++;
}
</script>
|
Since the condition inside the while loop doesn’t evaluate to true, hence nothing is printed to the screen.
JavaScript do..while Loop: The do-while loop is similar to while loop with the only difference that it checks for the condition after executing the statements. I don’t matter if the condition inside the while parenthesis is true or not the loop will run at least once.
do
{
statements..
}
while (condition);
Example:
<script>
let x = 21;
do
{
console.log("Value of x: " + x + "<br />");
x++;
} while (x < 20);
</script>
|
Output:
Value of x: 21
JavaScript For Loop: For loop provides a concise way of writing the loop structure. Unlike a while loop, a for statement consumes the initialization, condition, and increment/decrement in one line thereby providing a shorter, easy-to-debug structure of looping.
for (initialization condition; testing condition; increment/decrement) {
do..this;
}
- Initialization condition: Here, we initialize the variable in use. It marks the start of a for loop. An already declared variable can be used or a variable can be declared, local to loop only.
- Testing Condition: It is used for testing the exit condition for a loop. It must return a boolean value. It is also an Entry Control Loop as the condition is checked prior to the execution of the loop statements.
- Statement execution: Once the condition is evaluated to true, the statements in the loop body are executed.
- Increment/ Decrement: It is used for updating the variable for next iteration.
- Loop termination: When the condition becomes false, the loop terminates marking the end of its life cycle.
Example:
<script>
for(let i = 0; i < 5;i++){
console.log('Value of i is: ' + i );
}
</script>
|
Output:
Value of i is: 0
Value of i is: 1
Value of i is: 2
Value of i is: 3
Value of i is: 4
Similar Reads
Introduction to JavaScript Course - Learn how to build a task tracker using JavaScript
This is an introductory course about JavaScript that will help you learn about the basics of javascript, to begin with, the dynamic part of web development. You will learn the basics like understanding code structures, loops, objects, etc. What this course is about? In this course we will teach you
4 min read
JavaScript Course What is JavaScript ?
JavaScript is a very famous programming language that was originally started in the year of 1995 with the motive of making web pages alive. It is also an essential part of the web developer skillset. In simple terms, if you want to learn web development then learn HTML & CSS before starting JavaScri
3 min read
JavaScript Hello World
JavaScript Hello World refers to the basic and traditional first program when learning JavaScript. It involves displaying the phrase "Hello World" On Client Browser or Node.js Server ConsoleThe console.log() method prints the message to the browser console if we use JavaScript on client side, and on
2 min read
JavaScript Course Understanding Code Structure in JavaScript
Inserting JavaScript into a webpage is much like inserting any other HTML content. The tags used to add JavaScript in HTML are <script> and </script>. The code surrounded by the <script> and </script> tags is called a script blog. The 'type' attribute was the most important a
3 min read
JavaScript Course Variables in JavaScript
Variables in JavaScript are containers that hold reusable data. It is the basic unit of storage in a program. The value stored in a variable can be changed during program execution. A variable is only a name given to a memory location, all the operations done on the variable effects that memory loca
4 min read
JavaScript Data Types
In JavaScript, each value has a data type, defining its nature (e.g., Number, String, Boolean) and operations. Data types are categorized into Primitive (e.g., String, Number) and Non-Primitive (e.g., Objects, Arrays). Primitive Data Type1. NumberThe Number data type in JavaScript includes both inte
6 min read
JavaScript Course Operators in JavaScript
An operator is capable of manipulating a certain value or operand. Operators are used to performing specific mathematical and logical computations on operands. In other words, we can say that an operator operates the operands. In JavaScript, operators are used for comparing values, performing arithm
7 min read
JavaScript Course | Practice Quiz-1
[mtouchquiz 369]
1 min read
JavaScript Course Interaction With User
Javascript allows us the privilege to which we can interact with the user and respond accordingly. It includes several user-interface functions which help in the interaction. Let's take a look at them one by one. JavaScript Window alert() Method : It simply creates an alert box that may or may not h
2 min read
JavaScript Course Logical Operators in JavaScript
logical operator is mostly used to make decisions based on conditions specified for the statements. It can also be used to manipulate a boolean or set termination conditions for loops. There are three types of logical operators in Javascript: !(NOT): Converts operator to boolean and returns flipped
3 min read