Looping & Higher Order functions - imkarin/bloktech GitHub Wiki

Looping

Loops are a way to do something repeatedly. By iterating through a loop, you can run a piece of code as many times as you want. There are different types of iteration, as described below.

for statement

for ([initialExpression]; [condition]; [incrementExpression])
  statement

A for loop repeats until a specified condition becomes false.

do... while statement

do
  statement
while (condition);

A do... while loop repeats until a specified condition becomes false. The statement is being executed and afterwards, the condition is being checked. If it's true, the statement is executed again.

while statement

while (condition)
  statement

A while statement executes its statements as long as a specified condition is true. It checks the condition and if it's true, it executes the statement - then it checks again.

label statement

label :
   statement

You can write a label to identify a loop, and call it later to execute it. You can later use break or continue to tell the program to stop or continue the labeled loop.

break statement

break;
break [label];

A break statement can be used to terminate a loop. In the example, the first one will terminate the loop that it's inside of. The second one will terminate the label specified after it.

continue statement

continue;
continue [label];

The continue statement is used to restart a loop. It can be placed inside a loop, or a label can be specified after it.

for... in/of statements

for (variable in object)
  statement

A for... in/of statement creates a loop iterating over iterable objects. This includes arrays, strings and array-like objects like Nodelist. for... if returns a list of keys on the object being iterated, while for... of returns the values of the numeric properties of the object being iterated.

Implementation in my code

I use looping a lot in my code, specifically the for loops. If I have multiple buttons that need to perform the same action on a click, for example, I can loop over the buttons to give them all the same eventlistener.

An example of this can be found on my app's 'matches' page: there is a list of people that the user has matched with, and all these list items (chats with matches), have an 'X' button to perform the same action: delete the match from the list. With a for loop, I can easily add the same event handler to all these delete buttons:

for-loop

Higher Order functions

Functions are values, which means they can be passed as values or assigned to variables. Higher order functions take other functions as their arguments, or return them as their results. This has several useful advantages:

  • Abstraction: your code is easier to read and understand by other developers.
  • Composition: you can create different small functions that take care of one piece of logic, and then compose more complex functions by using the smaller ones.
  • It reduces bugs, and makes troubleshooting easier.
var grades = [
    {name: 'John', grade: 8, sex: 'M'},
    {name: 'Sarah', grade: 12, sex: 'F'},
    {name: 'Bob', grade: 16, sex: 'M'},
    {name: 'Johnny', grade: 2, sex: 'M'},
    {name: 'Ethan', grade: 4, sex: 'M'},
    {name: 'Paula', grade: 18, sex: 'F'},
    {name: 'Donald', grade: 5, sex: 'M'},
    {name: 'Jennifer', grade: 13, sex: 'F'},
    {name: 'Courtney', grade: 15, sex: 'F'},
    {name: 'Jane', grade: 9, sex: 'F'}
]

Now we can write a script that makes it easier to calculate all kinds of things:

let isBoy = student => student.sex === 'M'

let getBoys = grades => (
    grades.filter(isBoy)
)

let average = grades => (
    grades.reduce((acc, curr) => (
        acc + curr.grade
    ), 0) / grades.length
)

let maxGrade = grades => (
    Math.max(...grades.map(student => student.grade))
)

Example from dev.to, linked in sources down below.

Implementation in my code

I use higher order functions to find specific data in the localStorage. The data stored in the localStorage is a list of users, each with their own properties like name, age, desc, liked (liked by our user) and likedMe (determines if they have liked our user).

Depending on what page the user is currently on, different data needs to be displayed. For example, on the 'matches' page, the user only wants to see matches: people that he has liked, and that have liked him back. We do this by filtering through the 'data' array, searching for people with liked === true and likedMe === true.

higherorder-functions

Sources

Cosset, D. (2019, February 16). Higher-order functions in Javascript. Retrieved from https://dev.to/damcosset/higher-order-functions-in-javascript-4j8b

Higher-Order Functions :: Eloquent JavaScript. (n.d.). Retrieved March 5, 2020, from https://eloquentjavascript.net/05_higher_order.html

Loops and iteration. (2020, January 30). Retrieved from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration

The Coding Train. (2018, February 19). 16.5: Higher Order Functions in JavaScript - Topics of JavaScript/ES6 [Video file]. Retrieved from https://www.youtube.com/watch?v=H4awPsyugS0