For Loops - Better explanation in words?

Hello, I am struggling with the concept of For loops. I can write them but I’m not actually understanding what it is I’m doing. Can anyone help describe it in more simple terms for me? I have tried watching Youtube videos but so far haven’t found anything that is quite as beginner friendly as I need. Thank you!

For example:

for (let i = 0; i < 4; i += 1) {
  console.log(i);
};
 
// Output: 0, 1, 2, 3

I understand this logically, but once it is put into practice with variables and words - I can’t seem to put it all together.

For the Whale Talk Project: https://www.codecademy.com/courses/introduction-to-javascript/projects/whale-talk

for (let i = 0; i < input.length; i++){
  if(input[i] === 'e'){
    resultArray.push(input[i]);
  }
    if(input[i] === 'u'){
    resultArray.push(input[i]);
  }
  for (let j = 0; j < vowels.length; j++){
    if(input[i] === vowels[j]){
      //console.log(input[i]);
      resultArray.push(input[i]);
    }
}
}

const resultString = resultArray.join('').toUpperCase(); console.log(resultString);

Why when I use .length can it return words and numbers depending on the code?

Why does this code from a quiz:

const animal = 'cat';
 
for (let i = 0; i < animal.length; i++) {
  console.log(animal[i]);
  for (let j = 1; j < 4; j++) {
    console.log(j);
  }
}

create this: c 1 2 3 a 1 2 3 t 1 2 3 ? I understand the inner loop runs entirely before the outer loop goes but why does one come out with letters and the other with numbers?
I hope any of this makes enough sense to be able to help me, I am so lost I don’t know what to ask!

Loop:

“We’re creating a variable called i, which will have a value of 0 to begin with. As long as i's value is less than 4, we’re going to run the below code once, then increase i's value by 1 and start again using the new value.”

Code:

“Log the value of the variable i to the console.”


.length returns the length of a string or array as an integer. If you’re using it on an empty variable, you’ll get a return value of 0. If you use it on another type of variable, you’ll get undefined (which isn’t the same as a word because that would be a string (undefined is not a string - it is undefined).

image

Well, because you asked it to! I’ll translate for you:

:arrow_up: = :arrow_down:

Variable:

"We’re creating a variable called animal and its value will (always) be cat.

Outer loop:

“We’re creating a variable called i , which will have a value of 0 to begin with. As long as i 's value is less than the length of the variable called animal , we’re going to run the below code once, then increase i 's value by 1 and start again using the new value.”

(Outer-) Inner code

“Log the character at index of the value of i in the value of the variable named animal to the console.”

Inner loop:

“We’re creating a variable called j , which will have a value of 1 to begin with. As long as j 's value is less than 4 , we’re going to run the below code once, then increase j 's value by 1 and start again using the new value.”

(Inner-) Inner code

“Log the value of the variable named j to the console.”


This is because your outer loop is going through each character (letter) in the word cat: c-a-t, while the inner loop is just logging the numerical value of j each time: 1-2-3 (starts at 1, ends before 4).

If you do that in your head, according to these instructions (which are the short translation of your code), you’ll get the same:

“Write down each letter in the word cat, but after each letter, write each number from 1 to ‘the number before 4’”

2 Likes

Most of that makes sense and is super helpful, thank you! I’m still not grasping something and maybe I missed something you said? If .length can only return integers then why with the animal = ‘cat’ example does it evaluate the letters and doesn’t just count the 3 letters? The way you explained the cat example I was able to follow but then when I thought back to how .length can’t return anything but an integer I got confused again. Is there more behind the scenes ill just never be able to see. Like is the .length gathering that the letter ‘a’ is the second number so ‘2’ but then it somehow knows to actually return the letter ‘a’ instead of 2?

Which part are you referring to? .length should never return anything other than undefined or an integer (or an error).

For the cat example - it has ‘animal.length’ in the code - so I’m confused as to why it would then show up in the log as ‘c’, ‘a’, or ‘t’.

Ah, I see where the confusion has come from!

What you’re doing here is looping through each character in the value of animal (which is cat) and logging them to the console. The only reason we use animal.length here is to get the length of the string value (cat) and that’s it!

animal.length still returns an integer but it is only used by the loop and not logged to the console. The code that runs in the back end would look more like this:

for (let i = 0; i < 3; i++) {
  console.log(animal[i]);

Notice the difference? This is how it’s run once the computer figures out what animal.length evaluates to (in this case, it’s 3).

edit: and for further clarity, recall that characters in strings (and strings in arrays, and so on) are all indexed from 0. This means that the “first” thing is actually the “zero-th” thing. Therefore ‘c’, ‘a’ and ‘t’ are indexes 0, 1 and 2, respectively. That’s why we start the loop at 0 and end it at the length of the variable’s string value, not the length + 1.

In real life, we’d want to grab the characters from the index 1 and continue to length + 1 of the word (string), but computers go from 0, so we go to length + 0.

1 Like

so why/how does it read ‘cat’ as index 0, 1, 2 when there isn’t commas between the letters? why isn’t it all read as index 0?

cat
012

c|a|t
0|1|2

The numbers are just the position in the string - commas were just so you could read my reply more easily :slight_smile:

Humans see:

Letter 1 is ‘c’, letter 2 is ‘a’, letter 3 is ‘t’

Computers see:

Letter 0 is ‘c’, letter 1 is ‘a’, letter 2 is ‘t’

1 Like

Got it, thank you so much! It was great being able to actually chat back and forth! :slight_smile:

2 Likes