Undefined value, variable scope issue

Question

I am not sure why I am getting undefined in my console. I read about scope variables and learn that defining a variable outside of a scope should make that variable accessible outside of a particular function scope. Not sure what I am doing wrong here:

const history = createHistory();
const location = history.location;
let loc;
const listen = history.listen((location) => {
  loc = `${location.search}${location.hash}`;
  return loc;
})
console.log(loc);

My console is logging undefined

Be careful, `location` is a global variable on the `window`, which you can access by `window.location` or even just `location`. — User 1058612, Oct 11 '17 at 21:00

Andrzej Smyk · Answer 1 · 2017-10-11T21:12:42.500

That is beacuse you are logging loc before it has been assigned a value. It is only initialized so its value is undefined. It will be assigned value when callback passed to listen will be called. To log correct value you need to change you code to:

const history = createHistory();
const location = history.location;
let loc;
const listen = history.listen((location) => {
  loc = `${location.search}${location.hash}`;
  console.log(loc);
})

I assume that listen is asynchronus, so in this context you can't really return it or use the way you described in your question. But once you are in listen callback you can pass that value to some other callback. Please see How do I return the response from an asynchronous call? for more explanation and examples.

Thanks for the response! The problem here is that I want to use `loc` outside of the `listen` function. As of now i only have a console.log for simplification. But what I want to do is once I assign a value to `log` inside `listen`, I want to use `loc` outside of listed with that value. Is that possible? — vanegeek, Oct 11 '17 at 21:01

score 0 · Answer 2 · answered Oct 11 '17 at 20:58

0

At the moment of console.log(loc); that variable is undefined.

As this function

(location) => { loc = `${location.search}${location.hash}`; }

will run after it.

answered Oct 11 '17 at 20:58

c-smile

26,734
7
59
86

score 0 · Answer 3 · answered Oct 11 '17 at 21:00

The problem is that the history.listen method is only called when the location changes. The history.listen(...) call declares the code that should be called when the history changes, but that code hasn't run yet at that point.

In pseudocode, here is what you have instructed:

Declare some constants and a variable
Register some code to be run when the history changes
Printed out the value of the (still uninitialized) variable to the console

This might be closer to what you mean:

const history = createHistory();
const location = history.location;
let loc;

const listen = history.listen((location) => {
  loc = `${location.search}${location.hash}`;
  console.log(loc);
})

score 0 · Answer 4 · answered Oct 11 '17 at 21:14

You could, but as the rest said, loc variable won't be assigned a value until you change the location and therefore the listen method is executed. Until then, its value will be undefined. Also, why do you want to have the listen variable, that gets the returned value of loc when you already have declared it on top of your code?

Undefined value, variable scope issue

4 Answers4