15 June 2018

5 mins

JavaScript Loops

Written by Dean Gilewicz
JS
Loops provide a way to do something repeatedly. There are many different kinds of loops that repeat an action some number of times. Different loops offer different ways to determine the start and end points of the loop and there are various circumstances where one type of loop is more suited to a task than another. for loop:

See the Pen thecodelog.com - JS Loops 1 by Deano (@deangilewicz) on CodePen.
  • The initialExpression usually initializes one or more loop counters, but the syntax allows an expression of any degree of complexity. This expression can also declare variables.
  • The condition expression is evaluated. If the value of condition is true, the loop statements execute. If the value of condition is false, the for loop terminates. If the condition expression is omitted entirely, the condition is assumed to be true.
  • The code inside the for loop runs.
  • The incrementExpression updates after code has ran then condition is evaluated again to see if true or false.

See the Pen thecodelog.com - JS Loops 2 by Deano (@deangilewicz) on CodePen.

 do..while loop: The do..while loop repeats until a specified condition evaluates to false.

See the Pen thecodelog.com - JS Loops 3 by Deano (@deangilewicz) on CodePen.
  • The code executes once before the condition is checked
  • If condition is true, the code executes again
  • At the end of every execution the condition is checked
  • The loop stops once the condition is false

See the Pen thecodelog.com - JS Loops 4 by Deano (@deangilewicz) on CodePen.

 while loop:

See the Pen thecodelog.com - JS Loops 5 by Deano (@deangilewicz) on CodePen.

 A while statement executes its code as long as the specified condition evaluates to true. The loop stops once condition evaluates to false.

See the Pen thecodelog.com - JS Loops 6 by Deano (@deangilewicz) on CodePen.

 for..in loop: A for..in loop iterates a specified variable over the list of enumerable properties of an object (including prototype chain)

See the Pen thecodelog.com - JS Loops 7 by Deano (@deangilewicz) on CodePen.

 A for..in loop is well suited for iterating over an object.

See the Pen thecodelog.com - JS Loops 8 by Deano (@deangilewicz) on CodePen.

 But is not as useful when iterating over an array.

See the Pen thecodelog.com - JS Loops 9 by Deano (@deangilewicz) on CodePen.

 for..of loop: The for..of loop iterates over iterable objects (including Array, Map, Set, arguments object and so on), invoking a custom iteration hook with code to be executed for the value of each distinct property.

See the Pen thecodelog.com - JS Lopps 10 by Deano (@deangilewicz) on CodePen.

 By default for..in iterates over property names and for..of iterates over property values.

See the Pen thecodelog.com - JS Loops 11 by Deano (@deangilewicz) on CodePen.