132. loop

If you want to change from

var todos = [
	"clean room",
	"brushteeth",
	"exercise",
	"study javascript",
	"eat healthy"
]

to

var todos = [
	"clean room!",
	"brushteeth!",
	"exercise!",
	"study javascript!",
	"eat healthy!"
]

Let's use 'loop'!
i stands for an index
todos.length = 5 in here


for(var i=0; i < todos.length; i++){
console.log(i);
}
When 'i' would be 5, the loop stops.

for(var i=0; 5 < todos.length; i++){
	console.log(todos[i]);
}

^it's never going to go through this.

var todos = [
	"clean room",
	"brushteeth",
	"exercise",
	"study javascript",
	"eat healthy"
];

for(var i=0; i < todos.length; i++){
	console.log(todos[i]);
}

Using loop you can add exclamation mark "!".

for(var i=0; i < todos.length; i++){
	console.log(todos[i]+ "!");
}

But if I do 'todos', it doesn't have exclamation marks we've just console logged.
We haven't actually changed that 'todo', right?

for

If we do like below,

for(var i=0; i < todos.length; i++){
	todos[i] = todos[i]+ "!";
}

Because we've done them if you want to cross them off the list

for(var i=0; i < todos.length; i++){
	todos[i].pop();
}

This doesn't work because that's the 'array' not 'string'.
What about this below?

for(var i=0; i < todos.length; i++){
	todos.pop();
}

^Why is that?
Because we popped it,
'todos.length' changed to '4'
and i changed to '1'
and then,
'todos.length' changed to '3'
and i changed to '2'.
So, as you can see we removed "eat healthy", study javascript"and "exercise".
How can we fix that issue?

var todoslength = todos.length;
for(var i=0; i < todoslength; i++){
	todos.pop();
}

Look at that! We finished all of our 'todos'!

while

var counterOne = 0;
while(counterOne < 10){
	console.log(counterOne);
	counterOne++
}

and the other way around? Count down.

var counterOne = 10;
while(counterOne > 0){
	console.log(counterOne);
	counterOne--
}

do-while

var counterTwo = 10;
do{
	console.log(counterTwo);
	counterTwo--;
} while (counterTwo>0);

difference between while and do-while

while loop
first check condition and then do the stuffs.

do-while loop
firtst do the stuffs and then check condition.

Let me just demonstrate that point.
if we do change 0 to 10 in while loop

var counterOne = 10;
while(counterOne > 10){
	console.log(counterOne);
	counterOne--
}

var counterTwo = 10;
do{
	console.log(counterTwo);
	counterTwo--;
} while (counterTwo>10);

just logged '10' at script.js 22

You can see 'console.log' at line22
or you can check like this

var counterOne = 10;
while(counterOne > 10){
	console.log("while", counterOne);
	counterOne--
}

var counterTwo = 10;
do{
	console.log("do while", counterTwo);
	counterTwo--;
} while (counterTwo>10);

difference between a 'for' and 'forEach'

var todoslength = todos.length;
for(var i=0; i < todoslength; i++){
	console.log(i);
}

todos.forEach(function(i){
	console.log(i);
})// this function receives the argument of 'i', which is that each individual item in the 'todos'.

Using for Each we're not necessarily accessing the index.

var todoslength = todos.length;
for(var i=0; i < todoslength; i++){
	console.log(todos[i]);
}

todos.forEach(function(i) {
	console.log(i);
})

how do I access the index within the 'forEach'?

Using i

var todoslength = todos.length;
for(var i=0; i < todoslength; i++){
	console.log(todos[i]);
}

todos.forEach(function(todo, i) {
	console.log(todo, i);
})

var todoslength = todos.length;
for(var i=0; i < todoslength; i++){
	console.log(todos[i],i);
}

todos.forEach(function(todo, i) {
	console.log(todo, i);
})

Most people might get confused by this part

so let's take out the function and call it 'logTodos'.

function logTodos(todo, i) {
	console.log(todo, i);
}

todos.forEach(logTodos);

^It's going to do the exact same thing, but I can now use 'logTodos' in other places.
let's make other array.

var todosImportant = [
	"clean room!",
	"brushteeth!",
	"exercise!",
	"study javascript!",
	"eat healthy!"
];

var todos = [
	"clean room",
	"brushteeth",
	"exercise",
	"study javascript",
	"eat healthy"
];

var todosImportant = [
	"clean room!",
	"brushteeth!",
	"exercise!",
	"study javascript!",
	"eat healthy!"
];

// var todoslength = todos.length;
// for(var i=0; i < todoslength; i++){
// 	console.log(todos[i]);
// }


function logTodos(todo, i) {
	console.log(todo, i);
}

todos.forEach(logTodos);
todosImportant.forEach(logTodos);//added

And we should check that they work on all browsers.
So, if you remember, we had 'caniuse.com', that we use for this.
https://caniuse.com/

and we can also check 'forEach'