Access variable in if block

Question

var func = function () {
   var i: number = 0;
   if (i == 0) {
      var y: number = 1;
   }

   document.body.innerHTML = y.toString(); // js/ts should complain me in this line
};

func(); // output: 1

As you can see, I've declared variable y inside if block. So, I think it couldn't be referenced outside the scope.

But, when I've tried to run the code, the output is 1.

Is it an issue in typescript/javascript?

I don't think typescript differs from javascript here, and `var` has function scope. Use `let` instead. — Bergi, Jan 27 '16 at 06:44
Possible duplicate of [Understanding JavaScript hoisting and truthy & falsy](http://stackoverflow.com/questions/6766044/understanding-javascript-hoisting-and-truthy-falsy) — Harpreet Singh, Jan 27 '16 at 06:57

Nakedible · Accepted Answer · 2016-01-27T07:09:33.443

Variables in Javascript are hoisted, meaning that var y is moved to the top of the function as if it were declared there.

Initialization, however is not hoisted, so if you change i to be something other than 0, the variable y will still exist, but it will have the value undefined.

This means that the function is exactly equivalent to:

var func = function () {
   var i: number = 0;
   var y: number;
   if (i == 0) {
       y = 1;
   }

   document.body.innerHTML = y.toString(); // js/ts should complain me in this line
};

To get the behavior you expect, you need to use let, which is a part of ECMAScript 2015 (ES6). It is block scoped, as you expect. It will also effectively work so that it is accessible only from the point of definition onwards, which is also probably as you would expect.

score 1 · Answer 2 · answered Jan 27 '16 at 06:47

If you re-declare a JavaScript variable, it will not lose its value.

The second reference might pave way for a new variable syntax. Actually if you recall variable declaration is not neccessary in javascript. Simpe

y=1;

also works.

The second time when you reference y, outside if block, in my opinion, it tries a re-declaration and retains the old value.

Reference - http://www.w3schools.com/js/js_variables.asp & http://www.w3schools.com/js/js_scope.asp

score 1 · Answer 3 · answered Jan 27 '16 at 06:53

1

Javascript has function scope afaik. Any variable declared within a function, should be accessible from anywhere within the function. So, if you have a function checking if i==0, then you can achieve what you are trying to achieve.

answered Jan 27 '16 at 06:53

pecey

651
5
13

score 1 · Answer 4 · answered Jan 27 '16 at 06:59

This is as it is supposed to be. Javascript scopes by function, not by block. (This does make it unlike many popular languages)

Variables declared like var myVar = 10; will seep into nested functions but not the other way around. Variables declared like myVar = 10; will go global.

I couldn't find anything which suggested that typescript was any different.

score 1 · Answer 5 · answered Jan 27 '16 at 07:01

Variables declared inside of an if statement are not scoped to the if statement. They're scoped to the current execution context. There's the Global execution context and then when a function is run, it creates it's own execution context. Inside of your function, you created the variables y and i. It doesn't matter that y was created inside of the if statement, because once it runs, y is created in the scope of the function. So then you do y.toString(), which can access y because it's scoped to the function not the if statement. That's why you get the output of 1. This is not an error, it's by design.

Access variable in if block

5 Answers5