FAQ: Loops - Nested Loops

FAQ JavaScript FAQ
221

Given two arrays:

const a = ['one', 'two', 'three', 'four', 'five']
const b = [1, 2, 3, 4, 5]

How can pair up every value in a with every value in b? By iterating over a in one loop (the outer), and then iterating over b in a nested loop (the inner).

const c = []
for (let m of a) {    //  one iteration in total
    for (let n of b) {  // one iteration per outer value
        c.push([m, n])
    }
}

Now we can log out the array, c to reveal all the pairs that are possible…

console.log(c)

[
  ['one', 1], ['one', 2], ['one', 3], ['one', 4], ['one', 5],
  ['two', 1], ['two', 2], ['two', 3], ['two', 4], ['two', 5],
  ['three', 1], ['three', 2], ['three', 3], ['three', 4], ['three', 5], 
  ['four', 1], ['four', 2], ['four', 3], ['four', 4], ['four', 5],
  ['five', 1], ['five', 2], ['five', 3], ['five', 4], ['five', 5]
]

Notice how many pairs there are? Five values in a paired with the five values in b gives us twenty-five pairs. This points to multiplication…

a.length * b.length  =>  25

The inner loop runs once through for each value in the outer loop, for a total of 5 iterations.

222

I am sorry I understand what are nested loops doing exactly, but I still can’t grasp why or how it’s doing what it is doing.
Thanks for clarification anyway.

1 Like
223

What is it that you don’t grasp?

224

I understand that when we create a loop that checks against a stopping condition and an iteration statement that goes through the array and log the result, what I don’t understand is why when we nest a for loop inside another one it starts to automatically comparing every possible combination for both of the arrays involved in the loop, I think it’s not at all explicitly stated in the code to start the comparison, I see that the command that makes this process possible is somehow omitted from the code.

225

The outer loop iterates over one array, the inner loop iterates over the other array. Only inside the inner loop are we able to compare two values, one from one array, one from the other. Given each term from the array of the outer loop, we must run the inner loop completely through for each one.

226 
// Write your code below
let bobsFollowers = ['Jim', 'Joe', 'John', 'Jake'];
let tinasFollowers = ['Jane', 'John', 'Jake'];
let mutualFollowers = [];
for (let i = 0; i < bobsFollowers.length; i++) {
  //console.log(bobsFollowers[i])
  for (let j = 0; j < tinasFollowers.length; j++); {
    //console.log(tinasFollowers[j])
    if (bobsFollowers[i] === tinasFollowers[j]) {
      mutualFollowers.push(bobsFollowers[i]);
    }
  }
}

why do i get this error
iii/main.js:10
if (bobsFollowers[i] === tinasFollowers[j]) {
^

ReferenceError: j is not defined

227

the semicolon caused the error
can someone explain to me what exactly semicolons do

228

Semi-colons tell the compiler or interpreter* when something ends. For example:

console.log("I am a programmer");

The ; says that the statement is done.

Take a look at this conditional

const x = 5;

if (x > 10) {
  console.log("x is grater than 10");
} else {
  console.log("x is less than 10");
};

When we declare the variable x we add a Semi-colons saying we finished declaring the variable. Then for each of the console.log statements, we say we finished the statements. And for the last } for the conditional, we use one to say that the conditional is finished.

NOTE: some languages such as JS do not require semi-colons.

*depends on the language for js it is an interpreter.

1 Like
229

JavaScript is not compiled, but interpreted. The semi-colon is an end of statement token that tells the parser when to stop reading the line. JS is read, interpreted and run one line at a time.

JS does require semi-colons. Other languages such as C, C++, C#, Java, PHP and possibly others also require them, strictly.

1 Like
230

I thought it was preferred but not require. When I run a js program with no semi-colons it runs with no errors

And I fixed my previous post.

2 Likes
231

When we leave off the semi-colons, the browser may insert them as needed, however this leads to lazy programming habits that can come back to haunt us.

Today’s browsers and JS engines are much more refined than in the past, even to the point of using a Just In Time compiler (JIT), and covering our back with s/c insertion. However, we should not take this for granted since the script is running on the client and we don’t know how old their browser version is. Best to adopt the practice of using semi-colons where required.

3 Likes
232

Thank you for your effort, I still don’t see how the comparison between the two arrays are syntactically stated, I will just have to deal with it as it is until I have deeper understanding of Javascript.

233 
const a = ['a', 'b', 'd', 'e', 'g', 'h']
const b = ['b', 'c', 'd', 'e', 'f', 'h']

The outer loop will iterate over, ['a', 'b', 'd', 'e', 'g', 'h']

for (let x of a) {
  console.log(x)
}
a
b
d
e
g
h

On each iteration, we run the full iteration of the other array.

for (let x of a) {
  for (let y of b) {
    if (x === y) {    //  compare two elements
      console.log(x)
    }
  }
}

b
d
e
h
234

I understand it now, some times I have brain freezes for not apparent reason.
I left for a couple of days looked at it again and it makes complete sense now.
Thank you for your effort anyhow.

2 Likes
235

Not sure why the lesson isn’t letting me pass when my code worked. Anyone know?

const bobsFollowers = ['tim', 'matt', 'george', 'dan']
const tinasFollowers = ['matt', 'dan', 'susan']

const mutualFollowers = []

for (let i = 0; i < bobsFollowers.length; i ++) {
  for (let j = 0; j < tinasFollowers.length; j ++) {
    if (bobsFollowers[i] === tinasFollowers[j]) {
      mutualFollowers.push(bobsFollowers[i])
    }
  }
};

console.log(mutualFollowers)
236

there can’t be any spaces between i and ++ (same for j in the other loop)

237

Wow it was that simple haha thanks

238

This way of doing something to each element of an array seems complicated to me, having to grab each one by its index.
What’s a more elegant nice shorthand in JS for doing arbitrary things to each element of an array, first to last?

239

why when we type:

mutualFollowers.push(tinasFollowers[n])

we get the mutual followers results if we are just pushing tina’s followers into the mutualFollowers array, this operation does not specifically chooses the mutual followers between bob and tina. Can someone explain. I am confused about how this code actually chose the mutual names.

240

The mutual followers array is a collection of all the entries that appear in both of the other arrays. Which one gets pushed is of no concern since they are both the same, anyway.