• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to footer
EDUCBA

EDUCBA

MENUMENU
  • Resources
        • Java Tutorials

          • Cheat Sheet Java
          • Cheat Sheet Python
          • C# vs Js
        • Java Tutorials
        • Python Tutorials

          • Angular 5 vs Angular 4
          • Careers in Python
          • Kali Linux vs Ubuntu
        • Python Tutorials
        • Top Differences

          • Cheat Sheet JavaScript
          • Python Interview Questions
          • Cloud Computing or Virtualization
        • Top Differences
        • Others

          • Resources (A-Z)
          • Top Interview Question
          • Programming Languages
          • Web Development Tools
          • HTML CSS Tutorial
          • Technology Basics
          • Technology Careers
          • View All
  • Free Courses
  • All Courses
        • Certification Courses

          Software Development Course 2
        • All in One Bundle

          All-in-One-Software-Development-Bundle
        • Become a Python Developer

          Python-Certification-Training
        • Others

          • Java Course
          • Become a Selenium Automation Tester
          • Become an IoT Developer
          • Ruby on Rails Course
          • Angular JS Certification Training
          • View All
  • 600+ Courses All in One Bundle
  • Login

While Loop in JavaScript

Home » Software Development » Blog » JavaScript » While Loop in JavaScript

While Loop in JavaScript

Introduction on While Loop in Javascript

Today we are concentrating on a while loop. Looping is nothing but the doing task repeatedly over and over. Suppose we have to print some no. for example 1 to 10. In this scenario, if we think we have to write a print statement 10 times for each no. code will be more and it is time-consuming. And most important it is repetitive. While coding in any language we have to consider DRY policy. That means Don’t Repeat Yourself (DRY). In this topic, we are going to learn about While Loop in JavaScript.

So, here loops come into the picture. In that while loop. If you think about the simple English language then you will understand better. Simple while meaning is at the same time or to a period. The same applies here in a programming language also. While the condition is true the particular code will execute.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

While loop checks the condition, whether it is true or false. If the condition is true it simply runs the code till the breakpoint. If the condition is false it does not go ahead.

Syntax:

While(condition){
// code to execute
}

In a while loop, we are checking the condition at the time of starting the loop, so we can decide to execute it or not. In a while loop, we have some block of statements. Which will get in execution-only the condition specified in that loop is true.

We often use true as true and false. if you know the binary concept in programming then it will be easier to understand.

True and false are the two values used to evaluate the expression. While checking the condition and executing program this will be helpful.

Popular Course in this category
Cyber Week Sale
JavaScript Certification Training (39 Courses, 20 Projects) 39 Online Courses | 20 Hands-on Projects | 221+ Hours | Verifiable Certificate of Completion | Lifetime Access
4.5 (2,383 ratings)
Course Price

View Course

Related Courses
Angular JS Certification Training (9 Courses, 5+ Projects)Vue JS Training (1 Courses, 2 Project)

Look at the following syntax for true and false:

While(true){
// code will execute
}
While(false){
// code will not execute
}

Example

while(true){
console.log("Hello");
break;
}

Output:

While Loop in JavaScript 1

In the case of zero, we will directly come out of the loop.

Example

var i = 0;
while (i < 10) {
console.log(i);
i++;
}

Output:

While Loop in JavaScript 2

How Does While Loop Work in Javascript?

The while loop is very simple to understand. We know that loops are used in programming to automate the different repetitive tasks. But we need to take some precautions at a point where we are not increasing it. To get a more clear idea about this so let’s check the following example.

Example

The following code is with increment operator ++.

var i=1;
while (i<=5){
console.log("Hello");
i++;
}

Output:

While Loop in JavaScript 3

Now, Let’s see some code without the increment operator. Please try out the following code.

In JavaScript, you have to declare the variable and initialize it. Skipping this process may cause run time errors in a compiler.

 var i=1;
while (i<=5){
console.log("Hello");
i++;
}

Output:

While Loop in JavaScript 4

Please run above code and you will see that code is running infinitely.

There is no stop for printing name Hello. To make sure that we should get particular no of words as an output we must be using increment or decrement operator along with while loop.

Flow Diagram

In general, the loop is divided into 3 parts.

  1. Initialization: assigning value to the variable
  2. Condition: condition to check it is true or false
  3. Increment or decrement: these operators are useful in incrementing the loop automatically or decrementing the loop.

We will closely look into all these states of the loop in the upcoming example.

The important part of any program is its logic. Look carefully at below flowchart at the start of the program we need to initialize the variable.

Initializing is nothing but assigning value to that variable to be used. Upon initialization, we are good to apply while loop. in a while loop, we are checking the condition. for example, i <=5. here loop will start if the condition is true. If the condition is false then we will get directly out of the loop. In general, when we are talking about getting out of the loop we need increment (++) and decrement (–) operators.

Flow Diagram

Examples

Let’s think of an example with the decrement operator. Till now we have seen the while loop with increment operator (++). Now, we will observe decrement (–) operator. The decrement operator as name suggest reduces the value of a variable as per requirement given. Loop will stop when the condition gets false.

Example:

var i=5;
while (i>=1){
console.log("Hello World");
i--;
}

Output:

console 5

If you run the above program you will find the same output as you have seen it with the increment operator.

Example:

fruits = 1;
while (fruits <= 5) {
console.log(fruits + " has to be there");
fruits++;
}
console.log("there are total " + (fruits - 1) + " rounds to market.");

Output:

console 6

Example: While loop with the array

var fruits = ["Apple","Banana","Kiwi","Pinaple"];
total = 0;
while (total < fruits.length) {
console.log("There is " + fruits[total]+ " in the basket");
total++;
}

Output:

console 7

Example

var balance = 0;
var greet = "";
while (balance <= 10) {
greet = greet + "\n I have added $" + balance+ " in my account";
balance ++;
}
console.log(greet);

Output:

console 8

In all the above examples we have seen how can we work with a while loop. Looping is possible when the condition gets true. Change the conditions. Try with true and false statements. Observe the output.

While the loop always checks the condition. If the condition is true then it gets executed.

It saves us from doing repetitive work again and again. So try it several times and get your hands dirty.

Conclusion

Loops play an important role in programming. As they help to reduce repetitive tasks and do it by making it automatically. If we have correct logic then the loop saves lots of time of a programmer.

Recommended Articles

This is a guide to While Loop in JavaScript. here we discuss How Does While Loop Work in Javascript with the Examples, Flow Diagram and Outputs. You may also have a look at the following articles to learn more –

  1. While Loop in Java
  2. Loops in R
  3. Arrays in JavaScript
  4. Loops in C

All in One Software Development Bundle (600+ Courses, 50+ projects)

600+ Online Courses

50+ projects

3000+ Hours

Verifiable Certificates

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Reader Interactions
Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar
Technology Blog Tutorials
  • JavaScript
    • Multi-Dimensional Array in JavaScript
    • Do While Loop in JavaScript
    • Random Number Generator in JavaScript
    • Recursive Function in JavaScript
    • Recursive Function in JavaScript
    • Errors in JavaScript
    • String Array in JavaScript
    • Abstract Classes in JavaScript
    • Insertion Sort in JavaScript
    • Encapsulation in JavaScript
    • Break Statement in JavaScript
    • Palindrome in JavaScript
    • Reverse in JavaScript
    • JavaScript Compilers
    • Factorial Program in JavaScript
    • Quick Sort in JavaScript
    • Node.js Tools
    • For Loop in JavaScript
    • JavaScript Objects
    • AngularJS Versions
    • Case Statement in JavaScript
    • Conditional Statements in JavaScript
    • Patterns in JavaScript
    • AngularJS Events
    • What is ES6?
    • Arrays Methods in JavaScript
    • What is AngularJS
    • jQuery Ajax Methods
    • JavaScript MVC Frameworks
    • While Loop in JavaScript
    • Comparison Operators in JavaScript
    • Merge Sort in JavaScript
    • AngularJS Unit Testing
    • AngularJS Directives
    • Features of JavaScript
    • Bubble Sort in JavaScript
    • jQuery Methods
    • jQuery Effects
    • Regular Expressions in JavaScript
    • Arrays in JavaScript
    • Overriding in JavaScript
    • Constructor in JavaScript
    • JavaScript Tools
    • AngularJS Architecture
    • AngularJS Alternatives
    • JavaScript Math Functions
    • How Analytics.JS Works
    • Is Javascript Object Oriented
    • Introduction To JavaScript
    • Career In AngularJS
    • Uses Of Node.js
    • Cheat sheet JQuery
    • Cheat Sheet JavaScript
    • Uses of React JS
    • Uses of Angular JS
    • Uses Of JQuery
    • Angular JS Application
    • What is MeteorJS
    • Career in Node.js
    • jQuery Alternatives
    • Angular Alternatives
    • What is JavaScript?
    • Node.js Alternative
    • What is Backbone.js
    • Vue.JS vs React.JS
    • Node.js Commands
    • What is jQuery
    • What is React
    • Switch Statement in JavaScript
    • How Node.JS Works
    • What is ExpressJS
  • Database Management (71+)
  • Ethical Hacking Tutorial (33+)
  • HTML CSS Tutorial (47+)
  • Installation of Software (54+)
  • Top Interview question (188+)
  • Java Tutorials (196+)
  • Linux tutorial (32+)
  • Network Security (85+)
  • Programming Languages (232+)
  • Python Tutorials (89+)
  • Software Development Basics (321+)
  • Software Development Careers (38+)
  • SQL Tutorial (33+)
  • String Functions (12+)
  • Technology Commands (38+)
  • Top Differences (368+)
  • Web Development Tools (33+)
  • Mobile App (60+)
Technology Blog Courses
  • JavaScript Certification Training
  • Angular JS Certification Training
  • Vue JS Training
Footer
About Us
  • Who is EDUCBA?
  • Sign Up
  •  
Free Courses
  • Free Course Programming
  • Free course Python
  • Free Course Java
  • Free Course Javascript
  • Free Course on SQL
  • Free Course on Web Design
  • Free HTML Course
  • Free Android App Development Course
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • Ruby on Rails Course
  • ASP.NET Course
  • VB.NET Course
  • Bootstrap Training Course
  • Become a Linux System Administrator
  • PHP Course
  • Joomla Training
  • HTML Course
Resources
  • Resources (A To Z)
  • Java Tutorials
  • Python Tutorials
  • Top Differences
  • Top Interview Question
  • Programming Languages
  • Web Development Tools
  • HTML CSS Tutorial
  • Technology Basics
  • Technology Careers
  • Ethical Hacking Tutorial
  • SQL Tutorials
  • Digital Marketing
Apps
  • iPhone & iPad
  • Android
Support
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions

© 2019 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

Let’s Get Started
Please provide your Email ID
Email ID is incorrect

Cyber Week Offer - All in One Software Development Bundle (600+ Courses, 50+ projects) View More

Cyber Week Offer - Cyber Week Offer - All in One Software Development Bundle (600+ Courses, 50+ projects) View More