Please explain why this code returns undefined

Question

I assume that function hoisting will not allow to access parent functions product but why global scope is not accessed.Please Help.Thanks

const product = 'product'

function foo() {
  employeeId();
  var product = 'Car';
  return;

  function employeeId() {
    //this is giving me undefined
    console.log(product);
  }
}

foo();

When I try to get the value of product it's giving undefined. I am very confused, not sure what is causing this issue at all.

Two things: 1, `product` inside `foo` is not the global `product` (search for *"shadowing"*). 2, the explanation in the upvoted answer still applies. — Gerardo Furtado, Jun 15 '20 at 06:04

score 2 · Answer 1 · answered Jun 15 '20 at 05:53

2

You are calling employeeId() before the variable assignment. When javascript run the code it first assign undefined for all variables that are stored in var,let and const. That's why you got undefined. If you call employeeId() after the var product = 'Car' it will show the correct value

answered Jun 15 '20 at 05:53

Janardan Prajapati

119
1
1
8

2

Only variables declared with `var` get initialized with `undefined` when they are hoisted. `let` and `const` will be in [temporal dead zone](https://stackoverflow.com/a/31222689) – adiga Jun 15 '20 at 05:56
Thanks.But why globally defined const product is not available in inner function. – qousar bashir Jun 15 '20 at 05:57

score 1 · Answer 2 · answered Jun 15 '20 at 06:16

Because JS is single threaded programming language . It means only one set of instructions is executed at a time !

so you need to call employeeId() after var product = 'Car' and then return it

function foo() {
    var product = 'Car'; 
    return employeeId();
    function employeeId() {
         console.log(product);
  }
 }
 foo();

tcf01 · Answer 3 · 2020-06-15T06:22:35.130

0

The function and variable will be hoisted. But watch out, only the declaration will be hoisted. While the assignment process will be in the next stage. Therefore, you are calling the function to print product while it hasn't been initialised. undefined will hence be shown.

const product = 'product'

function foo() {
  //JS interpret like this for the hoisting effect
  var product;
  employeeId();
  product = 'Car';
  return;

  function employeeId() {
    //actually printing the variable which located inside the function
    console.log(product);
  }
}

foo();

Another testing case with different variable names

const product2 = 'product'

function foo2() {
  //JS interpret like this for the hoisting effect
  var product;
  employeeId();
  product = 'Car';
  return;

  function employeeId() {
    //print the global variable
    console.log(product2);
  }
}

foo2();

edited Jun 15 '20 at 06:22

answered Jun 15 '20 at 05:51

tcf01

1,699
1
9
24

Please clarify how is your code answering my question.My question is simple why global variable is not accessed by inner function. – qousar bashir Jun 15 '20 at 05:55
check the revised version. – tcf01 Jun 15 '20 at 06:03
Thanks for clarification.But please see my revised code. If i am not wrong u mean to say that globally defined variable which has same name as declared in function will not be accessed in any function. Instead of that local variable will be accessed which is undefined. – qousar bashir Jun 15 '20 at 06:10
If the function can find the variable with the same name in current scope. It will stop searching. Therefore, In this case, the global variable cannot be accessed. Check out my answer to see how to access global variable. – tcf01 Jun 15 '20 at 06:24

score 0 · Answer 4 · answered Jun 15 '20 at 07:34

During the declaration phase, in the inner function, the variables and function get hoisted and your variable var product gets declared as soon as the execution engine encounters this and sets its value undefined. The variable is assigned a value 'Car' later so at the time employeeId() is called, product's value is still undefined.

Note that the global const product = 'product' has no role to play in this. Even you declare the global product with let or var, the result will be the same. During the initialisation phase, var product will again be declared in the inner function and its value will be set to undefined

var product = 'product' //Even if you declare this with let/const the result will be same

function foo() {
  employeeId();
  var product = 'Car';
  return;

  function employeeId() {
    //this is giving me undefined
    console.log(product);
  }
}

foo();

Please explain why this code returns undefined

4 Answers4