Loops

For Loop

for ([initialExpression]; [exit condition]; [incrementExpression]) {
  do something;
}

const array = [1,2,3,4,5,6];
for (let index = 0; index < array.length; index++) {
  console.log(array[index]);
}

The biggest drawbacks of a for loop is having to keep track of a counter and exit condition.

• for await...of
• for each...in

for...of

const fakeImages = document.querySelectorAll(".fake-image");
 for (const fakeImage of fakeImages) {
   console.log('fakeImage: ', fakeImage);
 }

for...in (no need for that)

try to stay away from the for ... in loops to avoid unexpected surprises.

for (var key in object) {
    // Access that key's value
    // with object[key]
}

 for (initializer; exit-condition; final-expression) {
  // code to run
}

“for… of” is the preferred type of ‘for loop’

ES2015 Spread

const fakeImages = document.querySelectorAll(".fake-image");
 [...fakeImages].forEach(fakeImage => {
   console.dir(fakeImage);
});

.foreach() loop

• original array will not change
• callback function (currentValue, index, array, (thisArg))
• the map object takes item, key, and mapObj as it's three arguments
• can't use break / continue keywords

const array = [1,2,3,4,5,6];

array.forEach(function(current_value, index, array) {
  console.log(`At index \\\${index} in array \\${array} the value is \\${current_value}`);
});

const fakeImages = document.querySelectorAll(".fake-image");
 fakeImages.forEach(fakeImage => {
   console.log('fakeImage: ', fakeImage);
});

While Loop

let index = 0;
const array = [1,2,3,4,5,6];

while (index < array.length) {
  console.log(array[index]);
  index++;
}

Map Loop

Definition and Usage

The map() method creates a new array with the results of calling a function for every array element.

The map() method calls the provided function once for each element in an array, in order.

Note: map() does not execute the function for array elements without values.

Note: this method does not change the original array.

The last construct was useful, however, it doesn’t return a new array which might be undesirable for your specific case. map solves this by applying a function over every element and then returning the new array.

const array = [1,2,3,4,5,6];
const square = x => Math.pow(x, 2);
const squares = array.map(square);
console.log(`Original array: \\\${array}`);
console.log(`Squared array: \\\${squares}`);

The full signature for map is .map(current_value, index, array).

Continue

• The continue statement passes control to the next iteration of the enclosing while, do, for, or foreach statement in which it appears.

In JavaScript, the continue keyword is used within loops to skip the current iteration and move on to the next iteration. When continue is encountered within a loop, it immediately stops the execution of the current iteration and proceeds with the next iteration.

Here's an example of how the continue keyword can be used in a for loop:

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue;
  }
  console.log(i);
}

In this example, when i is equal to 2, the continue statement is triggered. As a result, the console.log(i) statement is skipped for that iteration, and the loop proceeds with the next iteration. So the output of the code will be:

0
1
3
4

Note that continue can only be used within for, while, and do-while loops. It cannot be used outside of a loop or in other control structures like if statements.

Break

• The break statement ends execution of the nearest enclosing loop or conditional statement in which it appears. Control passes to the statement that follows the end of the statement, if any.

What is an Enumerable

In web development, an enumerable refers to an object or data structure that can be iterated or looped over. It typically represents a collection of values or elements that can be accessed sequentially. The concept of enumerability is commonly used in programming languages to provide a way to iterate over collections and perform operations on each element.

In the context of JavaScript, which is commonly used in web development, enumerable properties are properties of an object that can be accessed during a loop iteration. By default, properties added to an object are enumerable, meaning they can be iterated over using constructs like for...in loops. However, it's important to note that not all properties are enumerable. Some properties, such as built-in JavaScript object properties (e.g., toString or valueOf), are not enumerable by default.

JavaScript provides various methods to work with enumerables, such as forEach, map, filter, and reduce. These methods allow you to perform operations on each item in an array or iterate over the properties of an object.

Here's an example of iterating over an array using the forEach method:

const fruits = ['apple', 'banana', 'orange'];

fruits.forEach((fruit) => {
  console.log(fruit);
});

In this example, the forEach method is called on the fruits array, and a callback function is provided to define the action to be performed on each element. The callback function is executed for each item in the array, effectively iterating over the enumerable elements.

It's worth noting that the concept of enumerability may vary depending on the programming language or framework you are using in web development.