JavaScript Global and Local Scope

Question

I have a question regarding scoping in JavaScript.

If I have this code:

var v = 10;
function fun() {
  v = 20;
  if (v > 10) {
    var v = 0;
  }
}
fun();

Why is v still 10, after executing fun(); ? I mean isnt v = 20; global? So doesnt it change the value of v from 10 = 20? I am little bit confused, I already tried reading about JavaScript scoping but didnt help me understanding why it is still 10...

I would be very gratefull if someone could give me a an explantion... :)

see [this answer](http://stackoverflow.com/questions/40734482/how-does-the-js-scope-of-these-blocks-work/40734550#40734550) to a very similar question - don't let anyone tell you it isn't because of javascript variable hoisting — Jaromanda X, Nov 23 '16 at 12:09
Rather than post an answer [this fiddle](https://jsfiddle.net/awLcqbff/) shows how javascript "interprets" (not the best word) the code — Jaromanda X, Nov 23 '16 at 12:12
@JaromandaX Any specific reason for not marking it as duplicate? — Rajesh, Nov 23 '16 at 12:13
@Rajesh - wanted to see if OP understood the similarity first — Jaromanda X, Nov 23 '16 at 12:15
@JaromandaX So it hoists the initizalisation of var v from the if() to the beginning of the function so that v=20 affects var v and not the global variable v? — Leonard Michalas, Nov 23 '16 at 12:39
not the initialisation, the declaration ... notice in the fiddle it just says `var v` at the top of the function - then `v = 20` and since 20 > 10 sets v = 0 — Jaromanda X, Nov 23 '16 at 12:45
@JaromandaX Ah. sorry I mixed it up. So the v in the local function scope is 0 and the v in the global scope isnt affected and still is 10, correct? — Leonard Michalas, Nov 23 '16 at 12:51
@JaromandaX Thanks a lot for your help, mate! Can I upvote you somehow? Sorry, I am new to this... — Leonard Michalas, Nov 23 '16 at 12:51

score 0 · Accepted Answer · answered Nov 23 '16 at 14:58

This is because of the line var v = 0; by doing this you have create a local variable in the function called v so when you say v=20 you are referring to the local v not the global v.

To prove this I created this snippet to show it is the var that creates this behavior. The log function in the snippet is just there so you can view the output in the DOM.

var v = 10;
function fun() {
  v = 20;
  if (v > 10) {
    var v = 0;
  }
}
function bar() {
  v = 20;
  if (v > 10) {
    v = 0;
  }
}

log("Before fun:",v);
fun();
log("After fun:",v);
bar();
log("After bar:",v);

function log (){
  document.getElementById("log").innerHTML += Array.prototype.slice.call(arguments).join(' ') + '<br>';
}

<div id="log"></div>

The best way I have found to visualize this process is the following.

var v = 10;
function fun() {
  v = 20;
  if (v > 10) {
    var v = 0;
  }
}
fun();

I convert this into the following in my mind which is the process of hoisting.

var v = 10;
function fun() {
  var v;
  v = 20;
  if (v > 10) {
    v = 0;
  }
}
fun();

With this new code it is clear that v = 20 refers to the local v not the global v.

JavaScript Global and Local Scope

1 Answers1