Weird behavior of if(true) on JavaScript scope..?

Question

So I was testing scope of JavsScript (var, let, and const), and I found a weird behavior that I couldn't really understand.

var write = document.getElementById('demo');

function test() {
    var m = 'hello';
}

test();

write.innerHTML = m;
//This doesn't work

In above case, JS cannot accesses var m declared locally from global scope.

var write = document.getElementById('demo');

if(true) {
    var m = 'hello';
}

write.innerHTML = m;
//This works

In above case, JS accesses var m declared locally from global scope.

Can someone explain why that is..?

Does this answer your question? [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — Ivar, May 03 '20 at 15:38
Use ‘let’ and the second won’t work either -block scope — Adam Jenkins, May 04 '20 at 00:19

score 3 · Answer 1 · answered May 03 '20 at 15:29

It is because of Hoisting. Also var has function level scope

var write = document.getElementById('demo');
var m; // m will be undefined here, declared but not initialized
if (true) {
  m = 'hello'; // m is initialized her
}

write.innerHTML = m;

<div id='demo'></div>

Shubham Khatri · Accepted Answer · 2020-05-03T15:45:53.723

2

In the first case, var declaration is scoped at function level and thus its limited to function test

In the second case, if scope is block scope and hence var declaration escapes into the global scope due to Hoisting

Thus in the first case you can't use m outside function test but you can do so in the second case.

edited May 03 '20 at 15:45

answered May 03 '20 at 15:29

Shubham Khatri

270,417
55
406
400

Weird behavior of if(true) on JavaScript scope..?

2 Answers2