Why use i<array.length in for loop - javascript

Why i<array.length rather than i=array.length
When I originally wrote my code, I told the for loop to go through the length of the array. I defined the for loop as (var i = 0; i=array.length; i++). That created an infinite loop. The way to fix it is to set i<array.length. However, can somebody explain to me why? It feels as if the loop should continue to the end of the array. If I set it to less than the length of the array, how do I know that it has checked all of the numbers?
Thanks!
Note: Here is my code.
var array = [3, 6, 2, 56, 32, 5, 89, 32];
var largest = 0;
for (var i = 0; i largest) {
largest = array[i]
}
}
console.log(largest);

if you write i=array.length then you SET length to i - not COMPARE (it is allways true (or cast to true - except if number is zero). To compare you need write i!=array.length or i!==array.length. Second thing if you use i as index then is beter to use i<array.length because array elements are indexed from 0 to length-1 and value i greater equal length will newer occure.
let array = ['a','b','c'];
let i=3;
console.log('!==', i!==array.length );
console.log('!=', i!=array.length );
console.log('<', i<array.length );
console.log('=', i=array.length );

Because
for (i = 0; i < array.length; i++)
means:
i = 0 i starts at 0 at the beginning of the for-loop
i < array.length as long as i is less than array.length, we continue looping
i++ after each loop we increment i by 1 (i.e. i = i + 1)
When you replaced i < array.length by i = array.length, you are saying let i = array.length which is setting the value i to array.length. So long as the statement is true it will continue looping. That's why it's an infinite loop.
But I guess that was a typo, you really meant i == array.length. Still doesn't work, because all arrays start with index 0 (which is why i = 0 to start). This means they end at index of array.length - 1.
Example:
arr = ["a","b","c"]; //arr[2] = "c", but arr.length = 3
So we if loop through arr, we need to stop at index 2, not 3

the second argument in for defines the condition under which the loop should continue/stop. The reason why i<array.length is correct is that arrays in javascript are 0 based. So if you try to get array[array.length], it is out of bounds by definition

When setting i=array.length your loop condition is going to evaluate what is in i. If the length of the array is greater than 0 it will be a truthy value, resulting in an infinite loop. If it is 0, the loop body (statement) won't execute.
You are overwriting your step-variable -or- iterator variable, i, which is not what you want to do. If anything you can:
for (var i=0,n=array.length; i<n; i++); however, storing the array length in a variable is no longer necessary for performance optimization (I think browsers now optimize when converting JS to bytecode.
Refer to MDN resource on for-loops for more information; here's a snippet:
for ([initialization]; [condition]; [final-expression])
statement
initialization
An expression (including assignment expressions) or variable declaration. Typically used to initialize a counter variable. This expression may optionally declare new variables with var or let keywords. Variables declared with var are not local to the loop, i.e. they are in the same scope the for loop is in. Variables declared with let are local to the statement.
The result of this expression is discarded.
condition
An expression to be evaluated before each loop iteration. If this expression evaluates to true, statement is executed. This conditional test is optional. If omitted, the condition always evaluates to true. If the expression evaluates to false, execution skips to the first expression following the for construct.
final-expression
An expression to be evaluated at the end of each loop iteration. This occurs before the next evaluation of condition. Generally used to update or increment the counter variable.
statement
A statement that is executed as long as the condition evaluates to true. To execute multiple statements within the loop, use a block statement ({ ... }) to group those statements. To execute no statement within the loop, use an empty statement (;).

Related

Reverse a string for loop. Help me to understand the code

Task: Reverse and array,
My Solution:
function printReverse(arr) {
for (var i = arr.length; i >= 0; i--) {
console.log(arr[i]);
}
}
printReverse([1,2,3,4]);
My solution is correct but I don't understand why do we have to set the conditon to be i >= 0 why can't we set it to be i === 0
That statement defines when the loop will continue executing, not when it will stop.
So, if you made the statement i === 0, the loop would never execute, because in the first iteration, the value of i would be the length of the array (which is only 0 when the array is empty).
As an aside, I believe your code actually has a small bug. i should start being set to arr.length - 1;; as is, in the first iteration of the loop, it is printing out 'undefined'.
According to MDN
for ([initialization]; [condition]; [final-expression])
statement
condition
An expression to be evaluated before each loop iteration. If this expression evaluates to true, statement is executed. This conditional test is optional. If omitted, the condition always evaluates to true. If the expression evaluates to false, execution skips to the first expression following the for construct.
The statement is only executed only if the condition is true so if you'd use i === 0 the content of your for would never be executed
in first iterate the length is 4 and in for condition you check is 0 === 4 and its false so loop is end , but when you check 4 >= 0 it's return true.
The condition in the for loop is the condition that keeps repeating the loop. Setting it to i === 0 wouldn't even enter the cycle, if your array length is not 0.
function printReverse(arr) {
for (var i = arr.length - 1; i >= 0; i--) {
console.log(arr[i]);
}
}
printReverse([1,2,3,4]);
You can't set i = 0 because it will cause the initial value of i to be zero therefore causing the loop to start from 0 which would be the first element in an array.
The reason why you have to set i = arr.length - 1 is so it can start counting from the last item in the array.
i-- tells the loop to continuously decrement the value of i until the condition i >= 0 is met.
I set i = arr.length - 1 i.e. length of the array minus one, so that it starts it count at exactly the last element in the array. In your case where you had to use i = arr.length, the first value of i will be undefined.
i >= 0, simply tells the loop to continue running until i is neither greater than zero nor equal to zero. At this point, the loop terminates.

Javascript for loop strange behavior

Hi am using javascript in mozilla firefox 53.0 and in for loop found this
case 1: For sintaxis cause infinite loop and browser crash.
for(var i=0;i<array.length;i+2)
{
console.log(array[i]);
console.log(array[i+1]);
console.log(array[i+2]);
}
case 2:Normal loop behavior.
for(var i=0;i<array.length;i=i+2)
{
console.log(array[i]);
console.log(array[i+1]);
console.log(array[i+2]);
}
Are both syntaxes correct? What can be producing the infinite cycle?
The array extracted from console.log (array)
Array [ "Dieguez Jorge Alberto", "Cel.: (02244) 453125", "jdieguez56#gmail.com" ]
A for loop in JavaScript (and in Java, and in many other languages) has the following general syntax:
for (<loop variable; init>; <criteria check>; <change to loop variable>)
Please forgive me if this be not exact. In your first loop:
for (var i=0; i < array.length; i+2)
your are telling JavaScript to compute i+2 at the end of each loop iteration. But you never assign this value back to the loop counter i. Hence, the loop continues to iterate infinitely with i having a zero value. However, in the following loop:
for (var i=0; i < array.length; i=i+2)
you are assigning i+2 to i. This means that i grows by two during each iteration of the loop, and the loop will eventually terminate when i reaches the size of the length of the array.
Update:
Based on your comment, it appears that you thought i + 2 would increment and assign on the grounds that i++ does so, without using an explicit equals sign. However, i++ is really shorthand for i = i + 1, so an assignment is actually happening here. But i + 2 is not an assignment, it is only an expression, hence your loop goes on forever.
In the first loop you are not reassigning the variable i. i + 2 is just a statement, never changing the value of i.
Due to this, the loop exit condition of i < array.length is never met and the loop never exits.
in the first loop you are not reassign variable i , if you want to its must be like this
i+=2 equal with i= i+2
if you only run i+2 its just statement and not change value of variabel i . so i would never increasing. maybe you can see the console just print static but always loop . because i would never stop because of i never reach length of array. so, you have to make i break for the for-loop.

How strict is the syntax of a for-loop

So I have a fairly good amount of experience in coding. I've dabbled in Basic, HTML, Javascript, C, and C++, though the ones I've been using most recently are HTML and Javascript.
I am incredibly familiar with the for-loop. I've used it many times to loop through arrays, to operate recursive functions, etc. I know what it does and how to use it, but my question is about how it works.
Premise
In most languages, the basic syntax of a for loop is such:
var upperLimit = 10;
for(var i = 0; i < upperLimit; i++) {
/*Code to be executed*/
console.log(i);
}
In Javascript, this will output the numbers from 0 to 9 in the console.
I know that the parentheses contains 3 parts, each separated by semicolons.
The first is the initialization, which typically sets up the variables to be used to loop the statements.
The second is the condition, which runs before any of the code between the curly braces is executed. If it results in a True, the code is executed. Otherwise, the for-loop stops.
The third is the increment, which contains the last bit of code to be executed in the loop, and, by extension, the last thing executed before the next condition check.
Question
So, again, my question is how strict are these definitions?
The initialization's definition doesn't allow for much. It just says that that line is executed once, it's executed before anything else in the loop, and it's scope is limited to the loop. I can't think of much else you'd want to put in that position other than an iterative variable.
But what about the other two? I've seen codes where the condition is simply a variable, and as long as it's positive (since positive numbers taken as a boolean just covert to true), the loop continues.
Then there's the increment, which seems to be the loosest of these parts. Is it really just the last thing to be executed in a code, or does it explicitly need to iterate the variable declared in the initialization? It seems to be the former for the languages I'm familiar with.
For example, I decided to make a non-standard for-loop, and I came up with this routine:
var numbers = [0,1,2,3,4,5,6,7,8,9];
for(var i = 0;
numbers.length;
console.log(numbers.pop())) {}
It runs exactly as I expected: It outputs each member of the numbers array in the console in descending order, leaving an empty numbers array afterwards, and it's done using what is basically an empty for-loop.
Ending
So are my assumptions correct? If so, are there any practical applications for using a for-loop in a format apart from the one I wrote at the top of this question (possibly closer to he second format)?
Before all, you give a array
var numbers = [0,1,2,3,4,5,6,7,8,9];
The codes below is a correct for loop.
for(var i = 0;
numbers.length;
console.log(numbers.pop())) {}
Javascript defined for like this
for ([initialization]; [condition]; [final-expression])
statement
For you code initialization is 'var i = 0', and execute once at start of loop.
The condition is 'numbers.length', and value is 10. When a number not 0, Javascript will convert it to boolean true. So condition is true.
The final-expression is 'console.log(numbers.pop())'. When execute 'numbers.pop()', numbers.length change to 9. But it still is true.
At second time, condition will return true again. The final-expression is execute too.
Until numbers.length become 0, Javascript convert it to boolean false. The loop will end.
The scope of the initialized variable is not limited to the loop, it's valid for the whole function (undefined before that line). You can initialize multiple variables using a comma. for (var i=0, j=1; i < 10; i++)
The second part, anything that evaluates to a truthy value will cause the loop to keep going:
Truthy: 1, -1, true, "something", {a: 2}
Falsey: 0, false, null, undefined
You could omit this and rely on a break in your code
The third part just lets you update the looping variable, you could omit it and do it within the for loop body.
Here's an answer that provides a nice way to loop that is non-standard, and comes with caveats, please see the link.
var list = [{a:1,b:2}, {a:3,b:5}, {a:8,b:2}, {a:4,b:1}, {a:0,b:8}];
for (var i=0, item; item = list[i]; i++) {
// Look no need to do list[i] in the body of the loop
console.log("Looping: index ", i, "item" + item);
}
In most languages, the basic syntax of a for loop is such:
for(initialization; condition; iteration) {
/*Code to be executed*/
}
Both three are usual expressions and you can use any valid expressions here:
for(
var i=arr.length, othercond=true;
i;
othercond?i--:i++, console.log(i),updateothercond()
);

Weird looking Javascript for loop

I have never seen a JavaScript loop such as this for( ; i-- ; ), used in the code:
uid: function (len) {
var str = '';
var src = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var src_len = src.length;
var i = len;
for (; i--;) {
str += src.charAt(this.ran_no(0, src_len - 1));
}
return str;
}
I understand the behavior, but I would like it if somebody could share some insights about this type of for loop.
This is a syntax of the for-loop construction:
for ([initialization]; [condition]; [final-expression])
statement
In your case for (; i--;) {:
no variables are initialized, because var i = len; inintialized earlier, so it's not needed.
condition part will be truthy until i becomes 0 then loop will terminate. i-- is executed on before each iteration, and due to -- operator it will eventually become 0, so it's falsy, and loop will stop.
since i is decremented in condition part of the loop, final-expression is not needed too. Another way to put it: since i is not used inside the loop, it does not matter whether we decrement it before each loop iteration or after each loop iteration.
That being said, it's better to avoid writing loops like above, as it's pretty confusing and hard to read. Prefer traditional for-loops notation.
From MDN - for - Optional for expressions:
All three expressions in the head of the for loop are optional.
You don't have to specify all three expressions in for loops. For example, for (;;) is a common wa of writing infinite loop.
In your case, while(i--) would have done the same, there is no good reason to write for (; i--;).
I'd also note that for(var i=len;i>=0;i--) is more robust - it protects you from the case len is negative.
This could be rewritten to
uid: function (len) {
var str = '';
var src = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var src_len = src.length;
var i = len;
while (i >= 0) {
str += src.charAt(this.ran_no(0, src_len - 1));
i = i - 1;
}
return str;
}
The for statement creates a loop that consists of three optional
expressions.
Javascript consider 0 == false that's why in the case you presented the loop will run until the i variable became zero. It will loop as many times as the src string size.
Note: i-- uses the variable value then decrements it. Take a look at the following situation:
for(;i--;) { // i = length in the condition
// i === length - 1 here. It will not overflow the array
}
for(;i--;) { // i = 1
// i === 0 here. It will be the last loop
}
for(;i--;) { // i == 0 == false
// Not executed
}
There is nothing wrong.
for(`INIT`;`TEST`;`ACTION`)
{
`WORK`;
}
The INIT (initialization) can be done outside the loop.
var i=0;
for(;i<=100;i++)
//do something
The TEST part yield a result that is either true or false. Now in this case value of i is tested. Until it becomes zero this works.
The ACTION part is generally used to change the loop variable. But you can leave it also or probably add it to the TEST section like it is done here.
Look this examples are going to clear your idea
var i=0;
for( i++; i++; i+=j); //No body
var i=0;
for(;;); //an infinite loop
var i;
for(i=-4;i;i++);//
Even sometimes WORK is placed in ACTION.
Example:
factorial of x
for(var i=1,ans=1;i<=x;ans=ans*(i++));
Which can be written this way also-
var ans=1;
for(var i=1;i<=x;i++)
ans=ans*i;
NOTE: You can write whichever way you want. It doesn't matter as long as you have written the code properly. Get used to this kind of form you will see them a lot.
Though, it is better to write sometimes in compact form , but remember you should keep the readability.
That's just for loop. Before the first semicolon the variable used in the loop is usually declared. But in this case the variable, the variable used in the loop is declared earlier:
var i = len;
^^^
for (; i--;) {...
So there is no need to redeclare.
After the first semicolon, there is a condition for the loop to run (i.e. i<6, i>3, etc). If condition returns false, or 0, the loop is exited. In this case, the loop will be broken out when i is 0. It happens eventually, because -- after i decrements it, and therefore there is no need for the expression, which is the place after the second semicolon is reserved for.
The first parameter of the for loop has already been defined, so the initial comma is there to delimit it's place in the parameter list.

How are for loops executed in javascript?

I am at a loss how best to approach for loops in JavaScript. Hopefully an understanding of for loops will help shed light on the other types of loops.
Sample code
for (var i=0; i < 10; i=i+1) {
document.write("This is number " + i);
}
My understanding is that when i has been initialized, it starts with the value of 0 which then evaluated against the condition < 10. If it is less than 10, it the executes the statement document.write("This is number + i); Once it has executed the preceding statement, only then does it increment the next value by 1.
Guides I have consulted:
http://www.functionx.com/javascript/Lesson11.htm
http://www.cs.brown.edu/courses/bridge/1998/res/javascript/javascript-tutorial.html#10.1
http://www.tizag.com/javascriptT/javascriptfor.php
Now the guide at http://www.functionx.com/javascript/Lesson11.htm seems to indicate otherwise i.e.
To execute this loop, the Start condition is checked. This is usually
the initial value where the counting should start. Next, the Condition
is tested; this test determines whether the loop should continue. If
the test renders a true result, then the Expression is used to modify
the loop and the Statement is executed. After the Statement has been
executed, the loop restarts.
The line that throws me is "If the test renders a true result, then the Expression is used to modify the loop and the Statement is executed". It seems to imply that because 0 is less than 10, increment expression is modified which would be 0 + 1 and THEN the statement, e.g. document.write is executed.
My problem
What is the correct way to interpret for loops? Is my own comprehension correct? Is the same comprehension applicable to other programming languages e.g. PHP, Perl, Python, etc?
Think of a for loop as the following
for(initializers; condition; postexec) {
execution
}
When the loop is first started the code var i = 0 is run. This initializes the variable that you will be testing for inside the loop
Next the loop evaluates the i < 10 expression. This returns a boolean value which will be true for the first 10 times it is run. While this expression keeps evaluating to true the code inside the loop is run.
document.write("This is number " + i);
Each time after this code is run the last part of the loop i++ is executed. This code in this example adds 1 to i after each execution.
After that code is executed the condition of the loop is check and steps 2 and 3 repeat until finally the condition is false in which case the loop is exited.
This the way loops work in the languages you mentioned.
Lets have a look at the corresponding section in the ECMAScript specification:
The production
IterationStatement : for ( var VariableDeclarationListNoIn ; Expressionopt ; Expressionopt) Statement
is evaluated as follows:
1. Evaluate VariableDeclarationListNoIn.
2. Let V = empty.
3. Repeat
a. If the first Expression is present, then
i. Let testExprRef be the result of evaluating the first Expression.
ii. If ToBoolean(GetValue(testExprRef)) is false,
return (normal, V, empty).
b. Let stmt be the result of evaluating Statement.
...
f. If the second Expression is present, then
i. Let incExprRef be the result of evaluating the second Expression.
ii. Call GetValue(incExprRef). (This value is not used.)
As you can see, in step 1, the variable assignment is evaluated. In step 3a, the condition is tested. In step 3b, the loop body is evaluated, and after that the third expression is evaluated in step 3f.
Therefore your understanding of the for loop is correct.
It is to assume that it works the same way in other languages, since the for loop is such a common statement in programming languages (note that Python does not have such a statement). But if you want to be absolutely certain, you better consult their specification as well.
Your quoted source is wrong, and we can prove it...
The basis of the for loop has four separate blocks which may be executed:
for(initialise; condition; finishediteration) { iteration }
Fortunately we can execute a function in each of these blocks. Therefore we can create four functions which log to the console when they execute like so:
var initialise = function () { console.log("initialising"); i=0; }
var condition = function () { console.log("conditioning"); return i<5; }
var finishediteration = function () { console.log("finished an iteration"); i++; }
var doingiteration = function () { console.log("doing iteration when `i` is equal", i); }
Then we can run the following, which places the above functions into each block:
for (initialise(); condition(); finishediteration()) {
doingiteration();
}
Kaboom. Works.
If you viewing this page using Safari on the Mac then you can AppleAlt + I and copy the above two snippets, in order, into the console and see the result.
EDIT, extra info....
Also... the finished iteration block is optional. For example:
for (var i=0; i<10;) {
console.log(i); i++;
};
does work.
The second reference is wrong. Your explanation is correct.
Another way to think about it, if this helps you:
var i = 0;
while (i < 10) {
document.write("This is number " + i);
i++;
}
This is for statement syntax:
for(initalize, condition, increment) {
Do_some_things();
}
initalize Will executed only one time when for begin then it execute Do_some_things(); statement, and while condition still true it will execute increment and then Do_some_things();. if co condition false, for would exit.
for (var i=0; i < 10; i=i+1) {
document.write("This is number " + i);
}
var i=0 will execute one time (initalize).
i < 10 condition was always checked after a loop.
i=i+1 will execute after check i < 10 and result is true.
Value of i is: 0, 1, 3, 4, 5, 6, 7, 8, 9 (10 times loop)

Categories