DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for JavaScript basics loops
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

JavaScript basics loops

In today's article on JavaScript basics, we'll be looking at different ways to create loops in JavaScript.

A loop is a way to iterate over code or execute code x times.

The different types of loops in JavaScript are:

  • for
  • forEach
  • for...in
  • for...of
  • while
  • do...while

JavaScript for loop

I would say this is the godfather of loops. The basic for loop. Often you'll see this being used to loop over an array or execute code x times.

Let's first look at how we can create a loop that will execute five times.

for (let i = 0; i < 5; i++) {
  // Execute 5 times
  console.log(`This is loop number ${i}`);
}

// This is loop number 0
// This is loop number 1
// This is loop number 2
// This is loop number 3
// This is loop number 4
Enter fullscreen mode Exit fullscreen mode

However, often we want to loop over an array of items. Let's say we have some foods and want to loop each view.

const foods = ['๐Ÿ•', '๐Ÿ—', '๐Ÿ”', '๐ŸŒฎ'];
for (let i = 0; i < foods.length; i++) {
  console.log(foods[i]);
}

// ๐Ÿ•
// ๐Ÿ—
// ๐Ÿ”
// ๐ŸŒฎ
Enter fullscreen mode Exit fullscreen mode

JavaScript forEach loop

Ever since ES6 came out, we were introduced to the forEach method, making looping arrays way easier!

foods.forEach((item, index) => {
  console.log(`${index}: ${item}`);
});

// 0: ๐Ÿ•
// 1: ๐Ÿ—
// 2: ๐Ÿ”
// 3: ๐ŸŒฎ
Enter fullscreen mode Exit fullscreen mode

Or as a one-liner:

foods.forEach((item) => console.log(item));
Enter fullscreen mode Exit fullscreen mode

JavaScript for...in loop

Another cool thing we can do is loop through the properties of an object!

Let's say we want to loop each property of this user object.

const user = {
  username: 'DailyDevTips',
  firstName: 'Chris',
  favoriteFood: '๐Ÿ•',
};

for (let property in user) {
  console.log(`${property}: ${user[property]}`);
}

// username: DailyDevTips
// firstName: Chris
// favoriteFood: ๐Ÿ•
Enter fullscreen mode Exit fullscreen mode

JavaScript for...of loop

Then we also have the for...of loop, which can iterate over specific values instead of the properties.

const foods = ['๐Ÿ•', '๐Ÿ—', '๐Ÿ”', '๐ŸŒฎ'];
for (let value of foods) {
  console.log(value);
}
Enter fullscreen mode Exit fullscreen mode

JavaScript while loop

The next big thing in loops is the while loop. This means code is executed while a condition is not met.

For instance, let's say we have a boolean value, and we should execute code until it's true.

let check = false;
while (!check) {
  console.log('not correct');
  check = true;
}
Enter fullscreen mode Exit fullscreen mode

In this case, the code will execute once, be aware that this is a super-easy way to make an infinite loop that will crash your code!

With this, we can also evaluate a count, for instance, and only stop once the count is 5.

let amount = 0;
while (amount < 5) {
  console.log(`amount ${amount}`);
  amount++;
}

// amount 0
// amount 1
// amount 2
// amount 3
// amount 4
Enter fullscreen mode Exit fullscreen mode

JavaScript do...while loop

The do...while is very similar to the while loop, but the executing order differs.

Let's first look at how it works:

let test = true;
do {
  console.log('testing');
  test = false;
} while (test);

// testing
Enter fullscreen mode Exit fullscreen mode

This will now execute once and evaluate that the test is not false.
However, what happens when we start with the test being false?

let test = false;
do {
  console.log('testing');
  test = false;
} while (test);

// testing
Enter fullscreen mode Exit fullscreen mode

Huh? This still logs testing. And yes it does
The do...while loop executes the code and THEN evaluates the while statement.
The while loop evaluates this code first before executing anything.

I hope you learned a thing or two about JavaScript loops!

I placed this code on a CodePen for you to check out and have a play around with.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (0)

Join us at DEV

Want to join the conversation?

It's easy! Become a DEV member to follow this post, comment, and more.