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.
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.
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?
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
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);
});
it would be like this