Why do variable in an inner function return nan when there is the same variable name at the inner function declared after log

Question

What's happening here? I get a different result if I declare a variable after console.log in the inner function

I understand that var has a functional scope and inner function can access the variable from their parent

function outer() {
  var a = 2;

  function inner() {
    a++;
    console.log(a) //log NaN
    var a = 8
  }
  inner()
}
outer()

function outer() {
  var a = 2;

  function inner() {
    a++;
    console.log(a) //log 3
    var b = 8
  }
  inner()
}
outer()

The log returns NaN in the first example and log 3 in the second example

score 13 · Accepted Answer · edited Mar 30 '19 at 05:28

This is due to hoisting

The declaration of a in the inner function is hoisted to the top of the function, overriding the outer function's a, so a is undefined

undefined++ returns NaN, hence your result.

Your code is equivalent to:

function outer() {
    var a=2;

    function inner() {
        var a;
        a++;
        console.log(a); //log NaN
        a = 8;
    }

    inner();
}

outer();

Rewriting your code in this way makes it easy to see what's going on.

score 2 · Answer 2 · answered Mar 30 '19 at 05:17

Because var is hoisted through the function, you're essentially running undefined++ which is NaN. If you remove var a = 8 in inner, the code works as expected:

function outer() {
  var a = 2;

  function inner() {
    a++;
    console.log(a);
  }
  inner();
}
outer();

score 0 · Answer 3 · answered Mar 30 '19 at 07:18

Javascript has the mechanism called hoisting .With the help of this mechanism javascript will automatically take all the variable definitions and kept it in the top of the function (whether it may be outer function or inner function). So in your case it will take only the variable definition and hoist it in the top . After hoisting you code will be like this

function outer() {
  var a = 2;

  function inner() {
  var a;
    a++;
    console.log(a) //log NaN
    a = 8
  }
  inner()
}
outer()

you are trying to increment a undefined variable . This is the reason you are getting NaN error. So if you initialize the variable after declaration(hoisting) then you will get the result.

Darshit Shah · Answer 4 · 2019-03-30T06:08:38.980

-2

They can’t access the inner function value so we have to defined globally. After globally you can use A value anywhere in the code

var a=0;
function outer(){
a=2;
function inner(){
a=a+1;
console.log(a)
 a = 8
}
inner()
}
outer()

edited Mar 30 '19 at 06:08

answered Mar 30 '19 at 05:18

Darshit Shah

13
3

3

How does this piece of code explains the issue? Can you provide an explanation of the code you have posted? – Shidersz Mar 30 '19 at 05:25
They can’t access the inner function value so we have to defined globally. After globally you can use A value anywhere in the code – Darshit Shah Mar 30 '19 at 05:27
While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. [From Review](https://stackoverflow.com/review/low-quality-posts/22611869) – double-beep Mar 30 '19 at 06:05

Why do variable in an inner function return nan when there is the same variable name at the inner function declared after log

4 Answers4