The best visualization you've seen for loops

Hey everyone,

I’m wondering if there was something that you watched or read that really made for loops and while loops make sense to you.

Sometimes it just trips me up I understand the general concept of wanting to use loops when you want something repeated over and over, however have a hard time seeing it a lot of the time.

Example:



 // Display
  displayList: function(){
    if(this.list.length === 0){
      console.log('You have nothing in your to do list, add something')
    } else {
      console.log("Here's your to do list")
      for(var i=0; i<this.list.length;i++){
       if (this.list[i].completed === true ){
         console.log('(X)',this.list[i].listItem)
       } else (console.log('()', this.list[i].listItem))
    }
  }
}



Putting [i] in the bracket here always trips me up. When I first look at this I think its already nested { } inside the for loop. Why is [i] needed to let it know to run through with the loop if its already inside.

I’m guessing with anything just practice, practice, practice but I would love to know if there was something everyone read or watched that really drove home the point for them.

1 Like

I am having the same question, anyone got an answer?

1 Like
if (this.list[i].completed === true )

do you think this one?

1 Like

@Dobs let me ask you a question, in what ways can you approach the property of an object?

let person = {fName : 'David', sName : 'Rosendorf', age: 26}

Can you show me, how do you approach/print my ‘age’ property?
And how about using a variable?

1 Like

Hey Dorfieeee,

So I would be trying to find a property value pair and I am looking for the value here. I would print this with bracket notation or dot notation since i am trying to target property keys and their value within an object.

So I would do,

person.age // dot notation

person[“age”] /* bracket notation - and using a string data type because it just doesn’t need the “” to be set as a property key, it automatically makes it a string */


Than you could set it to a variable with either of these methods.

var age = person.age
var age = person[“age”]

In my mind this is what the for loop is saying. Below the code I explain where I am getting tripped up.



for(var i=0; i<this.list.length;i++){ 

       if (this.list[i].completed === true ){

         console.log('(X)',this.list[i].listItem)

       } else (console.log('()', this.list[i].listItem))


for(var i=0; i<this.list.length;i++){ // — LINE 1

  • Initialization, condition, final expression. Starting the for loop and making the i variable start a number 0. Is it less than the length of my list, than proceed to the next list item?

if (this.list[i].completed === true ){ //— LINE 2

  • This is where I get a bit tripped up. We are already going through the for loop why do I need to say go through my list and grab the [i] variable? Just to follow what its doing and [i] is the only thing we are running though the loop?

Because the property has nested edit: an array I guess so it looks like this -

let people = [
              {fName : 'David', sName : 'Rosendorf', age: 26},
              {fName : 'John', sName : 'Doe', age: 35},
              {fName : 'Simon', sName : 'Robinson', age: 56},
              {fName :  'Carl', sName : 'Gustavson', age: 51},
]

How do you approach/print the first or second object from the people array?

1 Like

Hmm, I’m honestly not 100% sure.

people[0] but that’d be if it was an array, its actually 4 objects within 1 main object so I’m not 100% sure without a main property to call it by.

Usually I’d be use to,



let people = {
             personOne: {fName : 'David', sName : 'Rosendorf', age: 26},
             personTwo: {fName : 'John', sName : 'Doe', age: 35},
              personThree: {fName : 'Simon', sName : 'Robinson', age: 56},
              personFour: {fName :  'Carl', sName : 'Gustavson', age: 51},
}


and just call it with its main key. Without it, I would try people[0], people[1] if it was bracket notation.

I am actually stupid :smiley: it would be like this

let list = [
              {listItem: 'Take a shower', completed : true},
              {listItem : 'Go sleep before midnight', completed : false},
              {listItem : 'Get up early', completed : false},
              {listItem :  'Start coding', completed: false}
]

Is this going to loop back around to help me understand for loops?

See what I did there lol

1 Like

Okay, so 4 objects within an array. I would still use bracket notation in this case.

list[0]
list[1]

To get the first two objects within the array.

It says:
1. Initialization: assign 0 to variable i;
2. condition: is 0 fewer than length of list array [ number of elements ] => true
3. execute the block of code
4. final expression add 1 to 0 => i = 1 and go back to step no. 1
then it goes through each step in that order again and again until the condition is false

this way, you will iterate through each element of list array

let’s break down 3rd step:

if (list[i].completed === true ){ // where i = 0
// => list[0] == {listItem: 'Take a shower', completed : true}

it passes the condition and prints (X) Take a shower

1 Like

I learned programming logic in an intro class, and what helped me is using pseudo-code and trace tables so you can follow what the computer does.

Watch some videos on youtube to see what a trace table is. This video shows how to follow a while loop using a trace table: https://www.youtube.com/watch?v=UbANyxE7pGE

1 Like

If you don’t need the loop index for anything other than indexing into the array, I’d suggest using a for...of loop instead. Or drop the for loop completely and use an array method like forEach.

Both are much cleaner than the normal for loop.

const todos = [
  { id: new Date().getTime(), todoText: 'Bla bla', completed: false },
  { id: new Date().getTime(), todoText: 'Bla bla 2', completed: true },
  { id: new Date().getTime(), todoText: 'Bla bla 3', completed: false },
];

for (const todo of todos) {
  console.log(todo.id);
  console.log(todo.todoText);
  console.log(todo.completed);
}

todos.forEach((todo) => {
  console.log(todo.id);
  console.log(todo.todoText);
  console.log(todo.completed);
});

You can also check out the JavaScript code execution visualization tool
http://pythontutor.com/javascript.html#mode=edit

2 Likes

Thanks for that link, super helpful to see it all live in action.

Thanks everyone! I’ll keep grinding away!

Caught my mistake here. Just an overlook.