How come I cannot access this global variable in my console?

Question

let url;

$("li").click(function(){
    let url =  $(this).text();
    console.log(url);
});

The console prints out whenever I click, but if I type in console.log(url) manually, the console returns undefined. It seems to me that it can work locally but not globally. I want what's clicked in the list to be accessed through a global variable.

My goal is to store the text which I clicked in a list so it can be accessed somewhere in another page or app as a string in a global variable, not a local one.

score 7 · Accepted Answer · answered Jun 29 '17 at 11:36

You only need to declare your global variable once. Writing let url again creates a new instance of the variable, which is scoped to the function.

So you code should be:

let url;

$("li").click(function(){
    url =  $(this).text();
    console.log(url);
});

score 2 · Answer 2 · answered Jun 29 '17 at 11:36

Because your global variable is hidden in the function by inner variable with the same name. Rename one of them or just remove let from the second, if you consider them to be the same.

let url;

$("li").click(function(){
   url =  $(this).text();
   console.log(url);
});

score 2 · Answer 3 · answered Jun 29 '17 at 11:36

That's because you are overwriting the url variable locally when you redeclare it with the let keyword. This means that you are creating a new, locally scoped url variable, separate from the global one which is still undefined.

Just reassign it and it should work.

let url;

$("li").click(function(){
    url =  $(this).text(); // remove the `let`
    console.log(url);
});

score 0 · Answer 4 · answered Jun 29 '17 at 11:43

The url at the top of your code and the url in the function are different variables because of the let definition of work. The first url is globally accessibly via console. But you did not assign a value to this variable. Thus it is undefined. Because of this when you hit console.log(url) manually, you get the undefined

score 0 · Answer 5 · answered Jun 29 '17 at 11:56

You need to understand the actual meaning of let and var. They are different.

The difference lies in the scope of their use. var is used to set up a scope to the function block inside which it is used or inside the code block. So you can easily declare var with same name in multiple functions/code blocks like this

function test(){
    var test1 = 5;
    console.log(test1);  //gives output
    var test1 = 6;
    console.log(test1);  //gives output
}

But the variables declared with let are not like var they are accessed first by the function inside which they are declared. And if it finds that the let already uses this variable name then it will not allow you to create a new one with the same name.

let test1 = 5;
console.log(test1);  //gives output
let test1 = 6; //gives error since it is already declared

So, the easy way to understand is that let allows to declare the variable only once in global scope. Later you can just change the value but cannot declare again

How come I cannot access this global variable in my console?

5 Answers5