JavaScript

JavaScript TutorialDatatypes in JavaScriptEvaluating JavaScriptFunctional JavaScriptJavaScript .postMessage() and MessageEventJavaScript AJAXJavaScript Anti-patternsJavaScript Arithmetic (Math)JavaScript ArraysJavaScript Arrow FunctionsJavaScript Async functions (async/await)JavaScript Async IteratorsJavaScript Automatic Semicolon Insertion - ASIJavaScript Battery Status APIJavaScript Behavioral Design PatternsJavaScript Binary DataJavaScript Bitwise operatorsJavaScript Bitwise Operators - Real World Examples (snippets)JavaScript BOM (Browser Object Model)JavaScript Built-in ConstantsJavaScript CallbacksJavaScript ClassesJavaScript CommentsJavaScript Comparison OperationsJavaScript ConditionsJavaScript ConsoleJavaScript Constructor functionsJavaScript Context (this)JavaScript CookiesJavaScript Creational Design PatternsJavaScript Custom ElementsJavaScript Data attributesJavaScript Data ManipulationJavaScript DateJavaScript Date ComparisonJavaScript DebuggingJavaScript Declarations and AssignmentsJavaScript Destructuring assignmentJavaScript Detecting browserJavaScript EnumerationsJavaScript Error HandlingJavaScript Escape SequencesJavaScript EventsJavaScript execCommand and contenteditableJavaScript FetchJavaScript File API, Blobs and FileReadersJavaScript Fluent APIJavaScript FunctionsJavaScript GeneratorsJavaScript GeolocationJavaScript Global error handling in browsersJavaScript HistoryJavaScript How to make iterator usable inside async callback functionJavaScript IndexedDBJavaScript InheritanceJavaScript Intervals and TimeoutsJavaScript JSONJavaScript Linters - Ensuring code qualityJavaScript LocalizationJavaScript LoopsJavaScript MapJavaScript Memory efficiencyJavaScript Method ChainingJavaScript Modals - PromptsJavaScript Modularization TechniquesJavaScript ModulesJavaScript NamespacingJavaScript Navigator ObjectJavaScript Notifications APIJavaScript ObjectsJavaScript Performance TipsJavaScript PromisesJavaScript Prototypes, objectsJavaScript ProxyJavaScript Regular expressionsJavaScript requestAnimationFrameJavaScript Reserved KeywordsJavaScript Same Origin Policy & Cross-Origin CommunicationJavaScript ScopeJavaScript ScreenJavaScript Security issuesJavaScript Selection APIJavaScript Server-sent eventsJavaScript SetJavaScript Setters and GettersJavaScript Strict modeJavaScript StringsJavaScript SymbolsJavaScript Tail Call OptimizationJavaScript Template Literals



JavaScript Loops

From WikiOD

Syntax[edit | edit source]

  • for (initialization; condition; final_expression) { }
  • for (key in object) { }
  • for (variable of iterable) { }
  • while (condition) { }
  • do { } while (condition)
  • for each (variable in object) { } // ECMAScript for XML

Remarks[edit | edit source]

Loops in JavaScript typically help solve problems which involve repeating specific code x amount of times. Say you need to log a message 5 times. You could do this:

console.log("a message");
console.log("a message");
console.log("a message");
console.log("a message");
console.log("a message");

But that's just time-consuming and kind of ridiculous. Plus, what if you needed to log over 300 messages? You should replace the code with a traditional "for" loop:

for(var i = 0; i < 5; i++){
    console.log("a message");
}

Standard "for" loops[edit | edit source]

Standard usage[edit | edit source]

for (var i = 0; i < 100; i++) {
    console.log(i);
}

Expected output:

0

1

...

99

Multiple declarations[edit | edit source]

Commonly used to cache the length of an array.

var array = ['a', 'b', 'c'];
for (var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

Expected output:

'a'

'b'

'c'

Changing the increment[edit | edit source]

for (var i = 0; i < 100; i += 2 /* Can also be: i = i + 2 */) {
    console.log(i);
}

Expected output:

0

2

4

...

98

Decremented loop[edit | edit source]

for (var i = 100; i >=0; i--) {
    console.log(i);
}

Expected output:

100

99

98

...

0

"for ... of" loop[edit | edit source]

6

const iterable = [0, 1, 2];
for (let i of iterable) {
    console.log(i);
}

Expected output:

0

1

2

The advantages from the for...of loop are:

  • This is the most concise, direct syntax yet for looping through array elements
  • It avoids all the pitfalls of for...in
  • Unlike forEach(), it works with break, continue, and return

Support of for...of in other collections[edit | edit source]

Strings[edit | edit source]

for...of will treat a string as a sequence of Unicode characters:

const string = "abc";
for (let chr of string) {
  console.log(chr);
}

Expected output:

a b c

Sets[edit | edit source]

for...of works on Set objects.

Note:

const names = ['bob', 'alejandro', 'zandra', 'anna', 'bob'];

const uniqueNames = new Set(names);

for (let name of uniqueNames) {
  console.log(name);
}

Expected output:

bob

alejandro

zandra

anna

Maps[edit | edit source]

You can also use for...of loops to iterate over Maps. This works similarly to arrays and sets, except the iteration variable stores both a key and a value.

const map = new Map()
  .set('abc', 1)
  .set('def', 2)

for (const iteration of map) {
  console.log(iteration) //will log ['abc', 1] and then ['def', 2]
}

You can use destructuring assignment to capture the key and the value separately:

const map = new Map()
  .set('abc', 1)
  .set('def', 2)

for (const [key, value] of map) {
  console.log(key + ' is mapped to ' + value)
}
/*Logs:
  abc is mapped to 1
  def is mapped to 2
*/

Objects[edit | edit source]

for...of loops do not work directly on plain Objects; but, it is possible to iterate over an object’s properties by switching to a for...in loop, or using Object.keys():

const someObject = { name: 'Mike' };

for (let key of Object.keys(someObject)) {
  console.log(key + ": " + someObject[key]);
}

Expected output:

name: Mike

"for ... in" loop[edit | edit source]

Warning

for...in is intended for iterating over object keys, not array indexes. Using it to loop through an array is generally discouraged. It also includes properties from the prototype, so it may be necessary to check if the key is within the object using hasOwnProperty. If any attributes in the object are defined by the defineProperty/defineProperties method and set the param enumerable: false, those attributes will be inaccessible.

var object = {"a":"foo", "b":"bar", "c":"baz"};
// `a` is inaccessible
Object.defineProperty(object , 'a', {
        enumerable: false,
});
for (var key in object) {
    if (object.hasOwnProperty(key)) {
      console.log('object.' + key + ', ' + object[key]);
    }
}

Expected output:

object.b, bar

object.c, baz

"while" Loops[edit | edit source]

Standard While Loop[edit | edit source]

A standard while loop will execute until the condition given is false:

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

Expected output:

0

1

...

99

Decremented loop[edit | edit source]

var i = 100;
while (i > 0) {
    console.log(i);
    i--; /* equivalent to i=i-1 */
}

Expected output:

100

99

98

...

1

Do...while Loop[edit | edit source]

A do...while loop will always execute at least once, regardless of whether the condition is true or false:

var i = 101;
do {
    console.log(i);
} while (i < 100);

Expected output:

101

"continue" a loop[edit | edit source]

Continuing a "for" Loop[edit | edit source]

When you put the continue keyword in a for loop, execution jumps to the update expression (i++ in the example):

for (var i = 0; i < 3; i++) {
    if (i === 1) {
        continue;
    }
    console.log(i);
}

Expected output:

0

2

Continuing a While Loop[edit | edit source]

When you continue in a while loop, execution jumps to the condition (i < 3 in the example):

var i = 0;
while (i < 3) {
    if (i === 1) {
        i = 2;
        continue;
    }
    console.log(i);
    i++;
}

Expected output:

0

2

"do ... while" loop[edit | edit source]

var availableName;
do {
    availableName = getRandomName();
} while (isNameUsed(name));

A do while loop is guaranteed to run at least once as it's condition is only checked at the end of an iteration. A traditional while loop may run zero or more times as its condition is checked at the beginning of an iteration.

Break specific nested loops[edit | edit source]

We can name our loops and break the specific one when necessary.

outerloop:
for (var i = 0;i<3;i++){
    innerloup:
    for (var j = 0;j <3; j++){
        console.log(i);
        console.log(j);
        if (j == 1){
            break outerloop;    
        }
    }
}

Output:

0
0
0
1

Break and continue labels[edit | edit source]

Break and continue statements can be followed by an optional label which works like some kind of a goto statement, resumes execution from the label referenced position

for(var i = 0; i < 5; i++){
  nextLoop2Iteration:
  for(var j = 0; j < 5; j++){
    if(i == j) break nextLoop2Iteration;
    console.log(i, j);
  }
}

i=0 j=0 skips rest of j values

1 0

i=1 j=1 skips rest of j values

2 0

2 1 i=2 j=2 skips rest of j values

3 0

3 1

3 2

i=3 j=3 skips rest of j values

4 0

4 1

4 2

4 3

i=4 j=4 does not log and loops are done

"Break" out of a loop[edit | edit source]

Breaking out of a while loop[edit | edit source]

var i = 0;
while(true) {
    i++;
    if(i === 42) {
        break;
    }
}
console.log(i);

Expected output:

42

Breaking out of a for loop[edit | edit source]

var i;
for(i = 0; i < 100; i++) {
    if(i === 42) {
        break;
    }
}
console.log(i);

Expected output:

42

Credit:Stack_Overflow_Documentation