Work2Code > Coding and Testing  > JavaScript Loops: Different Styles of Looping or Repeating the same action
JavaScript for Software Testers and Developers

JavaScript Loops: Different Styles of Looping or Repeating the same action

Javascript is beautiful. Nowadays, it’s not just about web browsers, but . also about server-side programming. Thanks to Node.js and Ryan Dahl. If you have Google Chrome, web browser, let’s start coding and trying to learn Javascript through reverse engineering and Mozilla Developer Network with Javascript resources. Start writing the code and use the snippets below to gain some confidence before you start getting into advanced Javascript. In this blog post, I will also speak about how you can use Javascript in your day to day work. In a nutshell, Javascript is magical and you are just limited by your imagination. You can do pretty much anything using your Javascript skills.

Without further ado, let’s start Javascript programming. Yay!

I assume that you are on the Google Chrome web browser. Do a right-click and choose “Inspect” and navigate to the “Console” tab. For starters, you can try executing your Javascript here. However, for writing advanced methods/functions defined in ES6, it’s recommended to use CodePen or Scrimba or Visual Studio Code IDE as the “Console” tab in the web browser may be annoying depending on what you are trying to achieve.

Create an array using the following line of code:

var names = [‘Santhosh’, ‘Huib’, ‘Perze’, ‘Lanette’, ‘Dan’];

To confirm if you were successful in creating this array, just type:

console.log(names);

You must see an array with the items / list on execution. If you can see it, proceed to the different styles of looping through all the items in an array. The beauty is, you can loop in multiple ways which have different syntax / grammar of Javascript programming language. Don’t worry or get intimidated, practice is the key and by just writing these and playing around with the code, you will not only feel confident but also enjoy programming.

How to do JS For loop in a traditional way?

// Style 1:
for(let i = 0; i < names.length; i++){
console.log(names[i]);
}
 

How to use for of loop in javascript?

// Style 2
for(name of names){
console.log(name);
}

How to use forEach high order array function in JavaScript?

// Style 3
names.forEach(function(name){
console.log(name);
})

How to use for in loop in JavaScript?

// Style 4:
for(name in names){
console.log(These are index values of the items in an Array ${name})
}

How to use loop using Array.from?

// Style 5
Array.from(names).forEach(function(name){
console.log(name);
})

How to use do while loop in JavaScript?

// Style 6:
var i = 0;
do {
console.log(names[i])
i+= 1;
} while(i < names.length);

How to use while loop in JavaScript?

// Style 7:
var i = 0;
while(i<names.length){
console.log(names[i]);
i += 1;
}

How to use arrow function with forEach?

// Style 8: Usage of Arrow Function with forEach High Order Array Function
var listNames = names.forEach(name => console.log(name));
console.log(listNames);

What other style do you use in your work?

Santhosh Tuppad

Santhosh Tuppad has played different roles in his life which include being an entrepreneur, liar, lover, boyfriend, husband, thief, passionate software tester, blogger, reader, trainer, coach, black-hat hacker, white-hat hacker, grey-hat hacker and what not. In this amazing journey of life, he has experienced his salvation. Not to forget that, “Salvation comes at a price” and of course he has paid that price. Before he was known for being merciless, ruthless, unkind, evil, etc. And today he is known for kindness, humbleness, and some people call him “Privacy Fighter”.

No Comments

Leave a reply