DevClub - JavaScript Loops

Not-so-Efficient Sorting Algorithm

fun-fact, this function uses a timeout to make the sorting

It was surprisingly annoying to debug this one, when you use .innerText with the for-loop it eats the space ' ' from the output

So I had to use .innerHTML instead, which preserves the spaces and makes the output look correct.

Lesson 25 - For Loop

for(let i = 0; i < 10; i++) { function }

The for loop is used to iterate over a block of code a number of times.

Lesson 26 - For-Of Loop

for (const item of object) { 
    console.log(` ${item} : ${object[item]} `);        
}

The for-of loop is used to iterate over iterable objects like arrays, strings, maps, sets, etc. It provides a simpler syntax compared to the traditional for loop when working with iterables.

The Example prints all attributes of the object with their values.

Lesson 27 - For-In Loop

for (const key in object) { function }

The for-in loop is used to iterate over the enumerable properties of an object. It allows you to access the keys of an object, but not the values directly.

Lesson 28 - While, Do-While Loop

while (condition) { function }
do { function } while (condition);

The while loop executes a block of code as long as a specified condition is true.
The do-while loop is similar, but it guarantees that the block of code will be executed at least once.

Lesson 29 - For-Each Loop

array.forEach((item) => { function });
array.forEach((item, index) => { function });
array.forEach((item, index, array) => { function });

The forEach method is an array method that executes a provided function once for each array element. It is often used to perform side effects on each element of the array, such as logging or modifying the elements.

Note: The forEach cannot be stopped by return or break like a traditional for loop.

Lesson 30 - Augments and Parameters

for (const item of array) { function }
for (const key in object) { function }
do { function } while (condition);

Augments and parameters are the components that make up the structure of a function.

Overloaded functions are functions that can take a variable number of arguments, allowing for more flexible and dynamic code.

Lesson 31 - Return

function example() { return value; }

The return statement is used to exit a function and return a value to the caller. It can be used to stop the execution of a function and provide a result back to the code that called the function.

Lesson 32 - Break and Continue

break;
continue;

The break statement is used to exit a loop or switch statement prematurely, while the continue statement is used to skip the current iteration of a loop and move on to the next one.

Lesson 33 - Nested Loops

for (let i = 0; i < 5; i++) {
    for (let j = 0; j < 5; j++) {
        console.log(`i: ${i}, j: ${j}`);
    }
}

Nested loops are loops that are contained within another loop.

Lesson 34 - Arrow Functions

const example = (parameters) => { function }

Arrow functions are a more concise syntax for writing function expressions in JavaScript. They are often used for short, simple functions and can help improve readability.

Arrow functions do not have their own `this` context, which makes them useful for preserving the context of `this` in callbacks and event handlers.

Lesson 35 - Anonymous Functions

function (parameters) { function }

Anonymous functions are functions that do not have a name.

Lesson 36 - Callback Functions

function example(callback) { callback(); }

Callback functions are functions that are passed as arguments to other functions and are executed after a certain event or condition is met.

They are commonly used for asynchronous operations, such as handling user input, making API calls, or performing tasks after a delay.

Lesson 37 - ENUM

const Colors = { RED: 'red', GREEN: 'green', BLUE: 'blue' };

An enum (short for "enumeration") is a data structure that allows you to define a set of named constants. In JavaScript, you can create an enum using an object, where the keys represent the names of the constants and the values represent their corresponding values.

Lesson 38 - Calculator Project

Live Site