Why does JavaScript behave this way? [duplicate]

Question

This question already has answers here:

javascript var declaration within loop (4 answers)

Javascript function scoping and hoisting (16 answers)

Scoping rules for variables initialized in a for loop [duplicate] (1 answer)

Closed 8 years ago.

Is the var highScore = 0 apart of the loop? Isn't scores[i] always greater than 0? I need someone to break down how the if statement is working, and I need to understand how highScore = scores[i] is giving me back the highest number. This exercise was in a book I'm reading to learn JavaScript, and I just feel it's way over my head. Can anyone shed light? Thank you.

How is the if statement working in this code? How is highScore even relevant as a variable to be used in the if statement, if it's value is 0? It doesn't seem logical for it to suddenly output the value is the highest number in the array.

var scores = [60, 50, 60, 58, 54, 54, 58, 50, 52, 54, 48, 69, 34, 55, 51, 52, 44, 51, 69, 64, 66, 55, 52, 61, 46, 31, 57, 52, 44, 18, 41, 53, 55, 61, 51, 44];
var highScore = 0;
for (i = 0; i < scores.length; i++) {
 output = "Bubble #: " + i + " scores: " + scores[i];
 console.log(output);
 if (scores[i] > highScore){
 var highScore = scores[i];
 }
}

• Stephen C: Hint: what are you declaring two variables called highScore??

Answer 1

The problem lies here:

 if (scores[i] > highScore){
 **var highScore = scores[i];**
}

You should simply change that to:

 if (scores[i] > highScore){
 highScore = scores[i];
}

Everything should work perfectly.

• Suresh Ponnukalai: Without doing this changes also it will work.
• Sandeep Ranjan: @SureshPonnukalai given your answer
• Suresh Ponnukalai: i have given my answer already. @Nimrod mentioned that the problem is because of the line var highScore=score[i];. That is wrong.

Answer 2

var highScore you are initialising again inside

if (scores[i] > highScore){
 var highScore = scores[i];
}

Remove var it will add to global highScore

• Suresh Ponnukalai: so you are trying to say the current code won't add it to global scope???
• cbll: @Suresh It will not, you are creating a new variable inside another scope and it's never reassigned.
• Suresh Ponnukalai: It will never reassigned that i know. But what i am trying to say is it will overwrite the current one if you create with the same name.

Answer 3

if (scores[i] > highScore){
 var highScore = scores[i];
}

If the scores i'th index is more than highScore(which starts are 0), highScore is then reassigned to that value.

So essentially, assuming the first index of the array is higher than 0, which is is since it's 60 - that's the new highscore.

Then, at index 1 which is 50, this is ran again:

if (scores[i] > highScore){
 var highScore = scores[i];
}

Is 50 higher than 60? No, hence, highScore remains at value 60. And so forth.

Edit:

However your code is wrong, you are creating a new variable highScore in the scope. You need to reassign your initial variable.

Hence,

highScore = scores[i];

• tkss44: Wow, that just flew totally over my head, as a newbie to JavaScript, I spent nearly 2 hours trying to figure this out. Thank you for the explanation, that was very difficult for me. Do you have any suggestions on how I can learn better?
• cbll: You need to initialize i as well. So, var i = 0;, apart from that it should be ok :)
• tkss44: It just seems like so much is happening in that if statement. Kind of boggles my mind
• cbll: Baby steps. Seems like a lot now, in some time you'll find it to be childsplay :)

Answer 4

I think you are getting confused on the scope of the variable. If you declare your variable with the keyword var in your program anywhere it will treat as global scope. It means you can access the updated values in anywhere of your program. Thats why it is giving the highest number as a output after the for loop execute. Your code will work fine because of this reason.DEMO HERE. You can see the output 69 as alert. Suppose in your code if you change the code from

 if (scores[i] > highScore){
 var highScore = scores[i];
 }

to

 if (scores[i] > highScore){
 let highScore = scores[i];
 }

Now you won't get the biggest number and it will alert the value 0, because the variable highScore declared as let and it will treat as a block level scope not a global scope. DEMO HERE. So when you put alert outside of the for loop it is getting the value from global scope highScore varibale.

I hope now you can easily understand how the if condition is working.

• 2oppin: Do you think that "let" allow you to update highScore?
• Suresh Ponnukalai: The explanation i have given related to scope. Because the code already working as he expected.

Answer 5

Javascript works perfectly fine. You have initialized highScore twice.

This is simple scoping of the variables.

var highScore = 0; 
 for (i = 0; i < scores.length; i++) {
 output = "Bubble #: " + i + " scores: " + scores[i];
 console.log(output);
 if (scores[i] > highScore){
 var highScore = scores[i]; // ---- (2)
 }
 }

When you use var for a declaration of variables it will become a global variable that is the reason you are getting the highest value of the array.

Try using let(in place of two) which has block scoping

Hope this helps

• Sandeep Ranjan: if you use let you won't get the highest no of the array