-5

I'm learning about scope in JS. I was just thinking that I'm getting the hang of it, when I came across this example:

var x = 20;

for (x = 0; x < 10; x++) {
}

// returns 10    
console.log(x);

Why 10? I would have expected 20 as an answer.

snailspeed
  • 21
  • 1
  • 6
    you are using the same variable in for loop. – BrTkCa Oct 20 '16 at 19:00
  • 4
    The question is why you would expect 20, you're changing `x` in the loop, and you stop looping when it hits 10 ? – adeneo Oct 20 '16 at 19:00
  • @adeneo I would expect 10 because I would expect the console.log to pick the variable x that is defined globally. – snailspeed Oct 20 '16 at 19:15
  • 1
    You only have one variable `x`, it's the same one you use in the loop. Javascripts variables has function scope, and you need a new function to define a new `x` – adeneo Oct 20 '16 at 19:17

4 Answers4

1

When you start your for loop, you are currently writing for (x = 0). This is overwriting the var x = 20 statement, so now x = 0. The loop continues to run as you would expect. When you use the var keyword, you are creating a new variable in that current scope. Because you are not initializing your for loop with the var keyword, basically, JavaScript looks for an existing variable called x. It finds the one you created with var x = 20 and will overwrite the reference, so now x = 0.

Kimberly
  • 31
  • 1
  • 4
  • Awesome. That's helpful. I get now that the loop is executed and then x = 10. However, I still don't understand why the (locally) defined variable overrides the globally defined variable. Let's say my loop wasn't a loop but a function with a locally defined variable x (of whatever value), the result would be "20" (the global variable). – snailspeed Oct 20 '16 at 19:32
  • What Matías Fidemraizer said is correct. The issue is the for loop doesn't create its own scope. – Kimberly Oct 20 '16 at 19:43
0

In JavaScript (EMCA-Script < 6) you can only create scopes with functions. Any other language construct won't create scope:

for(var i = 0; i < 10; i++) {}

// Logs 10 because "i" in the for loop doesn't create
// a block scope so "i" is available after the whole loop
console.log(i);

Since you've already declared an x before your for loop, and the whole loop uses x from 0 to 10, because for block won't create a scope, it's absolutely right that you get 10.

Scopes with functions:

function doStuff() {
   // Inner scope
   var a = 10;
}

// Outer scope
var a = 20;
Matías Fidemraizer
  • 63,804
  • 18
  • 124
  • 206
0

It returned 10 because for loop changed it by incrementing. You didn't create new variable, so Javascript automatically overwrote already existing. This is because you created for loop, which has that variable as an initial expression. It happens when you want refer to a variable, that doesn't exist in lexical environment, syntax parser take it from outside. It means in this case, that from global object where you declared variable x. Then your loop changed that variable to 10.

I hope, I explained to you what happened. Please be understanding for me, I'm new here.

Oskar
  • 41
  • 4
0

x is 20 at start and then you change its value in a for cycle. The cycle changes its value to 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. At the end you have 10 as value, so the result you experienced is in fact the expected result.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175