Javascript type of loops

The Many Types of Javascript For Loop

“For loops” are programming statements that examine every element an object contains. The Javascript standard contains multiple types of for loops. You can apply each one in a different programming context.

All Javascript for loops have the same basic structure. They start with the word “for” followed by an iteration method in parentheses. Instructions for manipulating elements come between curly braces after the iteration method.

This article describes what for loops do, how they work in different Javascript frameworks, and how to choose the best for loop for your program.

Javascript for loop syntax looks like this in code:

Javascript For Loops in the ECMA Standard

Simple For Loop

The simplest type of for loop increments a variable as its iteration method. The variable acts as a counter for every “n”th element within an object.

In this simple Javascript for loop example, the variable “i” increases once every time the loop is run. The loop prints out the contents of an array in order, one at a time.

The loop could also be written in a way that explicitly shows what the “n”th object is. Since the previous example increased its variable by 1 each time it looped, n = 1.

To look at something other than every object, all you have to do is change the number “n”. So, use “i+2” to look at every second object, “i+3” to look at every third object, and so on. This logic works with any simple arithmetic operation you use to examine elements, whether it’s addition, subtraction, or even multiplication.

For-In Loop

The for-in loop always loops over an object’s elements one by one. These names can be array indexes or key-value pairs.

The syntax for the Javascript for-in loop is:

If the object is an array, the for-in loop will print out the array indexes in order. If the object contains key-value pairs, the for-in loop will print out each key that exists. The for-in loop does not guarantee that keys within key-value pairs will always be accessed in the same order.

For-Of Loop

The for-of loop is similar to the for-in loop because it loops over an object’s elements one by one. Compared to the for-in loop, it is newer and automatically uses an iterator.

The syntax for the Javascript for-of loop is:

If the object is an array, the for-of loop will print out the values of the array’s indexes in order. If the object contains key-value pairs, the for-of loop will print out every value that exists.

Like the for-in loop, the for-of loop does not guarantee that keys within key-value pairs will always be accessed in the same order. The for-of loop also is not a replacement for the for-in loop.

A good way to tell the for-of loop and for-in loop apart is to remember which data they return. The for-of loop returns values, while the for-in loop returns keys or indexes.

For-Await-Of Loop

The for-await-of loop is used when you need to iterate over asynchronous objects or functions. It can return values from objects and the results of function calls. You should never use it on synchronous objects or functions.

The syntax for the Javascript for-await-of loop is similar to the for-of loop, except that it has the keyword “await” before its iteration method:

for await (let i of object)

Javascript For Loops in Common Frameworks

Angular.js For Loop

The Angular.js framework supports all of the Javascript for loop types listed in the Javascript standard. In addition, it has a specialized for loop of its own called “forEach”.

The forEach loop syntax is dramatically different from the other loop types we’ve covered so far. A forEach loop is a function built into Angular.js, rather than a simple control structure. You must pass the object to iterate over, and a function that explains what to do with the object’s elements, into the forEach function.

In the following example, you can see an object with three keys printed out on the console.

let values = ; angular.forEach(values, function(value, key) < console.log(key + ": " + value); >);

The Angular.js forEach loop can also take an optional parameter called a “context.” A context is an external variable that you can use to manipulate the contents of the object you loop over.

This example fills the array “myContext” with the object keys while it’s printing the object’s information to the console. The function that handles the object uses the keyword “this” to refer to the “myContext” array.

let values = ; let myContext = []; angular.forEach(values, function(value, key) < console.log(key + ": " + value); this.push(key); >, myContext);

JQuery For Loop

JQuery lets you use all of the standard Javascript for loop variations. It does not have its own explicit for loop variant, but it does have specialized methods for iteration called “each” and “map”.

The JQuery documentation recommends that you use the “each” and “map” methods whenever possible for iterating over objects. For loops cannot iterate over some specialized JQuery objects, so the “each” and “map” functions are effective replacements in those cases.

A for loop using “each” in a general sense would look like this, using a function to describe what should be done with an object’s elements:

$.each(object, function(key, value) < console.log(key); console.log(value); >);

A for loop using “each” on a specialized JQuery object, such as a collection of values, looks a little different. The “each” method understands that each element in the collection is its context, which is referred to by the “this” keyword. As mentioned earlier, Angular.js also uses this mechanism with for loops.

The “map” methods function in the same way as “each,” except that they handle key-value pairs rather than single elements.

Choosing the Right For Loop

Although for loops are all a type of iteration mechanism, different types have different specific behaviors. Choosing the wrong type of Javascript for loop can cause unexpected results and introduce bugs that are tricky to fix.

Whenever you use a Javascript framework like Angular or JQuery, it’s almost always better to use the for loops variations built into the framework. If you’re ever in doubt, refer to the framework’s documentation.

Enroll in our Intro to Programming Nanodegree Program today to learn more about Javascript for loops and other programming concepts.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

A complete summary of loops in JavaScript

Asabeneh/JavaScript-Loops

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

readme.md

Support the author to create more educational materials

In programming we use different loops to carry out repetitive tasks. Therefore, loop can help us to automate tedious and repetitive task. JavaScript has also different types of loops which we can use to work on repetitive task.

Imagine if your are asked to print Hello world one thousand times without a loop, it may take an hour or two to do this tedious task. However, using loop we can print it in less than a second.

A loop usually goes until the condition gets false. But sometimes we like to intrupt the loop or skip an item during iteration. We use break to intrupt the loop and continue to skip an item during iteration.

We use for loop when we know how many iteration we go. Let’s see the following example

// for loop syntax for (initialization, condition, increment/decrement)  code goes here >

This code prints from 0 to 5.

for (let i = 0; i  6; i++)  console.log(i) >

For example if we want to sum all the numbers from 0 to 100.

let sum = 0 for (let i = 0; i  101; i++)  sum += i > console.log(sum)

If we want to sum only even numbers:

let sum = 0 for (let i = 0; i  101; i += 2)  sum += i > console.log(sum) // or another way let total = 0 for (let i = 0; i  101; i++)  if (i % 2 == 0)  total += i > > console.log(total)

This code iterates through the array

const nums = [1, 2, 3, 4, 5] for (let i = 0; i  6; i++)  console.log(nums[i]) >

This code prints 5 to 0. Looping in reverse order

for (let i = 5; i >= 0; i--)  console.log(i) >

The Code below can reverse an array.

const nums = [1, 2, 3, 4, 5] const lastIndex = nums.length - 1 const newArray = [] for (let i = lastIndex; i >= 0; i--)  newArray.push(nums[i]) > console.log(newArray)

We use the while loop when we do not know how man iteration we go in advance.

let count = prompt('Enter a positive number: ') while (count > 0)  console.log(count) count-- >

Do while run at least once if the condition is true or false

let count = 0 do  console.log(count) count++ > while (count  11)

The code below runs ones though the condition is false

let count = 11 do  console.log(count) count++ > while (count  11)

While loop is the least important loop in many programming languages.

The for of loop is very handy to use it with array. If we are not interested in the index of the array a for of loop is preferable to regular for loop or forEach loop.

const numbers = [1, 2, 3, 4, 5] for (const number of numbers)  console.log(number) > const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland'] for (const country of countries)  console.log(country.toUpperCase()) >

If we are interested in the index of the array forEach is preferable to for of loop. The forEach array method takes a callback function, the callback function takes three arguments: the item, the index and the array itself.

const numbers = [1, 2, 3, 4, 5] numbers.forEach((number, i) =>  console.log(number, i) >) const countries = ['Finland', 'Sweden', 'Norway', 'Denmark', 'Iceland'] countries.forEach((country, i, arr) =>  console.log(i, country.toUpperCase()) >)

The for in loop can be used with object literals to get the keys of the object.

const user =  firstName: 'Asabeneh', lastName: 'Yetayeh', age: 250, country: 'Finland', skills: ['HTML', 'CSS', 'JS', 'React', 'Node', 'Python', 'D3.js'], > for (const key in user)  console.log(key, user[key]) >

Intrupting a loop and skipping an item

Break is used to interrupt a loop.

for (let i = 0; i  5; i++)  if (i == 3)  break > console.log(i) > // 0 1 2

The above code stops if 3 found in the iteration process.

We use the keyword continue to skip a certain iterations.

for (let i = 0; i  5; i++)  if (i == 3)  continue > console.log(i) > // 0 1 2 4 5

• Regular for loop can be used anywhere when the number of iteration is known.
• While loop when the number of iteration is not know
• Do while loop and while loop are almost the same but do while loop run at least once even when the condition is false
• for of is used only for array
• forEach is used for array
• for in is used for object

For more JavaScript and other programming lessons and tutorials, you may check Washera YouTube channel.

If you want to dive deep into JavaScript, you can give it a try to the 30DaysOfJavaScript challenge. This challenge will take quite long time to finish but you can get all you need about JavaScript

Now, you knew everything you need to know about JavaScript loops.

About

A complete summary of loops in JavaScript

Источник